flutter 引入第三方 Icon 图标（以阿里图标库为例)

╰+攻爆jí腚メ 2023-08-17 15:59 74阅读 0赞

**在fluttter中引入第三方图标库的具体方法：**

1.在阿里图标库选好需要用的图标，添加进购物车将选好的图标打包下载到本地（下载代码），复制iconfont.ttf文件到项目中

2.存放途径：lib/assets/icons/iconfont.ttf

3.打开项目根目录中的pubspec.yaml文件，在flutter中增加配置【**默认里面有配置案例注释修改一下就可以了**】，MyIcons为自定义名称

flutter:
    
      fonts:
        - family: MyIcons
          fonts:
            - asset: lib/assets/icons/iconfont.ttf

4.在项目中引用：

import 'package:flutter/material.dart';
    class TestDemoPage extends StatefulWidget {
      TestDemoPage({Key key}) : super(key: key);
    
      _TestDemoPageState createState() => _TestDemoPageState();
    }
    
    class _TestDemoPageState extends State<TestDemoPage> {
      @override
      Widget build(BuildContext context) {
        return Container(
           child: Scaffold(
             appBar: AppBar(
               title: Text('测试案例页面'),
             ),
             body: Column(
               children: <Widget>[
                 Container(
                   child:Icon(IconData(0xe714,fontFamily:'MyIcons')),
                 )
               ],
             ),
           ),
        );
      }
    }

其中：IconData()里面，第一个参数为codePoint，代表图标字体存储的Unicode，这个可以在打开下载文件中的HTML文件查看，**将 &\# 字符替换为 0 即可，fontFamily：后面跟自定义的字体图标名称，我这里是MyIcons**

顺便一提：flutter底部导航这里有个规则：

BottomNavigationBarType.fixed，当少于四个项目时的默认值。如果选中的项为非null，则使用fixedColor渲染，否则使用主题的ThemeData.primaryColor。导航栏的背景颜色是默认的材质背景颜色，ThemeData.canvasColor（基本上是不透明的白色）。  
BottomNavigationBarType.shifting，当有四个或更多项时的默认值。所有项目都以白色呈现，导航栏的背景颜色与所选项目的BottomNavigationBarItem.backgroundColor相同 。在这种情况下，假设每个项目将具有不同的背景颜色，并且背景颜色将与白色形成鲜明对比。

我当时参照的教程，底部导航只有三个，到我自己想写一个时，我搞了四个导航，结果一出来效果完全不同，当时就懵逼了，后来看了api才知道是这个原因，如果想要三个以上导航也按照 fixed 模式设置，可以增加参数：

bottomNavigationBar: BottomNavigationBar(  
...  
// 大于3个项，默认设置为BottomNavigationBarType.shifting,此处根据需求可更改  
type:BottomNavigationBarType.fixed,  
...  
),  
原文地址：https://blog.csdn.net/shuaizi96/article/details/88550217

转载于:https://www.cnblogs.com/yiweiyihang/p/11536024.html

flutter 引入第三方 Icon 图标（以阿里图标库为例)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读