Как выделить только элемент onTaped в GridView.build? - PullRequest
Новая
       37

Как выделить только элемент onTaped в GridView.build?

0 голосов
/ 18 января 2020

Я пытаюсь изменить границу в пользовательском интерфейсе только для выбранного элемента.

Можно выбрать только один и один элемент, например, если я коснусь элемента индекса 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
            // }
          },
        ),
      ),

1 Ответ

0 голосов
/ 18 января 2020

Ладно, неважно, ребята, мне удалось сделать это следующим образом:

я сделал переменную int indSel = 0; // элемент по умолчанию индекса 0 затем выбирается в рамке: indSel == index? Зеленая рамка (): красная .. или что-то еще,

, затем нажмите: 

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