Flutter：复选框全部被选中

Question

（解决了）

我有一个问题（已经解决），如果我 select 复选框之一，所有复选框也将被选中。 这是图片

（未解决）

知道如何在 flutter 中使用复选框的人可以在这里帮助我：

Flutter：复选框将数组数据发送到 POST json 主体参数

Answer 1

好的，我已经为您添加了一个示例示例，只需复制并运行应用程序即可了解事情的处理方式。

解决方案总结：

所以你会得到 PetHealthModel 的列表，我们可以为 model 定义一个布尔变量，这样当 model 在屏幕上呈现时，默认值 false 和所有复选框都没有勾选。 然后当您单击复选框时，特定的 model isSelected 被设为 true，并且只有该项目会被勾选。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Checkbox Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<PetHealthModel> petHealths = [];
  @override
  void initState() {
    super.initState();
    getDataHealth();
  }

  void getDataHealth() async {
    // final response = await http.get(
    //   Uri.parse("http://localhost:8000/api/v1/pet_health"),
    // );
    // final metadata = PetHealthsMetadata.fromJson(jsonDecode(response.body));
    //This above is the same where you get the data

    // I have created a sample list

    final list = [
      PetHealthModel(id: 1, healthStatus: "Dont't no yet"),
      PetHealthModel(id: 2, healthStatus: "Wash"),
      PetHealthModel(id: 3, healthStatus: "cutting"),
      PetHealthModel(id: 4, healthStatus: "styling"),
      PetHealthModel(id: 4, healthStatus: "coloring"),
    ];
    // you can use your metadata.data i am using the sample list for demo purpose.
    setState(() => petHealths = list);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('heading'),
      ),
      body: Column(
        children: [
          petHealths.isNotEmpty
              ? Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: petHealths.map((e) {
                      return CheckboxListTile(
                          title: Text(e.healthStatus),
                          value: e.isSelected,
                          onChanged: (bool? value) {
                            setState(() {
                              e.isSelected = value!;
                            });
                          });
                    }).toList(),
                  ),
                )
              : Container(),
        ],
      ),
    );
  }
}

class PetHealthModel {
  PetHealthModel({
    required this.id,
    required this.healthStatus,
    this.isSelected = false,
    // This is where you add the is selected item that means the status of every item can be modified.
  });

  final int id;
  final String healthStatus;
  bool isSelected;

  // isSelected will not be in the below method because it is not coming from the api and this is just for ui change.
  factory PetHealthModel.fromJson(Map<String, dynamic> json) => PetHealthModel(
        id: json["id"],
        healthStatus: json["health_status"],
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "health_status": healthStatus,
      };
}

请让我知道这对你有没有用

Answer 2

顺便说一句，我的第二个问题已经解决了。

这是我添加的

List<int> customIds=[];

petHealths.isNotEmpty
? Padding(
   padding: const EdgeInsets.all(8.0),
   child: Column(
       children: petHealths.map((e) {
          return CheckboxListTile(
              title: Text(e.healthStatus),
              value: customIds.contains(e.id),
              onChanged: (bool? value) {
                  if (value == true) {
                     setState ((){
                        customIds.add(e.id);
                     });
                  } else {
                     setState((){
                        customIds.remove(e.id);
                     });
                  }
               }
           );
        }).toList(),
   ),
)