第七节:Flutter中Icon字体图标的使用

前沿:

Flutter中，可以像Web开发一样使用iconfont，iconfont即“字体图标”

字体图标: 将图标做成字体文件,通过指定不同的字符而显示不同的图片

flutter中,iconfont比图片的优势

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

1 Flutter中字体图标的使用

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

flutter:
  uses-material-design: true

示例:

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                // Text文本组件中使用字体图标
                child: Text(
                    "\uE914",
                    style: TextStyle(
                        fontFamily: "MaterialIcons",
                        fontSize: 24.0,
                        color:Colors.green
                    )
                ),

                decoration: BoxDecoration(
                    color: Colors.yellow,     // decoration中也有color,背景颜色

                )
            )
        );
    }
}

2. `IconData`和`Icon`

上个示例中,我们正常的现实图标,使用图标就像在使用文本一样,

但是这种方式需要我们提供每个图标的码点:\uE914就不是特别友好

因此,Flutter封装为了IconData和Icon来专门现实字体图标

说明:

Icon是图标组件
IconData是表示图标数据结合, 用Icons.图标名称来使用IconData中的某一个图标

因此上面的代码也可以如下实现:

示例代码

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(

                // 容器组件中直接使用Icon图标组件
                child: Icon(
                    Icons.accessible,   // 这就是Icon组件中 IconData中的一个
                    color:Colors.green,  // 字体图标颜色
                    size: 48.0           // 字体图标大小
                )
                ,

                decoration: BoxDecoration(
                    color: Colors.yellow,     // decoration中也有color,背景颜色

                ),
            )
        );
    }
}

Icons类中包含了所有Material Design图标的IconData静态变量定义。

3. 自定义图标

我们除了可以使用Flutter的Material 风格自带的图标外,还可以使用阿里图标(iconfont.cn)中的图标自定义Flutter中的图标使用

3.1 首先下载阿里图标

阿里图标_图1.png

3.2 配置自定义图标

说明

阿里图标下载成功后,将后缀名为.ttf的文件找出
将.ttf移到项目的fonts文件夹中

在yaml文件中配置字体图标

fonts:
 - family: myIcon   # 指定字体名
 fonts:
     - asset: fonts/iconfont.ttf  # 字体图标文件

3.3 自定义字体组件

说明:

为了方便使用,就像Icons的使用方式一样,
我们需要自己定义一个MyIcons类,将字体文件中的所有图标都定义为静态变量

// 自定义图标类
class MyIcons{
    // student 学生管理图标
    static const IconData student = const IconData(
        0xe61d,
        fontFamily: 'myIcon',
        matchTextDirection: true
    );
    //  课程管理图标
    static const IconData course = const IconData(
        0xe659,
        fontFamily: 'myIcon',
        matchTextDirection: true
    );
}

3.4 使用自定义图标组件

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(

               
                child:Icon(
                    MyIcons.student,  // 自定义图标
                    color:Colors.green,
                    size: 50.0
                ),

                decoration: BoxDecoration(
                    color: Colors.yellow,     // decoration中也有color,背景颜色

                ),
            )
        );
    }
}