如何在现有Flutter列表代码中添加全选、取消全选按钮并控制底部选中按钮显示

仅需修改原有代码中全选按钮的触发逻辑，同时给按钮增加动态文字适配即可实现需求，原有单个选中、底部Selected按钮的逻辑无需改动，功能即可正常运行。

参考UI #

核心修改点 #

1. 替换原全选按钮代码 #

找到原有代码中TextButton的部分，替换为以下内容：

Container(
  child: TextButton(
    onPressed: () {
      setState(() {
        // 判断当前是否已经全选
        bool isAllSelected = selectedcars.length == toylist.length;
        if (isAllSelected) {
          // 执行取消全选逻辑
          for (var item in toylist) {
            item.isSelected = false;
          }
          selectedcars.clear();
        } else {
          // 执行全选逻辑
          for (var item in toylist) {
            item.isSelected = true;
          }
          selectedcars = List.from(toylist);
        }
      });
    },
    // 动态切换按钮文字
    child: Text(selectedcars.length == toylist.length ? '取消全选' : '全选'),
  ),
),

2. 可选空安全适配 #

如果运行时出现空安全相关报错，可以给模型类的属性增加late修饰：

class ToyCarListModel{
  late String toyimages, toyname, toymodel;
  late bool isSelected;

  ToyCarListModel(this.toyimages, this.toyname, this.toymodel, this.isSelected);
}

完整修改后主界面代码 #

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:listview_image_text/carlistmodel.dart';

class ListToysUsingModel extends StatefulWidget {

  @override
  _ListToysUsingModelState createState() => _ListToysUsingModelState();
}

class _ListToysUsingModelState extends State<ListToysUsingModel> {

  List<ToyCarListModel> toylist =[
    ToyCarListModel("assets/pikachu.png", "flutter1", "model 1", false),
    ToyCarListModel("assets/pikachu.png", "flutter2", "model 2", false),
    ToyCarListModel("assets/pikachu.png", "flutter3", "model 3", false),
    ToyCarListModel("assets/pikachu.png", "flutter4", "model 4", false),
    ToyCarListModel("assets/pikachu.png", "flutter5", "model 5", false),
    ToyCarListModel("assets/pikachu.png", "flutter6", "model 6", false),
  ];

  List<ToyCarListModel> selectedcars = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('带图片的列表视图（基于模型实现）'),
      ),
      body: Container(
        child: Column(
          children: [
            Container(
              child: TextButton(
                onPressed: () {
                  setState(() {
                    bool isAllSelected = selectedcars.length == toylist.length;
                    if (isAllSelected) {
                      for (var item in toylist) {
                        item.isSelected = false;
                      }
                      selectedcars.clear();
                    } else {
                      for (var item in toylist) {
                        item.isSelected = true;
                      }
                      selectedcars = List.from(toylist);
                    }
                  });
                },
                child: Text(selectedcars.length == toylist.length ? '取消全选' : '全选'),
              ),
            ),
            Expanded(child: ListView.builder(
              itemCount: toylist.length,
                itemBuilder: (BuildContext context, int index){
                return toysItem(
                  toylist[index].toyimages,
                  toylist[index].toyname,
                  toylist[index].toymodel,
                  toylist[index].isSelected,
                  index,
                );
                }),
            ),
            selectedcars.length > 0 ? Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 25,
                vertical: 10,
              ),
              child: SizedBox(
                width: double.infinity,
                child: RaisedButton(
                  color: Colors.black,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('已选中',style: TextStyle(color: Colors.white),),
                      Icon(Icons.done,color: Colors.white,),
                    ],
                  ),
                  onPressed: () {
                    print("选中列表长度: ${selectedcars.length}");
                  },
                ),
              ),
            ): Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 25,
                vertical: 10,
              ),
              child: SizedBox(
                width: double.infinity,
                child: RaisedButton(
                  color: Color(0xFFBFBFC0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('已选中',style: TextStyle(color: Colors.white30),),
                      Icon(Icons.done,color: Colors.white30,),
                    ],
                  ),
                  onPressed: () {
                    print("选中列表长度: ${selectedcars.length}");
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget toysItem( String toyimages, toyname, toymodel, bool isSelected, int index){
    return Container(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Image.asset(toyimages),
              GestureDetector(
                child: Container(
                  child: isSelected
                      ? Icon(
                    Icons.check_circle,
                    color: Colors.black,
                  )
                      : Icon(
                    Icons.radio_button_unchecked_outlined,
                    color: Colors.grey,
                  ),
                ),
                onTap: (){
                  setState(() {
                    toylist[index].isSelected = !toylist[index].isSelected;
                    if (toylist[index].isSelected == true) {
                      selectedcars.add(ToyCarListModel(toyimages, toyname,toymodel, true));
                    } else if (toylist[index].isSelected == false) {
                      selectedcars
                          .removeWhere((element) => element.toyname == toylist[index].toyname);
                    }
                  });
                },
              ),
            ],
          ),
          Text(toyname),
          Text(toymodel),
          Divider(),
        ],
      ),
    );
  }

}

内容的提问来源于stack exchange，提问作者Shanmukha