Question

我在flutter app中处理列表视图。我正在使用它的页面是获取选项列表，其中包含启用和禁用它们的选项，并使用api请求并提供JSON响应。我添加了开关，但是当我尝试打开/关闭时，它同时打开和关闭所有选项。现在我可以设置值，因为新的修改后的代码，但问题仍然是如果该值设置为true，那么在单击开关后它会变为false但不会再次设置为true。

设置值的代码和交换机上使用的onChanged。

bool _value = false;

  void _onChanged(bool value) {
    print(value);
    setState(() {
      if(value == false) {
        _value = false;
      }
      else {
        _value = true;
      }

    });
  }

我用来构建列表视图的正文代码

new ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context,int index) {
          if(data[index]['status'] == '0') {
              _value = false;
          }
          else {
            _value = true;
          }
          return new Container(
            child: new Center(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Card(
                    child: new Container(
                      child: new Row(
                        children: [
                          new Expanded(
                            child: new Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                new Container(
                                  child: new Text(data[index]['property']),
                                ),
                              ],
                            ),
                          ),
                          new Switch(
                              value: _value,
                              onChanged: (bool value) {
                                _onChanged(value);
                          }),
                        ],
                      ),
                      padding: const EdgeInsets.all(20.0),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      );

Answer 1

所有切换都使用_value设置，并且您在_onChanged中更改_value，这意味着您可以切换所有切换的位置。您应该将所有项逻辑移动到一个小部件中以更好地理解逻辑。

Answer 2

创建一个_getList()函数并在body代码中调用_getList()函数：

body: ListView( 
    children : [
        Column(
            children: _getList()
        ) 
    ]
),

在 _getList() 函数中创建一个新的 List 并使用 _activeDatas 显示开关值。

var _activeDatas=["1","0","1","1"];
List <Widget> _getList(){
    var newListWidgets = List<Widget>();
    for (var activeData in _activeDatas) {
        newListWidgets.add(
        // TODO: Whatever layout you need for each widget.
            child: GestureDetector(
                child:Container(
                    height: 40,
                    child: Row(
                        children: [
                          Switch(
                              onChanged: (value) {
                                setState(() {
                                  if((activeData)=="1"){
                                    activeData="0";
                                  }
                                  else
                                    activeData = "1";
                                  print(activeData);
                                });
                              },
                              value: (activeData)=="1"
                          )
                        ],
                    )
                )
            )  
        ); 
    }
    return newListWidgets;
}

Answer 3

很简单，您可以创建一个 Switch 小部件列表并将它们与 ListView.buider 的索引一起使用

如何在列表视图中创建动态切换

3 个答案: