dart 无法滚动时, Package 列表项目与dismissible微件

vltsax25  于 2023-07-31  发布在  其他
关注(0)|答案(1)|浏览(88)

我正在学习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)
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

kt06eoxx

kt06eoxx1#

我尝试你的代码与不同的Dismissible子,和完美的工作,滚动可能不起作用,因为孩子(ExpenseItem),你可能必须添加两个shrinkWrap: true, physics: ClampingScrollPhysics()在Listview.builder或其中之一,
要获得更多帮助,请尝试使用有关ExpenseItem Widget的更多代码更新您的问题,
如果我的回答对你有帮助,别忘了投票️。

相关问题