怎么使用flutter中Checkbox復(fù)選框的全選與刪除

本篇內(nèi)容介紹了“怎么使用flutter中Checkbox復(fù)選框的全選與刪除”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1.這里主要用到AppBar、Stack、Offstage、Listview等組件

邏輯是這樣的：點擊右上角編輯，調(diào)出每條內(nèi)容左側(cè)的復(fù)選框，和底部的操作樣式。

然后可以全選，取消，單選，刪除，再次點擊編輯后隱藏復(fù)選框樣式

主要功能分為以下四個模塊，頂部導(dǎo)航欄也就是appbar組件、疊加stack組件、顯示隱藏offstage組件、列表listview組件

2.我們先初始化一下數(shù)據(jù)，設(shè)置頂部信息欄的顯示效果

appbar的右側(cè)設(shè)置一個編輯按鈕，增加點擊事件，重置選中的ID和復(fù)選框樣式

appbar的相關(guān)功能可以參考初識頂部導(dǎo)航欄【flutter20個實例之一】

AppBar(
          title: Text('我的收藏'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.edit),
              tooltip: "編輯",
              onPressed: () {
                _list.forEach((f) {
                  f['select'] = false;//列表設(shè)置為未選中
                });
                this.deleteIds = [];//重置選中的ID數(shù)組
                setState(() {
                  this._isOff = !this._isOff;//隱藏顯示總開關(guān)
                  this._list = _list;
                });
              },
            ),
          ],
        )

3.listview設(shè)置一個可以滾動的列表

當(dāng)我們點擊右上角的編輯時，調(diào)出底部的全選和刪除操作，但是這個底部樣式不隨著列表一起滾動

所以我們需要用疊加組件stack將兩部分功能包含在一起，同時底部的樣式要固定在底部

列表的內(nèi)容樣式可以擴(kuò)散開發(fā)，目前我用顏色條代替

    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(),//這里是列表的內(nèi)容
            getItemBottom(),//這里是底部刪除全選操作的內(nèi)容
          ],
        ),
      );
    }

4.底部全選和刪除的樣式

底部有顯示隱藏的邏輯，所以用offstage組件包裹，初始化屬性為：

offstage: _isOff

默認(rèn)是隱藏的，點擊右上角編輯icon后，_isOff設(shè)置為true

同時全選框增加點擊事件：

如果為true，遍歷_list數(shù)組，select設(shè)置為true，將數(shù)據(jù)ID依次加入deleteIds數(shù)組

如果為false，遍歷_list數(shù)組，select設(shè)置為false，將清空deleteIds數(shù)組

  //底部操作
  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.中間的內(nèi)容，左側(cè)放我們的復(fù)選框，右側(cè)是列表數(shù)據(jù)

注意的是：內(nèi)容里面的復(fù)選框padding，要和底部操作條的padding設(shè)置一致，看起來是對齊的

內(nèi)容列表中的復(fù)選框點擊的時候：

如果狀態(tài)為true，判斷deleteIds數(shù)組里是否已經(jīng)存在本ID，如果沒有則進(jìn)行新增

如果狀態(tài)為false，刪除deleteIds數(shù)組里本數(shù)據(jù)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.整體的主要結(jié)構(gòu)

源碼

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數(shù)組
  bool _isOff = true; //相關(guān)組件顯示隱藏控制，true代表隱藏
  bool _checkValue = false; //總的復(fù)選框控制開關(guān)

  //先初始化一些數(shù)據(jù)，當(dāng)然這些數(shù)據(jù)實際中會調(diào)用接口的
  @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; //列表設(shè)置為未選中
                });
                this.deleteIds = []; //重置選中的ID數(shù)組
                setState(() {
                  this._isOff = !this._isOff; //顯示隱藏總開關(guān)
                  this._checkValue = false; //所以復(fù)選框設(shè)置為未選中
                  this._list = _list;
                });
              },
            ),
          ],
        ), //這個是頂部tab樣式，如果不需要可以去掉
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: getItem(),
        ));
  }

  //主內(nèi)容
  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(), //這里是列表的內(nèi)容
            getItemBottom(), //這里是底部刪除全選操作的內(nèi)容
          ],
        ),
      );
    }
  }

  //底部操作樣式
  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: () {},
                ),
              ],
            )),
      ),
    );
  }

  //底部復(fù)選框的操作邏輯
  selectAll(value) {
    this.deleteIds = []; //要刪除的數(shù)組ID重置
    _list.forEach((f) {
      f['select'] = value;
      if (value == true) {
        //如果是選中，則將數(shù)據(jù)ID放入數(shù)組
        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('這里放內(nèi)容'),
          ],
        ),
      ),
    );
  }
}

“怎么使用flutter中Checkbox復(fù)選框的全選與刪除”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！