图像中的边框onTap
图像中的边框onTap
提问于 2019-03-01 07:42:51
我试着在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() ,);
}
}),
),
);
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-01 08: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() ,);
}
}),
),
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54935980
复制相关文章
相似问题
腾讯云开发者
