Flutter- 图片

最新推荐文章于 2025-04-11 09:48:15 发布

夜丶陌颜

最新推荐文章于 2025-04-11 09:48:15 发布

阅读量863

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter 前端

本文链接：https://blog.youkuaiyun.com/c_liufeng/article/details/121773465

flutter 专栏收录该内容

13 篇文章

订阅专栏

本文详细解读了Flutter中的Icon和Image组件，包括它们的属性如大小、颜色、方向和描述，以及如何使用网络图片和本地图片。了解这些关键属性有助于提升UI设计的灵活性和可访问性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Icon

属性	值类型	说明
size	double	字体图标大小
color	Color	字体图标颜色
textDirection	TextDirection	字体图标对齐方式
semanticLabel	String	字体图标描述

示例：
在这里插入图片描述

class Body extends StatelessWidget { @override
  Widget build(BuildContext context) {
    return Container(
      width: 500,
      child: Icon(
        Icons.account_balance,
        size: 60,
        color: Colors.lime,
        textDirection: TextDirection.rtl,
        semanticLabel: "234",
      ),
    );
  }
}

image

属性	值类型	说明
image	ImageProvider	必填参数，接收一个ImageProvider 类型的值
semanticLabel	String	图片的描述
excludeFromSemantics	bool	是否从语义上排除该图片，默认值为false
width	double	图片的宽度
height	double	图片的高度
color	Color	图片的前景色，一般不设置或设置透明色，会覆盖掉图片，一般会和colorBlendMode结合使用
colorBlendMode	BlendMode	一般和color结合使用，设置color的混合模式
fit	BoxFit	设置图片的显示模式
alignment	AlignmentGeometry	用于设置图片的对齐方式，默认值：Alignment.center
repeat	ImageRepeat	图片的重复方式，当图片没有完全覆盖掉容器时使用。默认值：ImageRepeat.noRepeat

网络图片（使用NetworkImage加载网络图片）

在这里插入图片描述

class Body extends StatelessWidget { @override
  Widget build(BuildContext context) {
    return Container(
      child: Image(
        image: NetworkImage('https://flutterchina.club/images/flutter-mark-square-100.png'), 
      )
    );
  }
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/fdcc8b20123945ad9dea15dc7ca6a60f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSc5Li26ZmM6aKc,size_20,color_FFFFFF,t_70,g_se,x_16

注意：网络图片需要配置<uses-permission android:name="android.permission.INIERNET"></uses-permission>

本地图片

加载本地图片需要在pubspec.yaml 文件中声明以下内容，并且重启应用
在这里插入图片描述

class Body extends StatelessWidget { @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset('images/a_dot_burr.png'),
    );
  }
}