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

Posted 2023-02-23

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

【英文标题】：How to add List view with dynamic selection checkbox inside expansion tile in flutter

【发布时间】：2020-01-01 18:53:07

【问题描述】：

在多个 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

【参考方案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 属性到复选框，然后使用发送按钮将其发布到您的后端，这样您就可以将其保存到您的数据库中。

【讨论】：

@Furkan Aydin 感谢您的回答，但您能告诉我在使用多个展开磁贴列表时会发生什么吗？我怎样才能从第一个展开图块中选择一个项目，从另一个展开图块列表中选择第二个项目。

@RutvikGumasana 我编辑了答案。如果每个扩展图块代表不同的值列表，则需要为每个扩展图块使用新地图。

我可以用单张地图来做吗，因为我有很多数据，所以每次我必须制作新地图时，这实际上是不可能的。 你能帮帮我吗

您能分享一个数据示例吗？所以我可以使用它。 @RutvikGumasana

"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 , ]