Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to use the full selection and deletion of the Checkbox check box in flutter". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. AppBar, Stack, Offstage, Listview and other components are mainly used here.

The logic goes like this: click Edit in the upper right corner and bring up the check box on the left side of each item and the operation style at the bottom.

Then you can select all, cancel, radio, delete, click edit again and hide the check box style

The main functions are divided into the following four modules, the top navigation bar is the appbar component, overlay stack component, show hidden offstage component, list listview component

two。 Let's initialize the data and set the display effect of the top information bar.

Set an edit button on the right side of the appbar, add click events, and reset the selected ID and check box styles

For related functions of appbar, please refer to the navigation bar at the top of beginners [one of the flutter20 examples].

AppBar (title: Text ('my favorites'), actions: [IconButton (icon: Icon (Icons.edit), tooltip: edit, onPressed: () {_ list.forEach ((f) {f ['select'] = false) / / list is set to unchecked}); this.deleteIds = []; / / resets the selected ID array setState (() {this._isOff =! this._isOff;// hide display master switch this._list = _ list;}) },),],)

3.listview sets a list that can be scrolled

When we click on the edit in the upper right corner, the bottom select and delete operations are brought up, but the bottom style does not scroll with the list.

So we need to use the overlay component stack to include the two parts of the function together, while the style at the bottom is fixed at the bottom.

The content style of the list can be diffused and developed. At present, I use color bars instead.

If (_ list.isEmpty) {return Center (child: Text ('no favorites')) } else {return Container (padding: EdgeInsets.fromLTRB (0.0,10.0,0.0,10.0), child: Stack (alignment: Alignment.bottomCenter, children: [getItemContent (), / / here is the content of the list getItemBottom (), / / here is the content of the delete all selected operation at the bottom],) }

4. Styles selected and deleted at the bottom

There is a hidden logic at the bottom, so it is wrapped in an offstage component with initialization properties as follows:

Offstage: _ isOff

The default is hidden. After clicking the upper right corner to edit icon, _ isOff is set to true.

At the same time, the full box adds click events:

If true, traverse the _ list array, set select to true, and add the data ID to the deleteIds array in turn

If false, traverse the _ list array and set select to false. The deleteIds array will be emptied.

/ / bottom operation 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: [Row (children: [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 ('Select all'),],), InkWell (child: Text ('delete'), onTap: () {},),] )),) }

5. In the middle, put our check box on the left and list data on the right.

Note that the check box padding in the content should be consistent with the padding setting of the bottom action bar and look aligned

When you click the check box in the content list:

If the status is true, determine whether this ID already exists in the deleteIds array. If not, add it.

If the status is false, delete the data ID in the deleteIds array

/ / bottom operation style 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: [Row (children: [Checkbox (value: _ checkValue, onChanged: (value) {selectAll (value)) },), Text ('Select all'),],), InkWell (child: Text ('delete'), onTap: () {},),] )),) }

6. The main structure of the whole

The source code import 'package:flutter/material.dart';class Mytest extends StatefulWidget {@ override _ MytestState createState () = > _ MytestState ();} class _ MytestState extends State {List _ list = []; / / list List deleteIds = []; / / the ID array bool _ isOff = true; / / related components to be deleted show hidden control, and true stands for hidden bool _ checkValue = false / / the total check box controls the switch / / initializes some data first, of course, the data actually calls the @ override void initState () {super.initState (); for (var index = 0; index) of the interface.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.