使用水龙头更新 Flutter ListTile 不起作用

Question

目标是将 leading 和 subtitle 的 ListTile 中的值更改为 点击 null。点击正在切换 _act 布尔值，但 ListTile 的前导：和副标题：值不会从其初始状态改变。我的 ListView 代码如下。请帮忙。

        return new ListView(
          children: querySnapShot.data.documents.map((DocumentSnapshot document) {
            bool _act = false;
            return new ListTile(
              leading: _act != false ? const Icon(Icons.remove_red_eye, color: Color(0xff00caff), size: 40) : null,
              title: new Text((DBProvider.db.idDeHasher(document['exampleid'], key) ?? 'fallback'), style: TextStyle(color: secondaryColor)),
              subtitle: _act != false ? new Text((document['exampleString']  ?? 'fallbackString'), style: TextStyle(color: secondaryColor)) : null,
              onTap: () { 
                _act = !_act;
                print(_act.toString());
                }
            );
          }).toList(),
        );

Answer 1

您需要将小部件设为 Stateful Widget 并在点击 ListTile 时调用 setState。

根据 docs:

Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.

因此，如果小部件的状态发生变化 ，您必须 调用 setState 来触发视图的重建并立即查看新状态所暗示的变化。

我以您的代码为例添加了一个演示：

     // define a list of acts
        List _acts = [];
         return new ListView(
          children: querySnapShot.data.documents.asMap().entries.map((entry) {
          // declare all entries of the list to false
          acts.add(false);
          // access the index 
          int index = entry.key;
          // access the document
          DocumentSnapshot document = entry.value;
          // DocumentSnapshot document = entry
            return new ListTile(
              leading: _acts[index] != false ? const Icon(Icons.remove_red_eye, color: Color(0xff00caff), size: 40) : null,
              title: new Text((DBProvider.db.idDeHasher(entry.val['exampleid'], key) ?? 'fallback'), style: TextStyle(color: secondaryColor)),
              subtitle: _acts[index] != false ? new Text((document['exampleString']  ?? 'fallbackString'), style: TextStyle(color: secondaryColor)) : null,
              onTap: () { 
               // call setstate
              setState(() { // new line
              // change the bool variable based on the index
               _acts[index] = !_acts[index];
                print(_acts[index].toString());
              });
                }
            );
          }).toList(),
        );

Answer 2

onTap: () { 
setState((){
                _act = !_act;
                print(_act.toString());
                }
});

只需复制粘贴即可。

Answer 3

替换 bool _act = false; 正下方

class _SomeClass extends State<SomeClass> { 并用 setState({});

包围

使用水龙头更新 Flutter ListTile 不起作用

Update Flutter ListTile with tap not working

listview

boolean

dart

dart-pub

flutter