在颤动中单击后如何更改网格视图图像上的图标答案

【问题标题】：how to chage an icon on Grid view Img after Click in flutter在颤动中单击后如何更改网格视图图像上的图标
【发布时间】：2021-01-09 01:07:18
【问题描述】：

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

我一直在寻找方法，但我终于有了一个问题。如果您能告诉我，我会打心底里感激不尽。

请输入图片链接（如下） 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();

  
}

【问题讨论】：

标签： flutter dart flutter-layout flutter-animation

【解决方案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;
   });
  },
  );
 }
}

【讨论】：