Flutter Image Icon

最新推荐文章于 2024-05-24 08:00:00 发布

jiahua123_dongzhou

最新推荐文章于 2024-05-24 08:00:00 发布

阅读量218

点赞数

分类专栏： fflutter组件

本文链接：https://blog.youkuaiyun.com/jiahua123_dongzhou/article/details/108348918

版权

fflutter组件专栏收录该内容

31 篇文章

订阅专栏

这篇博客介绍了Flutter中Image组件的使用，包括如何从本地加载图片，并在pubspec.yaml中声明资源。同时，文章讲解了Flutter的Icon组件，特别是如何使用阿里图库的iconfont，强调了iconfont相对于图片的优势，如体积小、矢量特性以及可应用文本样式。

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

图片（Image）

在Flutter中，我们可以使用Image控件来显示图片，一般来讲我们的图片资源都来源于网络或者本地图片。
Flutter中的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

从项目中加载资源图片

大致分为一下几步

创建一个文件夹，用于存放图片，如图，我创建了一个imgs的文件夹，放了一张图片

2.在pubspec.yaml中声明资源，注意声明的时候路径和前面的-是有间隔的，不然的话会报`#/properties/flutter/properties/assets: type: wanted [array] got -imgs/code.png`

类似的错误，声明完成后点击右上方的packages get

重要备注： pubsped下面的assets中其实不需要写图片的集合就可以写文件名就可以

使用该资源图片，注意路径要填写正确

 return Image.asset("imgs/code.png");
1

或

return Image(image: AssetImage("imgs/code.png"));

Flutter Icon

阿里图库

简介

Flutter 中，可以像 web 开发一样使用 iconfont，iconfont 即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。用于显示 iconfont 的就是 Icon Widget。

iconfont 和图片相比有如下优势：

体积小：可以减小安装包大小。
矢量的：iconfont 都是矢量图标，放大不会影响其清晰度。
可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
可以通过 TextSpan 和文本混用。

实例

1.Icon

class Icon extends StatelessWidget {
  /// Creates an icon.
  ///
  /// The [size] and [color] default to the value given by the current [IconTheme].
  const Icon(
    this.icon, {   
    Key key,
    this.size,           //大小
    this.color,          //颜色
    this.semanticLabel,  //语义标签
    this.textDirection,  //icon文字方向
  }) : super(key: key);

列子:

Container(
  width: 300,
  height: 300,
  color: Colors.lightGreenAccent,
  child: Icon(
    Icons.favorite,
    color: Colors.orange,
    size: 200,
  ),
),

2. IconData

class IconData {

  const IconData(
    this.codePoint, {   //该图标在字体中的编码  
    this.fontFamily,    //所属字体
    this.fontPackage,   //字体所属的包
    this.matchTextDirection = false, //是否启用镜像，向左还是向右
  });

列子:

 Container(
  width: 100,
  height: 100,
  color: Colors.lightGreenAccent,
  child: Icon(
    IconData(
        0xe914,
        fontFamily: 'MaterialIcons',
        matchTextDirection: true
    ),
    color: Colors.red,
    size: 30,
    textDirection: TextDirection.rtl,
  ),
),
Container(
  width: 100,
  height: 100,
  color: Colors.blueGrey,
  child: Icon(
    IconData(
        0xe914,
        fontFamily: 'MaterialIcons',
        matchTextDirection: true
    ),
    color: Colors.red,
    size: 30,
    textDirection: TextDirection.ltr,
  ),
),