ListView Flutter 中的 CheckboxListTile

Question

如何在 ListView 小部件中放置多個 CheckboxListTile？ 我已經嘗試過這樣做，但它遇到了一些異常。

Answer 1

首先創建類 CheckBoxListTileModel （你可以在這個類中放任何東西，你可以根據需要定義一個列表）例如：

class CheckBoxListTileModel {
  String title;
  bool isCheck;

  CheckBoxListTileModel({
    required this.title,
    required this.isCheck,
  });

  static List<CheckBoxListTileModel> getList() {
    return <CheckBoxListTileModel>[
      CheckBoxListTileModel(
        title: "Android",
        isCheck: true,
      ),
      CheckBoxListTileModel(
        title: "Flutter",
        isCheck: false,
      ),
      CheckBoxListTileModel(
        title: "IOS",
        isCheck: false,
      ),
      CheckBoxListTileModel(
        title: "PHP",
        isCheck: false,
      ),
      CheckBoxListTileModel(
        title: "Node",
        isCheck: false,
      ),
    ];
  }
}

創建一個列表是你的頁面類

import 'package:flutter/material.dart';

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

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  List<CheckBoxListTileModel> checkBoxListTileModel =
      CheckBoxListTileModel.getList();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 10,
          vertical: 10,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Choose',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            ListView.builder(
                shrinkWrap: true,
                itemCount: checkBoxListTileModel.length,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Column(
                      children: <Widget>[
                        CheckboxListTile(
                          title: Text(
                            checkBoxListTileModel[index].title,
                            style: const TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          value: checkBoxListTileModel[index].isCheck,
                          onChanged: (bool? val) {
                            setState(() {
                              checkBoxListTileModel[index].isCheck = val!;
                            });
                          },
                        ),
                      ],
                    ),
                  );
                }),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              onPressed: () {
                int i = 0;
                checkBoxListTileModel.forEach((element) {
                  i++;
                  debugPrint('choice$i: ${element.isCheck}');
                  debugPrint('choice$i: ${element.title}\n');
                });
              },
              child: const Text('Get Result'),
            ),
          ],
        ),
      ),
    );
  }
}

按鈕“獲取結果”在控制台中查看結果（不一定放）

查看結果在此處輸入圖像描述

請參閱控制台在此處輸入圖像描述

Answer 2

multi_select_flutter這個包就是這樣做的