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

Posted Kevin-Dev

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter -- 基础组件图片组件 Image & Icon相关的知识,希望对你有一定的参考价值。

文章目录

一、图片

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:
    - images/avatar.png

注意: 由于 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: <Widget>[
              const Text("1.图片",
                textScaleFactor: 1.2,
              ),

              Image(
                  image: AssetImage("images/avatar.png"),
                  width: 100.0
              ),
            ],
          )
      )
    );
  

  • 效果图

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

	Image.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: <Widget>[
              const Text("1.图片",
                textScaleFactor: 1.2,
              ),

              Image(
                image: NetworkImage(
                    "https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg"),
                width: 200.0,
              ),
            ],
          )
      )

    );
  

  • 效果图

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

Image.network(
  "https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg",
  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 所有图标可以在其官网查看:https://material.io/tools/icons/

  • 代码
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: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(Icons.accessible,color: Colors.green),
              Icon(Icons.error,color: Colors.red),
              Icon(Icons.fingerprint,color: Colors.blue),
            ],
          )
      )

    );
  

  • 效果图

以上是关于Flutter -- 基础组件图片组件 Image & Icon的主要内容,如果未能解决你的问题,请参考以下文章

flutter零基础入门(1+1)Image组件和icon组件

Flutter 基本组件之Image

第三节 Flutter Image图片组件的使用

Flutter基础组件06Image

Flutter基础组件06Image

Flutter入门:Image组件