时间戳

首页 > 解决方案 > 使用复选框颤振传递多个数据以发挥作用

flutter - 使用复选框颤振传递多个数据以发挥作用

问题描述

我有一个带有 4 个复选框数据的 Listview 的 showModalBottomSheet，我遇到了问题。

1：每当我按下每个复选框时它都不会更新，然后如果我关闭 showModalBottomSheet 然后再次打开它会显示之前选择的数据，它不会实时更新。

从 API 获取数据没有问题

初始化数据

var ids;
 List<SearchMenuModel> menu_model = [];
  List<bool> inputs = new List<bool>();
  @override
  void initState() {
    // TODO: implement initState
    setState(() {
      for(int i=0;i<menu_model.length;i++){
        inputs.add(true);
      }
    });

void ItemChange(bool val,int index){
    setState(() {
      inputs[index] = val;
    });
  }

Showmodalbottomsheet 与 Listview 与复选框

     void displayBottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (ctx) {
          return Container(
            height: MediaQuery
                .of(context)
                .size
                .height * 0.6,
            child: Column(
              children: [
                Container(
                  width: 300,
                  height: 250,
                  child: new ListView.builder(
                      itemCount: menu_model.length,
                      itemBuilder: (BuildContext context, int index){
                        return new Container(
                          padding: new EdgeInsets.all(10.0),
                          child: new Column(
                            children: <Widget>[
                              new CheckboxListTile(
                                  value: inputs[index],
                                  title: new Text(menu_model[index].english),
                                  controlAffinity: 
                                  ListTileControlAffinity.leading,
                                  onChanged:(bool val){
                                    ItemChange(val, index);
                                    setState(() {
                                      ids=menu_model[index].id;
                                      print(ids);
                                    });
                                  }
                              )
                            ],
                          ),
                        );

                      }
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(15),
                  child: GestureDetector(
                    onTap: (){
                      submit(ids);
                    },
                    child: Container(
                      height: 40,
                      width: 280,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        color: Color.fromRGBO(34, 83, 148, 1),
                      ),
                      child: Center(
                        child: Text(
                          "APPLY",
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          );
        });
  }

标签： flutterflutter-layout

解决方案

像这样包装你的容器StatefulBuilder：

StatefulBuilder(
builder: (context, setState) {
      return Container()....
  
})

setState并在您希望底部工作表容器小部件更改的任何时候调用。

这是一个使用 statefulbuilder 和 alertdialog 的简单示例的链接。

推荐阅读