【Flutter -- 基础组件】图片组件 Image & Icon

【Flutter -- 基础组件】图片组件 Image & Icon

文章目录

​​一、图片​​

​​1. 属性​​​​2. 从 asset 中加载图片​​​​3. 从网络加载图片​​

​​二、Icon​​

​​1. 属性​​​​2. 使用 Material Design 字体图标​​

一、图片

Flutter 中，我们可以通过 Image 组件来加载并显示图片，Image 的数据源可以是 asset、文件、内存以及网络。

1. 属性

alignment→ AlignmentGeometry - 图像边界内对齐图像。centerSlice→ Rect - 九片图像的中心切片。color→ Color - 该颜色与每个图像像素混合colorBlendMode。colorBlendMode→ BlendMode - 用于 color 与此图像结合使用。fit→ BoxFit - 图像在布局中分配的空间。gaplessPlayback→ bool - 当图像提供者发生变化时，是继续显示旧图像（true）还是- - 暂时不显示（false）。image→ ImageProvider - 要显示的图像。matchTextDirection→ bool - 是否在图像的方向上绘制图像 TextDirection。repeat→ ImageRepeat - 未充分容器时，是否重复图片。height→ double - 图像的高度。width→ double - 图像的宽度。

2. 从 asset 中加载图片

1. 在工程根目录下创建一个 images 目录，并将图片 avatar.png 拷贝到该目录。

2. 在 pubspec.yaml 中的 flutter 部分添加如下内容：

assets: -

注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。

3. 加载该图片

import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('图片 & Icon'), ), body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text("1.图片", textScaleFactor: 1.2, ), Image( image: AssetImage("images/avatar.png"), width: 100.0 ), ], ) ) ); }}

Image 也提供了一个快捷的构造函数 Image.asset 用于从 asset 中加载、显示图片：

.asset("images/avatar.png", width: 100.0, ),

3. 从网络加载图片

代码

import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('图片 & Icon'), ), body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text("1.图片", textScaleFactor: 1.2, ), Image( image: NetworkImage( " width: 200.0, ), ], ) ) ); }}

Image 也提供了一个快捷的构造函数 Image-work 用于从网络加载、显示图片：

Image-work( " width: 200.0,)

二、Icon

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

在 Flutter 开发中，iconfont 和图片相比有如下优势：

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

1. 属性

color 类型：Color　　 说明：图标颜色icon　　 类型：IconData 说明：显示的图标semanticLabel 类型：String 说明：语义标签，此标签不会显示在UI中size 类型：double 说明：图标尺寸textDirection 类型：TextDirection 说明：用户呈现图标的文本方向

2. 使用 Material Design 字体图标

Flutter 默认包含了一套 Material Design 的字体图标，在 pubspec.yaml 文件中的配置如下：

flutter: uses-material-design: true

Material Design 所有图标可以在其官网查看：​​'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('图片 & Icon'), ), body: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.accessible,color: Colors.green), Icon(Icons.error,color: Colors.red), Icon(Icons.fingerprint,color: Colors.blue), ], ) ) ); }}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。