<listing id="r7f1v"></listing>
<listing id="r7f1v"><var id="r7f1v"></var></listing><listing id="r7f1v"><cite id="r7f1v"><i id="r7f1v"></i></cite></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<thead id="r7f1v"><cite id="r7f1v"></cite></thead>
<listing id="r7f1v"></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<progress id="r7f1v"><var id="r7f1v"></var></progress>
<listing id="r7f1v"></listing>
APP開發平臺 > Blog > Flutter開發中使用Icon圖標

Flutter開發中使用Icon圖標介紹。

一 Icon概述

Icon是支持material design的一系列圖標

Icon類似于iconfont即字體圖標,它是將圖標做成字體文件,然后通過指定不同的字符顯示不同圖片

二 Icon說明

2.1 說明

在字體文件中,每一個字符都對應一個位碼,而每一個位碼對應一個顯示字形,不同的字體就是指字形不同,即字符對應的字形是不同的。而在iconfont中,只是將位碼對應的字形做成了圖標,所以不同的字符最終就會渲染成不同的圖標

2.2 icon與Image相比的優勢

體積?。嚎梢詼p小安裝包大小。

矢量的:iconfont都是矢量圖標,放大不會影響其清晰度。

可以應用文本樣式:可以像文本一樣改變字體圖標的顏色、大小對齊等。

可以通過TextSpan和文本混用。

三 Icon如何使用

3.1 使用Material Design字體圖標

Flutter默認包含了一套Material Design的字體圖標,在pubspec.yaml文件中的配置如下

flutter:

  uses-material-design: true

3.2 Icon單獨作為圖標使用

Icon(Icons.favorite, color: Colors.pink, size: 24.0, semanticLabel: 'Text to announce in accessibility modes',),

Icon(Icons.audiotrack, color: Colors.green, size: 30.0,),

Icon(Icons.beach_access, color: Colors.blue, size: 36.0,),


3.3 Icon作為圖標字體使用

String icons = "字符串:"+"\uf396" + " \uE000" + " \uE90D";

Text(icons, style: TextStyle(

                fontFamily: "MaterialIcons",

                fontSize: 24.0,

                color: Colors.green),

          )


說明:

static const IconData favorite = IconData(0xe721, fontFamily: 'MaterialIcons')

Icons.favorite對應的16進制字符編碼為0xe721

``\u`后面鏈接的是16進制Unicode編碼,用于將16進制編碼轉換成中文、英文字母、標點符號、特殊特號等字符串

轉換前 轉換后

0xf396 \uf396

0xe000 \ue000

0xe90d \ue90d

2022-07-25 來源:APICloud

Flutter Icon Icon圖標

高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
欧美激情一区二区,国产精品区免费视频,欧美激情视频在线播放,久久久亚洲综合久久98,久久国产精品99精品国产