Flutter多视图列表展示插件multiviewlist的使用

简介

flutter_multiviewlist 是一个帮助开发者在 Flutter 中创建多功能列表视图的插件。通过此插件，您可以轻松实现垂直或水平滚动的列表视图、网格视图，并支持多选、可删除项等功能。

作者：dharmaraj k

特性

垂直滚动网格视图
水平滚动网格视图
可删除列表
多选列表
内容在垂直列表中水平对齐
垂直滚动列表视图
水平滚动列表视图

开始使用

添加依赖

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  multiviewlist: ^0.0.1

然后运行 flutter pub get 更新依赖。

导入并使用

在需要的地方导入插件：

import 'package:multiviewlist/multiviewlist.dart';

使用示例

以下是一个完整的示例，展示了如何使用 multiviewlist 插件来创建一个多功能列表视图。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:multiviewlist/multiviewlist.dart';

// 定义数据模型
class ItemModel {
  int? id;
  String? image;
  String? title;
  String? subTitle;
  String? description;
  String? rating;
  Function(int)? onFav;
  Function(int)? onDelete;
  Function(int)? onTab;
  Function(int)? onSelected;
  bool? isFav;
  bool? isSelected;

  ItemModel({
    this.id,
    this.image,
    this.title,
    this.subTitle,
    this.description,
    this.rating,
    this.onFav,
    this.onTab,
    this.onSelected,
    this.onDelete,
    this.isFav,
    this.isSelected,
  });
}

class AnimatedCardList extends StatefulWidget {
  const AnimatedCardList({Key? key}) : super(key: key);

  @override
  State<AnimatedCardList> createState() => _AnimatedCardListState();
}

class _AnimatedCardListState extends State<AnimatedCardList> {
  List<ItemModel> items = [];
  List<ItemModel> lists = [];
  var isLoading = true.obs;

  // 改变收藏状态
  changeFav(int id) {
    final singleItem = items.firstWhere((element) => element.id == id);
    if (singleItem.isFav == false) {
      singleItem.isFav = true;
    } else {
      singleItem.isFav = false;
    }
    setState(() {});
  }

  // 删除项目
  deleteItem(int index) {
    items.removeAt(index);
    setState(() {});
  }

  // 选择项目
  selectItem(int id) {
    final singleItem = items.firstWhere((element) => element.id == id);
    if (singleItem.isSelected == false) {
      singleItem.isSelected = true;
    } else {
      singleItem.isSelected = false;
    }
    setState(() {});
  }

  // 初始化数据
  initData() {
    debugPrint("initializing");
    setState(() {
      isLoading.value = true;
      Future.delayed(const Duration(seconds: 5), () {
        items = [
          ItemModel(
            image: "https://miro.medium.com/max/1059/1*S_0zKU4NjU51GtuDOcWwVQ.png",
            id: 1,
            title: "first",
            description: "first item in card",
            rating: "4.5",
            subTitle: "card list",
            isFav: true,
            isSelected: false,
            onTab: (int id) {
              print("selected id $id");
            },
            onFav: (int id) {
              print("fav index $id");
              changeFav(id);
            },
            onSelected: (int id) {
              print("selected id $id");
              selectItem(id);
            },
            onDelete: (int index) {
              print("deleted index $index");
              deleteItem(index);
            },
          ),
          ItemModel(
            image: "https://miro.medium.com/max/1059/1*S_0zKU4NjU51GtuDOcWwVQ.png",
            id: 2,
            title: "second",
            description: "second item in card",
            rating: "4.5",
            subTitle: "card list",
            isFav: true,
            isSelected: false,
            onTab: (int id) {
              print("selected id $id");
            },
            onFav: (int id) {
              print("fav id $id");
              changeFav(id);
            },
            onSelected: (int id) {
              print("selected id $id");
              selectItem(id);
            },
            onDelete: (int index) {
              print("deleted index $index");
              deleteItem(index);
            },
          ),
          ItemModel(
            image: "https://miro.medium.com/max/1059/1*S_0zKU4NjU51GtuDOcWwVQ.png",
            id: 3,
            title: "third",
            description: "third item in card",
            rating: "4.5",
            subTitle: "card list",
            isFav: true,
            isSelected: false,
            onTab: (int id) {
              print("selected id $id");
            },
            onFav: (int id) {
              print("fav id $id");
              changeFav(id);
            },
            onSelected: (int id) {
              print("selected id $id");
              selectItem(id);
            },
            onDelete: (int index) {
              print("deleted index $index");
              deleteItem(index);
            },
          ),
          ItemModel(
            image: "https://miro.medium.com/max/1059/1*S_0zKU4NjU51GtuDOcWwVQ.png",
            id: 4,
            title: "fourth",
            rating: "4.5",
            subTitle: "card list",
            isFav: true,
            isSelected: false,
            onTab: (int id) {
              print("selected id $id");
            },
            onFav: (int id) {
              print("fav id $id");
              changeFav(id);
            },
            onSelected: (int id) {
              print("selected id $id");
              selectItem(id);
            },
            onDelete: (int index) {
              print("deleted index $index");
              deleteItem(index);
            },
          ),
          ItemModel(
            image: "https://miro.medium.com/max/1059/1*S_0zKU4NjU51GtuDOcWwVQ.png",
            id: 5,
            title: "fifth",
            rating: "4.5",
            subTitle: "card list",
            isFav: true,
            isSelected: false,
            onTab: (int id) {
              print("selected id $id");
            },
            onFav: (int id) {
              print("fav id $id");
              changeFav(id);
            },
            onSelected: (int id) {
              print("selected id $id");
              selectItem(id);
            },
            onDelete: (int index) {
              print("deleted index $index");
              deleteItem(index);
            },
          ),
          ItemModel(
            image: "https://miro.medium.com/max/1059/1*S_0zKU4NjU51GtuDOcWwVQ.png",
            id: 6,
            title: "sixth",
            rating: "4.5",
            subTitle: "card list",
            isFav: true,
            isSelected: false,
            onTab: (int id) {
              print("selected id $id");
            },
            onFav: (int id) {
              print("fav id $id");
              changeFav(id);
            },
            onSelected: (int id) {
              print("selected id $id");
              selectItem(id);
            },
            onDelete: (int index) {
              print("deleted index $index");
              deleteItem(index);
            },
          ),
          ItemModel(
            image: "https://miro.medium.com/max/1059/1*S_0zKU4NjU51GtuDOcWwVQ.png",
            id: 7,
            title: "seventh",
            rating: "4.5",
            subTitle: "card list",
            isFav: true,
            isSelected: false,
            onTab: (int id) {
              print("selected id $id");
            },
            onFav: (int id) {
              print("fav id $id");
              changeFav(id);
            },
            onSelected: (int id) {
              print("selected id $id");
              selectItem(id);
            },
            onDelete: (int index) {
              print("deleted index $index");
              deleteItem(index);
            },
          ),
        ];
        isLoading.value = false;
      });
    });
  }

  @override
  void initState() {
    initData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Obx(
        () => MultiViewList(
          data: items,
          scrollDirection: Axis.vertical,
          viewType: ViewType.gridView,
          contentAxis: Axis.vertical,
          background: Colors.white,
          isRating: true,
          isFav: true,
          isDismissible: false,
          isLoading: isLoading.value,
          isSelectableList: false,
          selectedColor: Colors.grey.shade200,
        ),
      ),
    );
  }
}

关键模型

用户需要设置数组数据，并遵循以下模型。这是必需的。

class ItemModel {
  int? id;
  String? image;
  String? title;
  String? subTitle;
  String? description;
  String? rating;
  Function(int)? onFav;
  Function(int)? onDelete;
  Function(int)? onTab;
  Function(int)? onSelected;
  bool? isFav;
  bool? isSelected;

  ItemModel({
    this.id,
    this.image,
    this.title,
    this.subTitle,
    this.description,
    this.rating,
    this.onFav,
    this.onTab,
    this.onSelected,
    this.onDelete,
    this.isFav,
    this.isSelected,
  });
}

更多关于Flutter多视图列表展示插件multiviewlist的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 1楼

更多关于Flutter多视图列表展示插件multiviewlist的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

multiviewlist 是一个用于在 Flutter 中展示多视图列表的插件。它允许你在同一个列表中展示不同类型的视图，类似于 ListView，但支持多种视图类型。以下是如何使用 multiviewlist 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 multiviewlist 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  multiviewlist: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 multiviewlist 包：

import 'package:multiviewlist/multiviewlist.dart';

3. 创建多视图列表

使用 MultiViewList 组件来创建一个多视图列表。你需要提供一个 itemBuilder 来根据不同的索引返回不同的视图。

class MyMultiViewList extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiViewList(
      itemCount: 10, // 列表项的总数
      itemBuilder: (BuildContext context, int index) {
        // 根据索引返回不同的视图
        if (index % 2 == 0) {
          return ListTile(
            title: Text('Item $index'),
            subtitle: Text('This is a list tile'),
          );
        } else {
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text('This is a card for item $index'),
            ),
          );
        }
      },
    );
  }
}

4. 使用多视图列表

在你的应用中使用 MyMultiViewList 组件：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MultiViewList Example'),
        ),
        body: MyMultiViewList(),
      ),
    );
  }
}

5. 运行应用

运行你的 Flutter 应用，你将看到一个包含不同类型视图的列表。

6. 自定义和扩展

你可以根据需要进一步自定义 MultiViewList，例如添加分隔线、动态加载更多数据等。MultiViewList 的 API 与 ListView 类似，因此你可以使用类似的属性和方法来控制列表的行为。

7. 处理复杂场景

如果你需要处理更复杂的场景，例如根据数据模型动态生成不同的视图，你可以在 itemBuilder 中根据数据模型返回不同的视图。

class MyMultiViewList extends StatelessWidget {
  final List<MyDataModel> dataList;

  MyMultiViewList({required this.dataList});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiViewList(
      itemCount: dataList.length,
      itemBuilder: (BuildContext context, int index) {
        final item = dataList[index];
        if (item.type == 'text') {
          return ListTile(
            title: Text(item.title),
            subtitle: Text(item.subtitle),
          );
        } else if (item.type == 'image') {
          return Image.network(item.imageUrl);
        } else {
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text('Unknown item type'),
            ),
          );
        }
      },
    );
  }
}