单击后如何在Grid View图上修改图标 [英] how to chage an icon on Grid view Img after Click in flutter

问题描述

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

I made a grid view in the flutter app. But like the Pictures on the below link , I want to create an icon on the picture and change the background color After tap the picture,

我一直在寻找方法，但是我我终于有一个问题。如果您愿意告诉我，我会从心底里感谢您。

I've been looking for ways, but I've finally got a question. I'd appreciate it from the bottom of my heart if you'd let me know.

请输入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();

  
}

推荐答案

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

this stateful widget will work but you have to customize the variables as you need

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

这篇关于单击后如何在Grid View图上修改图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！