【问题标题】:How to create dynamic switch in list view如何在列表视图中创建动态开关
【发布时间】:2018-10-01 02:16:12
【问题描述】:

我正在开发 Flutter 应用中的列表视图。我正在使用它的页面正在获取选项列表,这些选项可以使用 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),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      );

【问题讨论】:

  • 您应该添加一些您尝试过的代码并明确说明问题
  • @Rene 我添加了修改后的代码以获取视图中的开关列表。

标签: flutter


【解决方案1】:

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

【讨论】:

  • 你能帮我看看我该怎么做,因为我是 Flutter 开发的新手。
【解决方案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;
}

【讨论】:

    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-07-06
      • 2013-07-17
      • 1970-01-01
      • 2017-10-02
      • 1970-01-01
      • 1970-01-01
      • 2021-07-04
      • 2021-09-29
      相关资源
      最近更新 更多