我想在我点击的图像中添加一个边框，然后在 GridView 上从其他图像中移除，但我不知道该怎么做。 我在包含图像的容器中放置了一个手势检测，当我点击时应该输入边框，但我希望其他图像的边框消失，就像一个选择。

class ImageTile extends StatelessWidget {
  final ImageLessonData imageLessonData;
  final String collection;
  static bool tapped = false;
  static bool other = true;

  ImageTile(this.imageLessonData, this.collection);

  @override
  Widget build(BuildContext context) {

    return Material(
      child: GestureDetector(
        child: FutureBuilder<QuerySnapshot>(
            future: Firestore.instance.collection("images-lessons").document("images").collection(collection).getDocuments(),
            builder: (context, snapshot){
              if(!snapshot.hasData){
                return Center(child: CircularProgressIndicator(),);
              }
              else {
                return GridView.count(
                  crossAxisCount: 1,
                  children: snapshot.data.documents.map((doc){
                    return GridView(
                      gridDelegate:  SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                      children: <Widget>[
                        GestureDetector(
                          onTap: (){
                            tapped = true;
                            other = false;
                          },
                          child: Container(
                            decoration: BoxDecoration(border: tapped || !other ? Border.all(color: Colors.black, width: 1.0) : Border.all(color: Colors.transparent,),),
                            child: Image.network(doc.data["imageL"][0],),
                          ),
                        ),
                        GestureDetector(
                          onTap: (){
                            tapped = false;
                            other = true;
                          },
                          child: Container(
                            decoration: BoxDecoration(border: !tapped || other ? Border.all(color: Colors.black, width: 1.0) : Border.all(color: Colors.transparent,),),
                            child: Image.network(doc.data["imageL"][1],),
                          ),
                        ),
                        GestureDetector(
                          onTap: (){
                            tapped = true;
                            other = false;
                          },
                          child: Container(
                            decoration: BoxDecoration(border: tapped || !other ? Border.all(color: Colors.black, width: 1.0) : Border.all(color: Colors.transparent,),),
                            child: Image.network(doc.data["imageL"][2],),
                          ),
                        ),
                        GestureDetector(
                          onTap: (){
                            tapped = true;
                            other = false;
                          },
                          child: Container(
                            decoration: BoxDecoration(border: tapped || !other ? Border.all(color: Colors.black, width: 1.0) : Border.all(color: Colors.transparent,),),
                            child: Image.network(doc.data["imageL"][3],),
                          ),
                        ),
                      ],
                    );
                  }).toList() ,);
              }
            }),
      ),
    );
  }
}

最佳答案

我想知道你是否真的需要 tapped 和 other 两者。

你能试试这个吗？ tappedGestureDetector 将跟踪当前选择。

  class ImageTile extends StatelessWidget {
  final ImageLessonData imageLessonData;
  final String collection;
  static int tappedGestureDetector = 0; // <-- replaced 'tapped' and 'other'

  ImageTile(this.imageLessonData, this.collection);

  @override
  Widget build(BuildContext context) {

    return Material(
      child: GestureDetector(
        child: FutureBuilder<QuerySnapshot>(
            future: Firestore.instance.collection("images-lessons").document("images").collection(collection).getDocuments(),
            builder: (context, snapshot){
              if(!snapshot.hasData){
                return Center(child: CircularProgressIndicator(),);
              }
              else {
                return GridView.count(
                  crossAxisCount: 1,
                  children: snapshot.data.documents.map((doc){
                    return GridView(
                      gridDelegate:  SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                      children: <Widget>[
                        GestureDetector(
                          onTap: (){
                               setState(() { tappedGestureDetector = 0; }); // <-- replaced 'tapped' and 'other'
                          },
                          child: Container(
                            decoration: BoxDecoration(border: tappedGestureDetector == 0 ? Border.all(color: Colors.black, width: 1.0) : Border.all(color: Colors.transparent,),),
                            child: Image.network(doc.data["imageL"][0],),
                          ),
                        ),
                        GestureDetector(
                          onTap: (){
                               setState(() { tappedGestureDetector = 1; }); // <-- replaced 'tapped' and 'other'
                          },
                          child: Container(
                            decoration: BoxDecoration(border: tappedGestureDetector == 1 ? Border.all(color: Colors.black, width: 1.0) : Border.all(color: Colors.transparent,),),
                            child: Image.network(doc.data["imageL"][1],),
                          ),
                        ),
                        GestureDetector(
                          onTap: (){
                               setState(() { tappedGestureDetector = 2; }); // <-- replaced 'tapped' and 'other'
                          }, 
                          child: Container(
                            decoration: BoxDecoration(border: tappedGestureDetector == 2 ? Border.all(color: Colors.black, width: 1.0) : Border.all(color: Colors.transparent,),),
                            child: Image.network(doc.data["imageL"][2],),
                          ),
                        ),
                        GestureDetector(
                          onTap: (){
                               setState(() { tappedGestureDetector = 3; }); // <-- replaced 'tapped' and 'other'
                          }, 
                          child: Container(
                            decoration: BoxDecoration(border: tappedGestureDetector == 3 ? Border.all(color: Colors.black, width: 1.0) : Border.all(color: Colors.transparent,),),
                            child: Image.network(doc.data["imageL"][3],),
                          ),
                        ),
                      ],
                    );
                  }).toList() ,);
              }
            }),
      ),
    );
  }
}

关于flutter - 图像中的边框 onTap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54935980/