组件:Icon

作者: 爱玩单机的人 | 来源:发表于2018-11-08 16:46 被阅读0次

    属性说明:

    icon:接收一个IconData对象。
    IconData属性:

    • codePoint:icon在字体库中的Unicode码
    • fontFamily:选择的[codePoint]所指示icon所在的字体族,在pubspec.yaml文件中指定
    • fontPackage:如果引用的是其它Package中的字体,则需要指明包名
    • matchTextDirection:是否匹配文字的阅读习惯(从左往右和从右往左)。如果为true,那么当设置为从右往左时,图像会沿y轴翻转180°展示。

    size:icon的大小,宽高一致,宽高不能单独设置


    color:icon的颜色


    semanticLabel:Icon控件的描述信息


    textDirection:文字阅读方向(TextDirection.ltr,TextDirection.rtl)


    IconData的获取:

    1. 使用自带的Icons类中定义的内容。
      首先在pubspec.yaml中配置
    flutter:
      uses-material-design: true
    

    然后在需要使用Icons类的文件中导入

    import 'package:flutter/material.dart';
    

    最后就可以愉快的使用系统提供的图标了

    1. 使用阿里巴巴的矢量图标库Iconfont。
      首先要生成ttf文件,怎么生成参考这篇文章:使用iconfont.ttf图标文字库代替图标图片
      然后把下载到的ttf文件拷贝到自己项目中,我是放在static/font下,保留demo.css和demo_uniconde.html文件是为了方便的查找需要的图标的Unicode码

      接着在pubspec.yaml中配置
    #  family名字自己指定
    fonts:
          - family: myIconfont
            fonts:
              - asset: static/fonts/iconfont.ttf
    

    最后就可以愉快的使用我们自己的图标字体库了

    new IconData(0xe612, fontFamily: 'myIconfont', matchTextDirection: false);
    

    相关文章

      网友评论

        本文标题:组件:Icon

        本文链接:https://www.haomeiwen.com/subject/wwpwxqtx.html