问图像中的边框onTap
EN

Stack Overflow用户

提问于 2019-02-28 23:42:51

回答 1查看 688关注 0票数 1

我试着在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() ,);
              }
            }),
      ),
    );
  }
}

flutter

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-01 00:50:39

我想知道您是否真的需要同时使用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() ,);
              }
            }),
      ),
    );
  }
}