如何在Flutter中将图标叠加在图像上

Question

我需要在图片的右下角显示一个喜爱图标。

Container(
   decoration: new BoxDecoration(color: Colors.white),
   alignment: Alignment.center,
   height: 240,
   child: Image.network(used_car.imageUrl,fit: BoxFit.fill) 
)

我想在这个图像容器的右下角显示一个图标Icon.favorite，但找不到任何Flutter属性来修复或显示它。

- Haseeb Ahmad

---

请参考此链接：https://dev59.com/p1UK5IYBdhLWcg3w4jMv#61123046 - Jitesh Mohite

Answer 1

你可以将它包装在Stack中：

Stack(
  children: <Widget>[
    Container(
        decoration: new BoxDecoration(color: Colors.white),
        alignment: Alignment.center,
        height: 240,
        child: Image.network(used_car.imageUrl,fit: BoxFit.fill)
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: Icon(Icons.favorite),
    )
  ],
)

- Kirill Bubochkin

---

对于 Stack，在我的情况下添加 alignment: Alignment.center 是必要的，以使 Alignment.bottomRight 在垂直空间上起作用。https://dev59.com/sFUL5IYBdhLWcg3wHU_M#60990352 - Gene Bo

Answer 2

使用 Positioned 小部件，在 Stack 中可以更好地完成它。

Container(
   decoration: new BoxDecoration(color: Colors.white),
   height: 240,
   child: Stack(
     children: <Widget>[
        Image.network(used_car.imageUrl,fit: BoxFit.fill),
        Positioned(
          bottom: 15, right: 15, //give the values according to your requirement
          child: Icon(Icons.favorite),
        ),
     ],
  ),
),

- srikanth7785

Answer 3

这里有另一种图标覆盖的解决方案：

Container(
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius:BorderRadius.circular(100)
          ),
          child: Icon(
            Icons.edit,
            color: Colors.white,
          ),
        ),
      ),
      height: MediaQuery.of(context).size.width - 220,
      width: MediaQuery.of(context).size.width - 220,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100),
          image: DecorationImage(
            image: AssetImage(
              'assets/images/image.jpg'
            ),
            fit: BoxFit.cover
          ),
      ),
    ),
  ),

结果是：

- Muhamad Haydar Jawad