Flutter中如何用图片替代Tab组件中的Icon图标？

嘿，这个需求实现起来超简单！Flutter的Tab组件里的icon参数本身就支持接收任意Widget类型，所以你直接把Image.asset()的实例传进去就行，完全不需要额外的转换步骤~

修改后的代码示例： #

Tab(
  icon: Image.asset(
    "assets/img/logo.png",
    // 可选：根据需要调整图标尺寸，避免默认大小过大
    width: 24,
    height: 24,
  ),
  text: "Browse",
)

几个关键注意事项： #

• 一定要先在pubspec.yaml里正确配置资源路径，不然图片会加载失败：

  flutter:
    assets:
      - assets/img/logo.png
      # 如果想加载整个img文件夹下的所有资源，可以写成：- assets/img/
  

• 如果图片显示尺寸不符合预期，除了直接在Image.asset里设置width和height，也可以用SizedBox或Container包裹来约束大小，比如：

  icon: SizedBox(
    width: 24,
    height: 24,
    child: Image.asset("assets/img/logo.png"),
  )
  

这样就能顺利把本地图片替换原来的Icon作为Tab的图标啦！

内容的提问来源于stack exchange，提问作者MistyD