如何仅突出显示 GridView.build 上的 onTaped 项目？

Question

我正在尝试更改 UI 中所选项目的边框。

只能选择一个和一个项目，例如，如果我点击索引 3 的项目，

显示该项目的容器/小部件变为绿色（边框），其余变为红色

用户只需点击另一个项目即可更改课程选择，然后再次进行相同的过程...

任何帮助将不胜感激。

Container(
            decoration: BoxDecoration(
              color: Colors.black87,
            ),
            height: double.infinity,
            child: StreamBuilder(
            stream: Firestore.instance.collection("cats").snapshots(),
            builder: (BuildContext  context, AsyncSnapshot snapshot)
            {
              // if (snapshot.connectionState == ConnectionState.waiting) return Center(child: CircularProgressIndicator());
              if (snapshot.hasData)
              {
                return GridView.builder(

                  itemCount: snapshot.data.documents.length,
                  itemBuilder: (context, index) {

                    final key = new GlobalKey<ScaffoldState>();
                    List<DocumentSnapshot> docs = snapshot.data.documents;
                    DocumentSnapshot ds = docs[index];

                    return Container(
                      margin : EdgeInsets.symmetric(horizontal: 20.0,vertical: 20.0),
                      decoration: BoxDecoration(
                        color: Colors.grey[300],
                        image: DecorationImage(
                          image: NetworkImage(ds["img"].toString()),
                          fit: BoxFit.fill,
                        ),
                        borderRadius: BorderRadius.circular(20),
                        border: selected_ItemBorder,
                      ),
                      child: InkWell(
                        onTap: () {
                          setState(() { // I played around this but no results ..
                            for (var item in docs) {
                              if (item.documentID == ds.documentID){
                                selected_ItemBorder = null;
                              }else{
                                selected_ItemBorder = Border.all(color: Colors./*black54*/green ,style: BorderStyle.solid,width: 2);
                                print(item["name"]);

                              }
                            }
                          });
                          // print(ds["name"]);
                          // key.currentState.removeCurrentSnackBar();
                          Scaffold.of(context).showSnackBar(
                            new SnackBar(
                              duration: Duration(milliseconds: 600),
                              backgroundColor: Colors.black87,
                              behavior: SnackBarBehavior.fixed,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(topLeft: Radius.circular(40), topRight: Radius.circular(40)),
                                // side: BorderSide(width: 1,color: Colors.green,style: BorderStyle.solid)
                              ),
                              content: Text(

                               "Selected : ${ds["name"]}", 
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  color: Colors.white60,
                                  // fontWeight: FontWeight.bold,
                                ),
                              )
                            ),

                          );
                        },

                        customBorder: CircleBorder(),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Expanded(
                              child: Container(
                              height: 25,
                              child: Padding(
                                padding: const EdgeInsets.only(top: 2),
                                child: Text(
                                  ds["name"],
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    fontSize: 14,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                              decoration: BoxDecoration(
                                color: Colors.black38,
                                borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
                                // border: Border(bottom: BorderSide(color: Colors.black54,style: BorderStyle.solid,width: 1))
                              ),
                              ),
                            )
                          ],
                        ),
                      ),

                    );
                  },
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2
                  ),
              );
            }
            // else {
            //   return Err(); // _edit
            // }
          },
        ),
      ),

Answer 1

好吧，没关系，我设法做到了这一点：

我做了变量 int indSel = 0; // 索引 0 的默认项被选中然后在边界：indSel == index ？绿色边框（）：红色..或其他，

然后点击：

 setState(() {
     indSel = index;
 });

如何仅突出显示 GridView.build 上的 onTaped 项目？

How do i Highlight only the onTaped Item on a GridView.build?

android-gridview

dart

flutter