如何在颤动中的扩展磁贴内添加带有动态选择复选框的列表视图

Question

在多个 ExpansionTile 中添加带有复选框的列表视图时遇到问题。此外，复选框必须是动态选择。

在这张图片中，我创建了一个扩展磁贴，并在里面放置了带有复选框的列表磁贴，但是当我添加多个扩展磁贴时，所有扩展磁贴都根据值被选中或未选中，但我想选择用户想要的值，这意味着它应该是动态的

body: ExpansionTile(
      title: Text("Expansion"),
      children: _listViewData
          .map((data) => CheckboxListTile(
                title: Text(data),
                value: _isChecked,
                onChanged: (val) {
                  setState(() {
                    _isChecked = val;
                  });
                },
              ))
          .toList(),
    ));

Here is the image

Answer 1

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  var lovCountryServices = [
    {
      "services": [
        {
          "service_group_id": 2,
          "service_category": "B",
          "name": "Cat",
          "id": 6
        },
      ],
      "name": "A",
      "is_active": true,
      "id": 2
    },
    {
      "services": [
        {
          "service_group_id": 3,
          "service_category": "B",
          "name": "Air",
          "id": 10
        },
      ],
      "name": "B",
      "is_active": true,
      "id": 3
    }
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Column(
        children: <Widget>[
          ListView.builder(
            shrinkWrap: true,
            padding: const EdgeInsets.all(8.0),
            itemCount: lovCountryServices.length,
            itemBuilder: (BuildContext context, int index) {
              var item = lovCountryServices[index];
              return ExpansionTile(
                title: Text("Expansion"),
                children: <Widget>[
                  CheckboxListTile(
                    title: Text(item['name']),
                    value: item['is_active'],
                    onChanged: (val) {
                      setState(() {
                        item['is_active'] = val;
                      });
                    },
                  ),
                ],
              );
            },
          ),
          RaisedButton(
            onPressed: () => print("sending to backend"),
            child: Text("SEND"),
          )
        ],
      )),
    );
  }
}

编辑：如果您不想使用映射，您可以使用 is_active 属性到复选框，然后使用发送按钮将其发布到您的后端，这样您就可以将其保存到您的数据库中。