专栏首页技术人生谈谈flutter中Checkbox复选框的全选与删除【flutter20个实例之三】

谈谈flutter中Checkbox复选框的全选与删除【flutter20个实例之三】

一、老套路,先看样式

左侧三张图片是我的实际开发中业务界面,用作展示而已,具体源码效果是右边侧的三张图片。

源码可直接复制运行查看效果,不涉及组件引入和数据请求逻辑

二、讲解(后附源码)

1.这里主要用到AppBar、Stack、Offstage、Listview等组件

逻辑是这样的:点击右上角编辑,调出每条内容左侧的复选框,和底部的操作样式。

然后可以全选,取消,单选,删除,再次点击编辑后隐藏复选框样式

主要功能分为以下四个模块,顶部导航栏也就是appbar组件、叠加stack组件、显示隐藏offstage组件、列表listview组件

2.我们先初始化一下数据,设置顶部信息栏的显示效果

appbar的右侧设置一个编辑按钮,增加点击事件,重置选中的ID和复选框样式

appbar的相关功能可以参考初识顶部导航栏【flutter20个实例之一】

AppBar(
          title: Text('我的收藏'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.edit),
              tooltip: "编辑",
              onPressed: () {
                _list.forEach((f) {
                  f['select'] = false;//列表设置为未选中
                });
                this.deleteIds = [];//重置选中的ID数组
                setState(() {
                  this._isOff = !this._isOff;//隐藏显示总开关
                  this._list = _list;
                });
              },
            ),
          ],
        )

3.listview设置一个可以滚动的列表

当我们点击右上角的编辑时,调出底部的全选和删除操作,但是这个底部样式不随着列表一起滚动

所以我们需要用叠加组件stack将两部分功能包含在一起,同时底部的样式要固定在底部

列表的内容样式可以扩散开发,目前我用颜色条代替

    if (_list.isEmpty) {
      return Center(child: Text('暂无收藏'));
    } else {
      return Container(
        padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: <Widget>[
            getItemContent(),//这里是列表的内容
            getItemBottom(),//这里是底部删除全选操作的内容
          ],
        ),
      );
    }

4.底部全选和删除的样式

底部有显示隐藏的逻辑,所以用offstage组件包裹,初始化属性为:

offstage: _isOff

默认是隐藏的,点击右上角编辑icon后,_isOff设置为true

同时全选框增加点击事件:

如果为true,遍历_list数组,select设置为true,将数据ID依次加入deleteIds数组

如果为false,遍历_list数组,select设置为false,将清空deleteIds数组

  //底部操作
  Widget getItemBottom() {
    return Offstage(
      offstage: _isOff,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(16, 0, 16, 0),
        child: Container(
            height: 40,
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Checkbox(
                      value: _checkValue,
                      onChanged: (value) {
                        this.deleteIds = [];
                        _list.forEach((f) {
                          f['select'] = value;
                          if (value == true) {
                            this.deleteIds.add(f['id']);
                          }
                        });
                        setState(() {
                          _checkValue = value;
                          _list = _list;
                        });
                      },
                    ),
                    Text('全选'),
                  ],
                ),
                InkWell(
                  child: Text('删除'),
                  onTap: () {},
                ),
              ],
            )),
      ),
    );
  }

5.中间的内容,左侧放我们的复选框,右侧是列表数据

注意的是:内容里面的复选框padding,要和底部操作条的padding设置一致,看起来是对齐的

内容列表中的复选框点击的时候:

如果状态为true,判断deleteIds数组里是否已经存在本ID,如果没有则进行新增

如果状态为false,删除deleteIds数组里本数据ID

  //底部操作样式
  Widget getItemBottom() {
    return Offstage(
      offstage: _isOff,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
        child: Container(
            height: 40,
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Checkbox(
                      value: _checkValue,
                      onChanged: (value) {
                        selectAll(value);
                      },
                    ),
                    Text('全选'),
                  ],
                ),
                InkWell(
                  child: Text('删除'),
                  onTap: () {},
                ),
              ],
            )),
      ),
    );
  }

6.整体的主要结构

三、源码

import 'package:flutter/material.dart';

class Mytest extends StatefulWidget {
  @override
  _MytestState createState() => _MytestState();
}

class _MytestState extends State<Mytest> {
  List<Map> _list = []; //列表
  List<String> deleteIds = []; //要删除的ID数组
  bool _isOff = true; //相关组件显示隐藏控制,true代表隐藏
  bool _checkValue = false; //总的复选框控制开关

  //先初始化一些数据,当然这些数据实际中会调用接口的
  @override
  void initState() {
    super.initState();

    for (var index = 0; index <= 5; index++) {
      Map _temp = {};
      _temp['id'] = index;
      _temp['select'] = false;
      _list.add(_temp);
    }
    setState(() {
      _list = _list;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('我的收藏'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.edit),
              tooltip: "编辑",
              onPressed: () {
                _list.forEach((f) {
                  f['select'] = false; //列表设置为未选中
                });
                this.deleteIds = []; //重置选中的ID数组
                setState(() {
                  this._isOff = !this._isOff; //显示隐藏总开关
                  this._checkValue = false; //所以复选框设置为未选中
                  this._list = _list;
                });
              },
            ),
          ],
        ), //这个是顶部tab样式,如果不需要可以去掉
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: getItem(),
        ));
  }

  //主内容
  Widget getItem() {
    if (_list.isEmpty) {
      return Center(child: Text('暂无收藏'));
    } else {
      return Container(
        padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: <Widget>[
            getItemContent(), //这里是列表的内容
            getItemBottom(), //这里是底部删除全选操作的内容
          ],
        ),
      );
    }
  }

  //底部操作样式
  Widget getItemBottom() {
    return Offstage(
      offstage: _isOff,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
        child: Container(
            height: 40,
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Checkbox(
                      value: _checkValue,
                      onChanged: (value) {
                        selectAll(value);
                      },
                    ),
                    Text('全选'),
                  ],
                ),
                InkWell(
                  child: Text('删除'),
                  onTap: () {},
                ),
              ],
            )),
      ),
    );
  }

  //底部复选框的操作逻辑
  selectAll(value) {
    this.deleteIds = []; //要删除的数组ID重置
    _list.forEach((f) {
      f['select'] = value;
      if (value == true) {
        //如果是选中,则将数据ID放入数组
        this.deleteIds.add(f['id'].toString());
      }
    });
    setState(() {
      _checkValue = value;
      _list = _list;
    });
  }

  //列表
  Widget getItemContent() {
    return ListView.builder(
      itemBuilder: (context, index) {
        return _createGridViewItem(_list[index]);
      },
      itemCount: (_list == null) ? 0 : _list.length,
    );
  }

  //单个crad,这里可以自己定义一些样式
  Widget _createGridViewItem(item) {
    Color color = Colors.primaries[item['id']];
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 5, 8, 5),
      child: Container(
        height: 80,
        color: color,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Offstage(
              offstage: _isOff,
              child: Checkbox(
                value: item['select'],
                onChanged: (value) {
                  if (value == false) {
                    this.deleteIds.remove(item['id'].toString());
                  } else {
                    this.deleteIds.add(item['id'].toString());
                  }
                  setState(() {
                    item['select'] = value;
                  });
                },
              ),
            ),
            Text('这里放内容'),
          ],
        ),
      ),
    );
  }
}

持续更新......

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flutter之Dart数组的常规操作

    sinnoo
  • 用flutter很简单的实现一个时光轴样式【flutter20个实例之五】

    左边图是我业务中的样式,右边图是下方源码展示样式(复制可直接运行,无额外组件引入)

    sinnoo
  • 用flutter给图片加个好看的遮罩层【flutter20个实例之六】

    左起图一是我业务中的样式,左起图二、三是下方源码展示样式(复制可直接运行,无额外组件引入)

    sinnoo
  • GitHub 2018年 Octoverse 状态报告分析

    VS Code,React和Tensorflow是贡献者数量的前三名,排行榜中的新出现一些容器化管理应用程序。排行榜中多数来自 微软‘、谷歌、facebook。...

    gemron的空间
  • 开发运维配置繁杂,是时候给应用架构做减法了

    “Less is more”是路德维希·密斯·凡德罗在建筑领域提出的观点,近些年来,这一观点不断被用于生活中的其他领域。在软件开发世界中,也有对“Less is...

    深度学习与Python
  • 0692-5.16.1-外部客户端跨网段访问Hadoop集群方式(续)

    在生产环境的CDH集群中,为了分开集群对网络的使用会为集群配备两套网络(管理网段和数据网段),数据网段主要用于集群内部数据交换,一般使用万兆网络以确保集群内数据...

    Fayson
  • RedisTemplate:我不背锅,是你用错了

    我也有点懵,第一反应就是 RedisTemplate 和 StringRedisTemplate 会不会用的两个不同的 Connection,导致相同的 Key...

    猿天地
  • Django+xadmin打造在线教育平台(五)

    代码 github下载 八、课程详情页功能的实现 8.1.课程列表  (1)配置urls MxOnline/urls中 path("course/", inc...

    zhang_derek
  • C#网络编程(基本概念和操作) - Part.1

    C#网络编程系列文章计划简单地讲述网络编程方面的基础知识,由于本人在这方面功力有限,所以只能提供一些初步的入门知识,希望能对刚开始学习的朋友提供一些帮助。如果想...

    张子阳
  • Go socket编程

    槽痞

扫码关注云+社区

领取腾讯云代金券