单击后如何在Grid View图上修改图标

问题描述

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

我一直在寻找方法，但是我终于有了一个问题。如果您让我知道，我将衷心感谢。

请输入img链接（如下） https://firebasestorage.googleapis.com/v0/b/instaclone-2-fd9de.appspot.com/o/post%2F12344.png?alt=media&token=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();

  
}

解决方法

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

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;
   });
  },);
 }
}