我正在学习flutter,我正在使用ListView.builder
构造函数来显示列表,当我只是返回ListItem时,我可以滚动列表视图中的项目。但是当我用Dismissible
小部件 Package ListItem时。滚动(当悬停在列表上时2个手指滚动)停止,我无法滚动。
工作代码w/o disposable widget:
import 'package:expense_tracker/models/expense.dart';
import 'package:expense_tracker/widgets/expenses_list/expense_item.dart';
import 'package:flutter/material.dart';
class ExpensesList extends StatelessWidget {
final List<Expense> expenses;
final void Function(Expense item) removeItem;
const ExpensesList(
{super.key, required this.expenses, required this.removeItem});
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: expenses.length,
itemBuilder: (ctx, index) {
return ExpenseItem(
expense: expenses[index],
);
});
}
}
字符串
无法使用Disabilized Widget的代码:
import 'package:expense_tracker/models/expense.dart';
import 'package:expense_tracker/widgets/expenses_list/expense_item.dart';
import 'package:flutter/material.dart';
class ExpensesList extends StatelessWidget {
final List<Expense> expenses;
final void Function(Expense item) removeItem;
const ExpensesList(
{super.key, required this.expenses, required this.removeItem});
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: expenses.length,
itemBuilder: (ctx, index) {
return Dismissible(
key: ValueKey(expenses[index]),
onDismissed: (direction) {
removeItem(expenses[index]);
},
background: Container(
color: Theme.of(context).colorScheme.error.withOpacity(0.75),
// The margin is !
margin: EdgeInsets.symmetric(
horizontal: Theme.of(context).cardTheme.margin!.horizontal,
),
),
child: ExpenseItem(
expense: expenses[index],
),
);
});
}
}
型
提前感谢您的帮助,如果还需要什么,或者我做错了什么,请告诉我。
这里是应用程序的屏幕截图,以获得一个想法x1c 0d1x
注意:我正在用2GB RAM在模拟器上运行应用程序。
编辑:添加expense_item小部件
import 'package:expense_tracker/models/expense.dart';
import 'package:flutter/material.dart';
class ExpenseItem extends StatelessWidget {
final Expense expense;
const ExpenseItem({super.key, required this.expense});
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
expense.title,
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(
height: 4,
),
Row(
children: [
Text(
"\$${expense.amount.toStringAsFixed(2)}",
),
const Spacer(),
Row(
children: [
Icon(categoryIcons[expense.category]),
const SizedBox(width: 8),
Text(expense.formattedDate)
],
)
],
)
],
),
),
);
}
}
型
1条答案
按热度按时间kt06eoxx1#
我尝试你的代码与不同的Dismissible子,和完美的工作,滚动可能不起作用,因为孩子(ExpenseItem),你可能必须添加两个
shrinkWrap: true, physics: ClampingScrollPhysics()
在Listview.builder或其中之一,要获得更多帮助,请尝试使用有关ExpenseItem Widget的更多代码更新您的问题,
如果我的回答对你有帮助,别忘了投票️。