Flutter：所有復選框都被選中

（解決了）

我有一個問題（已經解決），如果我選擇其中一個復選框，所有復選框也會被選中。這是圖片

（未解決）

知道如何在顫振中使用復選框的人可以在這里幫助我：

Flutter：復選框將陣列資料發送到 POST json body 引數

uj5u.com熱心網友回復：

好的，我已經為您添加了一個示例示例，只需復制并運行應用程式即可了解事情的處理方式。

解決方案總結：

因此，您將獲得 PetHealthModel 的串列，并且我們可以為該模型定義一個布爾變數，這樣當該模型在螢屏上呈現時，將有一個默認值 false 并且所有復選框都沒有勾選。然后當您單擊復選框時，特定模型 isSelected 為真，并且只有該專案會被勾選。

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,
      };
}

請讓我知道這對你有沒有用

uj5u.com熱心網友回復：

順便說一句，我的第二個問題已經解決了。

這是我添加的

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(),
   ),
)

標籤：json 扑 镖 复选框 飞镖-html

上一篇：我如何限制顫動中的文本輸入行

下一篇：Perl：僅當陣列的foreach回圈沒有要處理的元素時才進行進一步處理（foreach回圈的最后一次迭代已打開）