flutter - 如何在flutter中将全选和取消全选按钮添加到以下代码中？

Question

我是初学者，仍在学习颤振，无法添加全选/取消全选按钮有人能帮帮我吗？我有一个项目列表，我想将全选/取消全选按钮添加到以下代码中，当单击“选定按钮”下方的全选按钮时应该可见。

这是我的模型课

 class ToyCarListModel{

  String toyimages, toyname, toymodel;
  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('List view with images using model'),
      ),
      body: Container(
        child: Column(
          children: [
            Container(
              child: TextButton(
                onPressed: () {},
                child: Text('All Select'),
              ),
            ),
            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('Selected',style: TextStyle(color: Colors.white),),
                      Icon(Icons.done,color: Colors.white,),
                    ],
                  ),
                  onPressed: () {
                    print("List Lenght: ${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('Selected',style: TextStyle(color: Colors.white30),),
                      Icon(Icons.done,color: Colors.white30,),
                    ],
                  ),
                  onPressed: () {
                    print("List Lenght: ${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(),
        ],
      ),
    );
  }

}

标签： flutterdartflutter-layout

Answer 1

这里的代码选择

child: TextButton(
                onPressed: () {
                  setState (() {
                     for (var i = 0; i<toylist.length ; i++)
                         toylist[i]. isSelected = true;
                     selectedcars.addAll(toylist);
                     });
                 },
                child: Text('All Select'),
              ),

这里是取消全选的代码

child: TextButton(
                onPressed: () {
                  setState (() {
                     for (var i = 0; i<toylist.length  ; i++)
                         toylist[i]. isSelected = false;
                     });
                 },
                child: Text('Deselect All'),
              ),