关于flutter:flutter-多选项目插件

61次阅读

共计 6549 个字符，预计需要花费 17 分钟才能阅读完成。

原文

https://medium.com/flutterdev…

参考

  • https://pub.dev/packages/mult…

注释

Flutter 小部件是应用古代框架构建的。这就像是一种反馈。在这里，咱们从小部件开始创立任何应用程序。屏幕中的每个组件都是一个小部件。这个小部件形容了依据他目前的配置和状态，他的前景应该是什么样的。小部件展现相似于它的想法和以后的设置和状态。

Flutter 自动化测试使您可能满足您的应用程序的高响应性，因为它有助于在您的应用程序中发现 bug 和各种问题。Flutter 是一个工具，开发挪动，桌面，网络应用程序与代码 \& 是一个收费和开放源码的工具。Flutter 有能力容易测试任何应用程序。这种能力就是他们在指标平台上依照咱们心愿的形式工作。Dart 测试实用于单元测试和非 ui 测试; 它在开发机器上运行，不依赖于 Flutter 应用程序的 GUI。

在这个博客，咱们将摸索 Flutter 多抉择我的项目。咱们还将实现一个演示的多我的项目在 Flutter 抉择。如何应用它们在您的 Flutter 应用程序。那么让咱们开始吧。

  • 多选择项 | Flutter 包装

https://pub.dev/packages/mult…

多选我的项目:

多选项这是一个解决多选项的 Flutter 库应用这个库咱们创立一个列表，当咱们能够删除这个列表中的我的项目时应用这个小部件咱们将它包装在列表视图构建器我的项目中，这样咱们就能够很容易地创立一个多选项列表。

实施方案:

你须要别离在你的代码中实现它:

第一步: 增加依赖项。

将依赖项增加到 pubspec ー yaml 文件。

首先，在 pubspec. yaml 中增加 flutter 本地化和 intl 库。

dependencies:
  multi_select_item: ^1.0.3

步骤 2: 导入包:

import 'package:multi_select_item/multi_select_item.dart';

第三步: 启用 AndriodX

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

代码步骤:

要实现这一点，您须要先编写“首先定义控制器”。

MultiSelectController controller = new MultiSelectController();

在此之后，咱们创立了一个列表，该列表在 initState () 内定义了它的值，并在此之后按列表长度确定控制器的设置长度。参考上面的代码包含在内。

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

  multiSelectList.add({"images": 'assets/images/resort_1.jpg', "desc":"Welcome to New York City!"});
  multiSelectList.add({"images":'assets/images/resort_2.jpg' ,"desc":"Welcome to Los Angeles!"});
  multiSelectList.add({"images":'assets/images/resort_3.jpg' ,"desc":"Welcome to Chicago!"});
  multiSelectList.add({"images":'assets/images/resort_4.jpg', "desc":"Welcome to Houston!"});

  controller.disableEditingWhenNoneSelected = true;
  controller.set(multiSelectList.length);
}

在这之后，咱们应用一个 ListViewBuilder 小部件，其中咱们应用了 MultiSelectItem () 小部件，其中咱们应用了卡片及其子属性，咱们应用了行小部件，其中咱们初始化下面定义的列表值，该列表值具备图像和文本，并在其 onSelected () 上列出控制器是在 setState 外部定义的，用于抉择值。

ListView.builder(
  itemCount: multiSelectList.length,
  itemBuilder: (context, index) {
    return MultiSelectItem(
      isSelecting: controller.isSelecting,
      onSelected: () {setState(() {controller.toggle(index);
        });
      },
      child:Container(
        height:75,
        margin: EdgeInsets.only(left:15,right:15,top:15),
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(12),
          color: Colors._transparent_,
        ),
        child:Card(color:controller.isSelected(index)
              ? Colors._grey_.shade200:Colors._white_,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0)),

          ),
          child:Padding(padding:EdgeInsets.symmetric(vertical:10, horizontal: 12),
            child: Row(
              children: [_//contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),_ ClipRRect(borderRadius: BorderRadius.circular(12),
                  child:Image.asset(multiSelectList[index]['images'],fit:BoxFit.cover,width:60,height:60,),
                ),
                SizedBox(width:20,),
                Text(multiSelectList[index]['desc'], style: TextStyle(fontSize:14)),
              ],
            ),
          ),
        ),
      ),
    );
  },
),

之后，咱们将删除选定的我的项目，以删除这咱们采取 forEach 和排序的价值，这将排序咱们的抉择我的项目首先从最大的 id 最小的 id，而后它将逐个删除它。

void delete() {
  var list = controller.selectedIndexes;
  list.sort((b, a) =>
      a.compareTo(b));
  list.forEach((element) {multiSelectList.removeAt(element);
  });

  setState(() {controller.set(multiSelectList.length);
  });
}

全副代码 :

import 'package:multi_select_item/multi_select_item.dart';
import 'package:flutter/material.dart';

class MultiSelectListDemo extends StatefulWidget {
  @override
  _MultiSelectListDemoState createState() => new _MultiSelectListDemoState();
}

class _MultiSelectListDemoState extends State<MultiSelectListDemo> {List multiSelectList = [];


  MultiSelectController controller = new MultiSelectController();

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

    multiSelectList.add({"images": 'assets/images/resort_1.jpg', "desc":"Welcome to New York City!"});
    multiSelectList.add({"images":'assets/images/resort_2.jpg' ,"desc":"Welcome to Los Angeles!"});
    multiSelectList.add({"images":'assets/images/resort_3.jpg' ,"desc":"Welcome to Chicago!"});
    multiSelectList.add({"images":'assets/images/resort_4.jpg', "desc":"Welcome to Houston!"});
    multiSelectList.add({"images":'assets/images/sanfrancisco.jpg', "desc":"Welcome to San francisco!"});

    controller.disableEditingWhenNoneSelected = true;
    controller.set(multiSelectList.length);
  }

  void add() {multiSelectList.add({"images": multiSelectList.length});
    multiSelectList.add({"desc": multiSelectList.length});

    setState(() {controller.set(multiSelectList.length);
    });
  }

  void delete() {
    var list = controller.selectedIndexes;
    list.sort((b, a) =>
        a.compareTo(b));
    list.forEach((element) {multiSelectList.removeAt(element);
    });

    setState(() {controller.set(multiSelectList.length);
    });
  }

  void selectAll() {setState(() {controller.toggleAll();
    });
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(onWillPop: () async {
        var before = !controller.isSelecting;
        setState(() {controller.deselectAll();
        });
        return before;
      },
      child: new Scaffold(
        appBar: new AppBar(title: new Text('Selected ${controller.selectedIndexes.length}' ),
          actions: (controller.isSelecting)
              ? <Widget>[
            IconButton(icon: Icon(Icons._select_all_),
              onPressed: selectAll,
            ),
            IconButton(icon: Icon(Icons._delete_),
              onPressed: delete,
            )
          ]
              : <Widget>[],),
        body:Container(

          child: ListView.builder(
            itemCount: multiSelectList.length,
            itemBuilder: (context, index) {
              return InkWell(onTap: () {},
                child: MultiSelectItem(
                  isSelecting: controller.isSelecting,
                  onSelected: () {setState(() {controller.toggle(index);
                    });
                  },
                  child:Container(
                      height:75,
                    margin: EdgeInsets.only(left:15,right:15,top:15),
                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(12),
                      color: Colors._transparent_,
                    ),
                    child:Card(color:controller.isSelected(index)
                          ? Colors._grey_.shade200:Colors._white_,
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0)),

                      ),
                      child:Padding(padding:EdgeInsets.symmetric(vertical:10, horizontal: 12),
                        child: Row(
                          children: [_//contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),_ ClipRRect(borderRadius: BorderRadius.circular(12),
                              child:Image.asset(multiSelectList[index]['images'],fit:BoxFit.cover,width:60,height:60,),
                            ),
                            SizedBox(width:20,),
                            Text(multiSelectList[index]['desc'], style: TextStyle(fontSize:14)),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

结语:

在本文中，我解释了 Explore GetIt In Flutter，你能够依据本人的批改和试验，这个小介绍来自 Explore GetIt In Flutter 从咱们这边的演示。

我心愿这个博客将为您提供充沛的信息，在尝试在您的 Flutter 我的项目摸索 GetIt 在 Flutter。咱们向你展现了什么是摸索和 Flutter 是在您的 Flutter 利用的工作，所以请尝试它。

如果我做错了什么，请在评论中通知我，我很乐意改良。

© 猫哥

  • https://ducafecat.tech/
  • https://github.com/ducafecat
  • 微信群 ducafecat
  • b 站 https://space.bilibili.com/40…

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

正文完
flutter
发表至： flutter
2021-09-16
 0
关于flutter:flutter系列之移动端的手势基础GestureDetector
关于flutter:新渲染引擎自定义设计和高质量用户体验的样例应用-Wonderous-现已开源
关于flutter:Flutter深入浅出组件篇PaddingAnimatedPadding
关于flutter:在-Flutter-多人视频通话中实现虚拟背景美颜与空间音效