如何在颤动中单击图像后使用墨水瓶在图像上创建图标

Question

我在flutter app中做了一个grid view。但是像下面的图片link，我想在图片上创建一个图标并更改背景颜色点击图片后，

我一直在寻找方法，但我终于有了一个问题。如果你能让我知道，我将由衷地感激。

请输入img link(下)

https://firebasestorage.googleapis.com/v0/b/instaclone-2-fd9de.appspot.com/o/post%2F12344.png?alt=media&token=89d46c03-83ba-4d30-b716-e9b718c1340b

 Widget _bodyBuilder() {
//  TODO : 그 예시를 어떻해 stream View로 보여줄것인가
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: new InkWell(
       //I think we need to get something in here....
        onTap: (){},
      ),
     );
  }

Answer 1

您应该创建具有 isSelected 值的图像列表，当用户单击项目时，它们设置 true/false 具有 imageURL 和 [=11= 的旧值的基数] 多变的。首先，您应该将值存储在 List Of Image obj 中。来自 Firebase/API 然后流向下面的步骤。我在这里创建了一个演示和 post。请参考。

示例代码

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  List<ImageData> imageList;

  @override
  void initState() {
    super.initState();
    imageList = ImageData.getImage();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            childAspectRatio: 0.5,
            crossAxisCount: 5,
            crossAxisSpacing: 2.0,
            mainAxisSpacing: 2.0),
        itemCount: imageList.length,
        itemBuilder: (builder, index) {
          return InkWell(
              onTap: () {
                setState(() {
                  imageList[index].isSelected = !imageList[index].isSelected;
                });
              },
              child: Stack(
                children: [
                  _getImage(imageList[index].imageURL),
                  Opacity(
                    opacity: imageList[index].isSelected ? 1 : 0,
                    child: Stack(
                      children: [
                        Container(
                          width: double.infinity,
                          height: double.infinity,
                          color: Colors.black38,
                        ),
                        Center(
                          child: CircleAvatar(
                            backgroundColor: Colors.greenAccent,
                            child: Icon(
                              Icons.check,
                              color: Colors.white,
                            ),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ));
        },
      ),
    );
  }

  _getImage(url) => Image.network(
        url,
        height: 500,
        fit: BoxFit.fitHeight,
      );

  @override
  void dispose() {
    super.dispose();
  }
}

class ImageData {
  String imageURL;
  bool isSelected;
  int id;

  ImageData(this.imageURL, this.isSelected, this.id);

  static List<ImageData> getImage() {
    return [
      ImageData('https://picsum.photos/200', false, 1),
      ImageData('https://picsum.photos/100', false, 2),
      ImageData('https://picsum.photos/300', false, 3),
      ImageData('https://picsum.photos/400', false, 4),
      ImageData('https://picsum.photos/500', false, 5),
      ImageData('https://picsum.photos/600', false, 6),
      ImageData('https://picsum.photos/700', false, 7),
      ImageData('https://picsum.photos/800', false, 8),
      ImageData('https://picsum.photos/900', false, 9),
    ];
  }
}

输出

如何在颤动中单击图像后使用墨水瓶在图像上创建图标

how to create an icon on image with inkwell after Click on the image in flutter

gridview

flutter