如何在 flutter 中的 ListView.builder 中循環遍歷 ListTile

Question

我正在嘗試根據來自雲 Firestore 的數據列表在 flutter 中顯示列表圖塊。 我希望在點擊磁貼時為每個磁貼更改前導圖標。 我的問題是每當我點擊任何圖塊時，整個列表都會改變。 我只想改變被敲擊的瓷磚。 這是我的代碼：

 StreamBuilder(
                        stream: Firestore.instance
                            .collection('Recharge_Card')
                            .snapshots(),
                        //print an integer every 2secs, 10 times
                        builder: (context, snapshot) {
                          if (!snapshot.hasData) {
                            return Text("Loading..");
                          }
                          return SizedBox(
                            height: _height / 1.9,
                            child: ListView.builder(
                              // itemExtent: 80.0,
                              itemCount: snapshot.data.documents.length,
                              itemBuilder: (context, index) {
                                DocumentSnapshot myCards =
                                    snapshot.data.documents[index];

                                return Card(
                                  elevation: 20.0,
                                  child: ListTile(
                                    onTap: () {
                                      setState(() {
                                        x = Text('Tapped');
                                      });
                                    },
                                    leading: x,
                                    title: Text(myCards['CardPin']),
                                    trailing: Text(myCards['Value']),
                                  ),
                                );
                              },
                            ),
                          );`
                        },
                      ),

Answer 1

發生這種情況是因為所有卡片的x都是相同的，您需要將這個人分開，我的建議是將x放在DocumentSnapshot中，所以您只能更改已點擊的卡片，如下所示：

StreamBuilder(
    stream: Firestore.instance
        .collection('Recharge_Card')
        .snapshots(),
    //print an integer every 2secs, 10 times
    builder: (context, snapshot) {
        if (!snapshot.hasData) {
        return Text("Loading..");
        }
        return SizedBox(
        height: _height / 1.9,
        child: ListView.builder(
            // itemExtent: 80.0,
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) {
            DocumentSnapshot myCards =
                snapshot.data.documents[index];

            return Card(
                elevation: 20.0,
                child: ListTile(
                onTap: () {
                    setState(() {
                        myCards['x'] = Text('Tapped');
                    });
                },
                leading: myCards['x'],
                title: Text(myCards['CardPin']),
                trailing: Text(myCards['Value']),
                ),
            );
            },
        ),
        );`
    },
),

Answer 2

為您的卡添加密鑰並提供唯一值，在您的情況下，它是您的索引

         Card(
            key: ValueKey(index),
              //....
            )