flutter如何自动选中选中的上面的所有item答案

【问题标题】：How to automatically select all items above the selected one flutterflutter如何自动选中选中的上面的所有item
【发布时间】：2023-01-02 13:21:46
【问题描述】：

我有一个带有可选项目的自定义列表视图。我正在尝试选择自动显示在我选择的项目之上的所有项目。例如：假设列表视图中有 10 个项目，我选择了第 5 个，那么它应该选择第 5 个以上的所有可用项目。即（1,2,3,4）。

return CheckboxListTile(
  activeColor: const Color.fromARGB(
      255, 243, 243, 243),
  checkColor: UIGuide.light_Purple,
  selectedTileColor:
  UIGuide.light_Purple,
  value: value.selecteCategorys
      .contains(value.feeList[index]
      .installmentName ??
      '--'),
  onChanged: (bool? selected) async {
    
    value.onFeeSelected(
        selected!,
        value.feeList[index]
            .installmentName,
        index,
        value.feeList[index].netDue);
  },
  title: Text(
    value.feeList[index].netDue ==
        null
        ? '--'
        : value.feeList[index].netDue
        .toString(),
    textAlign: TextAlign.end,
  ),
  secondary: Text(
    value.feeList[index]
        .installmentName ??
        '--',
  ),
);

【问题讨论】：

标签： flutter listview checkbox

【解决方案1】：

请注意，这个例子并不完美，但它是一个可以让你思考的工作例子，因为我不知道大局

这是我的方法：

使用.indexOf()获取当前选定值的小部件和索引@

遍历所有小部件，直到先前获得的索引

for (var i = 0; i < _data.indexOf(item); i++) {
                    _data[i].isChecked = value!;
                  }

代码示例

创建一个名为 CheckBoxModel 的类：

class CheckBoxModel {
  bool isChecked = false;
  String text = "";
  CheckBoxModel({required this.isChecked, required this.text});
}

然后，生成了 30 个小部件：

final _data = List.generate(
    30, (index) => CheckBoxModel(isChecked: false, text: "Item $index"));

并相应地使用它：

Column(
        children: [
          for (var item in _data)
            CheckboxListTile(
              value: item.isChecked,
              onChanged: (value) {
                setState(() {
                  for (var i = 0; i < _data.indexOf(item); i++) {
                    _data[i].isChecked = value!;
                  }
                });
              },
              title: Text(item.text),
            ),
        ],
      )

这是一个完整的可运行片段：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class CheckBoxModel {
  bool isChecked = false;
  String text = "";
  CheckBoxModel({required this.isChecked, required this.text});
}

final _data = List.generate(
    30, (index) => CheckBoxModel(isChecked: false, text: "Item $index"));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Testing(),
        ),
      ),
    );
  }
}

class Testing extends StatefulWidget {
  const Testing({Key? key}) : super(key: key);

  @override
  State<Testing> createState() => _TestingState();
}

class _TestingState extends State<Testing> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          for (var item in _data)
            CheckboxListTile(
              value: item.isChecked,
              onChanged: (value) {
                setState(() {
                  for (var i = 0; i < _data.indexOf(item); i++) {
                    _data[i].isChecked = value!;
                  }
                });
              },
              title: Text(item.text),
            ),
        ],
      ),
    );
  }
}

【讨论】：