如何在点击后更改网格视图Img上的图标

Question

我在flutter应用程序中创建了一个网格视图。但就像下面链接上的图片一样，我想在图片上创建一个图标并更改背景色。点击图片后，

我一直在想办法，但我终于找到了一个问题。如果你能告诉我，我会发自内心地感激你。

请输入img链接(如下( https://firebasestorage.googleapis.com/v0/b/instaclone-2-fd9de.appspot.com/o/post%2F12344.png?alt=media&代币=89d46c03-83ba-4d30-b716-e9b718c1340b

import 'dart:ffi';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class FavoriteAnalysisPage extends StatefulWidget {
final FirebaseUser user;
FavoriteAnalysisPage(this.user);
@override
_FavoriteAnalysisPageState createState() => _FavoriteAnalysisPageState();
}
class _FavoriteAnalysisPageState extends State<FavoriteAnalysisPage> {
List style_List = [];
var styleCode = "";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("favorite Analysis Page")),
body:  _bodyBuilder(),
);
}
Widget _bodyBuilder() {
return StreamBuilder <QuerySnapshot>(
stream: _commentStream(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if(!snapshot.hasData){
return Center(child:  CircularProgressIndicator());
}
var items =  snapshot.data?.documents ??[];

var fF = items.where((doc)=> doc['style'] == "오피스룩").toList();
var sF = items.where((doc)=> doc['style'] == "로맨틱").toList();
var tF = items.where((doc)=> doc['style'] == "캐주").toList();
fF.addAll(sF);
fF.addAll(tF);
fF.shuffle();
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 0.6,
mainAxisSpacing: 2.0,
crossAxisSpacing: 2.0),
itemCount: fF.length,
itemBuilder: (BuildContext context, int index) {
return _buildListItem(context, fF[index]);
});
},
);
}
Widget _buildListItem(context, document) {
return Ink.image(
image : NetworkImage(document['thumbnail_img']),
fit : BoxFit.cover,
child: InkWell(
// Something here.. 
),
);
}
Stream<QuerySnapshot> _commentStream() {
return Firestore.instance.collection("uploaded_product").snapshots();

}

Answer 1

这个有状态的小部件可以工作，但您必须根据需要自定义变量

class MyWidget extends StatefulWidget {
MyWidget({Key key}) : super(key: key);
@override
_MyWidgetState createState() {
return _MyWidgetState();
}
}
class _MyWidgetState extends State<MyWidget> {
bool isSelected = false;
@override
Widget build(BuildContext context) {
return InkWell(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image : NetworkImage("https://firebasestorage.googleapis.com/v0/b/instaclone-2-fd9de.appspot.com/o/post%2F12344.png?alt=media&token=89d46c03-83ba-4d30-b716-e9b718c1340b"),
fit : BoxFit.cover,
)
),
child: isSelected?Container(
alignment: Alignment.center,
color: Colors.black38,
child:Container(
height: 120,
width: 120,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(Radius.circular(60))
),
child:Icon(Icons.check,color: Colors.white,size: 60,)
)
):Container(),
),
onTap: (){
setState(() {
isSelected = !isSelected;
});
},
);
}
}