使用Flutter的交叉列表来查看购物清单

2023-09-01 08:02:24

MVVM+Provider中的交叉列表

Flutter中的交叉列表是一种功能强大的控件，允许您创建具有两个滚动方向的数据网格。它非常适合显示二维数据，例如电子表格或日历。在本文中，我们将展示如何使用Flutter创建交叉列表，并将其用于显示购物清单。

1. 准备工作

首先，我们需要创建一个新的Flutter项目。您可以使用Flutter CLI或Android Studio创建项目。一旦您创建了项目，您需要安装必要的依赖项。

dependencies:
  flutter:
    sdk: flutter

  # MVVM+Provider
  provider: ^6.0.2
  flutter_riverpod: ^2.0.0

  # Data model
  freezed_annotation: ^2.0.0

2. 定义数据模型

接下来，我们需要定义数据模型。我们将使用Freezed库来创建不可变的数据模型。

part 'item.freezed.dart';

@freezed
class Item with _$Item {
  const factory Item({
    required String name,
    required bool isPurchased,
  }) = _Item;

  factory Item.fromJson(Map<String, dynamic> json) => _$ItemFromJson(json);
}

3. 创建ViewModel

现在，我们需要创建一个ViewModel来管理交叉列表的数据。我们将使用Provider库来创建ViewModel。

class ItemViewModel extends ChangeNotifier {
  final List<Item> items;

  ItemViewModel({
    required this.items,
  });

  void addItem(Item item) {
    items.add(item);
    notifyListeners();
  }

  void removeItem(Item item) {
    items.remove(item);
    notifyListeners();
  }

  void toggleItemPurchased(Item item) {
    item.isPurchased = !item.isPurchased;
    notifyListeners();
  }
}

4. 创建UI

现在，我们需要创建UI来显示交叉列表。我们将使用Consumer小部件来访问ViewModel。

Consumer<ItemViewModel>(
  builder: (context, viewModel, child) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Name')),
        DataColumn(label: Text('Purchased')),
      ],
      rows: viewModel.items.map((item) {
        return DataRow(
          cells: [
            DataCell(Text(item.name)),
            DataCell(Checkbox(
              value: item.isPurchased,
              onChanged: (value) {
                viewModel.toggleItemPurchased(item);
              },
            )),
          ],
        );
      }).toList(),
    );
  },
);