Flutter 资产图像无法正确显示

Posted 2023-03-28

【中文标题】Flutter 资产图像无法正确显示

【英文标题】：Flutter asset image wont display properly

【发布时间】：2021-11-07 23:35:53

【问题描述】：

我想为卡片小部件添加一个图标，所以我使用了 ImageIcon 小部件，如下所示

Card(
  color: colorPalette.cultured,
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Row(
      children: <Widget>[
        Text(label,style: TextStyle(fontWeight: FontWeight.w600,fontSize: 15.0,fontFamily: 'Poppins'),),
        Spacer(),
        ImageIcon(AssetImage('assets/icons/call.png'),),
      ],
    ),
  ),
);

我要显示的图标是，

但显示的是，

pubspec.yaml 中的资产也正确缩进。

【问题讨论】：

控制台是否有错误日志

如果删除调色板会发生什么？

【参考方案1】：

试试下面的代码希望对你有帮助。只需根据需要更改图像

您已通过 2 种方式添加资产图片

Image.assets() - 文档here

AssetImage()

      Row(
             children: [
               Image(
                  image: AssetImage('assets/images/shop.png'),
                  width: 150,
                  height: 150,
                ),
                Image.asset(
                  'assets/images/cycle.png',
                  width: 150,
                  height: 150,
                ),
             ],
           ),

您的结果屏幕 ->

【参考方案2】：

您可以使用其中任何一种来使用资产图片 Image.asset('图片') 或 Image(image: AssetImage('image')) 用于使用资产图像

用图标实现它

Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.blue),
            child: Icon(
              Icons.call,
              color: Colors.white,
            ),
          )