????? 魏什么_多喝水 Flutter 之路

阿里圖庫

簡介

Flutter 中，可以像 web 開發(fā)一樣使用 iconfont，iconfont 即“字體圖標”，它是將圖標做成字體文件，然后通過指定不同的字符而顯示不同的圖片。用于顯示 iconfont 的就是 Icon Widget。

iconfont 和圖片相比有如下優(yōu)勢：

1. 體積?。嚎梢詼p小安裝包大小。
2. 矢量的：iconfont 都是矢量圖標，放大不會影響其清晰度。
3. 可以應用文本樣式：可以像文本一樣改變字體圖標的顏色、大小對齊等。
4. 可以通過 TextSpan 和文本混用。

實例

1. Icon

class Icon extends StatelessWidget {
  /// Creates an icon.
  ///
  /// The [size] and [color] default to the value given by the current [IconTheme].
  const Icon(
    this.icon, {   
    Key key,
    this.size,           //大小
    this.color,          //顏色
    this.semanticLabel,  //語義標簽
    this.textDirection,  //icon文字方向
  }) : super(key: key);

列子:

Container(
  width: 300,
  height: 300,
  color: Colors.lightGreenAccent,
  child: Icon(
    Icons.favorite,
    color: Colors.orange,
    size: 200,
  ),
),

image.png

2. IconData

class IconData {

  const IconData(
    this.codePoint, {   //該圖標在字體中的編碼  
    this.fontFamily,    //所屬字體
    this.fontPackage,   //字體所屬的包
    this.matchTextDirection = false, //是否啟用鏡像，向左還是向右
  });

列子:

 Container(
  width: 100,
  height: 100,
  color: Colors.lightGreenAccent,
  child: Icon(
    IconData(
        0xe914,
        fontFamily: 'MaterialIcons',
        matchTextDirection: true
    ),
    color: Colors.red,
    size: 30,
    textDirection: TextDirection.rtl,
  ),
),
Container(
  width: 100,
  height: 100,
  color: Colors.blueGrey,
  child: Icon(
    IconData(
        0xe914,
        fontFamily: 'MaterialIcons',
        matchTextDirection: true
    ),
    color: Colors.red,
    size: 30,
    textDirection: TextDirection.ltr,
  ),
),

image.png

3. ImageIcon

class ImageIcon extends StatelessWidget {
  const ImageIcon(
    this.image, { //ImageProvider類型  用于加載具體的圖片 
    Key key,
    this.size,    //大小
    this.color,   //想要顯示的顏色
    this.semanticLabel,
  }) : super(key: key);

ImageProvider是一個抽象類，其子類包括

• AssetImage 資源圖片
• FileImage 文件圖片
• NetworkImage 網絡圖片
• MemoryImage 內存圖片

加載如Image一樣

ImageIcon(
  AssetImage("image/flutter1.png"),
  size: 50,//默認黑色
),
ImageIcon(
  AssetImage("image/flutter1.png"),
  size: 50,
  color: Colors.orangeAccent,
),
ImageIcon(
  AssetImage("image/flutter1.png"),
  size: 50,
  color: Colors.blue,
),

image.png

4. IconButton

 const IconButton({
    Key key,
    this.iconSize = 24.0,       //默認大小
    this.padding = const EdgeInsets.all(8.0), //內間距
    this.alignment = Alignment.center,  //對齊方式
    @required this.icon,
    this.color,     
    this.focusColor,
    this.hoverColor,
    this.highlightColor, //長按后不松手時顯示的顏色
    this.splashColor,    //點擊一下時閃爍的顏色
    this.disabledColor,  //不可用時的顏色
    @required this.onPressed, //點擊后觸發(fā)的方法
    this.focusNode,
    this.autofocus = false,
    this.tooltip,    //長按后的提示語
    this.enableFeedback = true,
  }) : assert(iconSize != null),
       assert(padding != null),
       assert(alignment != null),
       assert(autofocus != null),
       assert(icon != null),
       super(key: key);

例子:

IconButton(
  iconSize: 50,
  icon: Icon(
    Icons.android,
    color: Colors.deepPurple,
  ),
  onPressed: () {
    print(234);
  },
  highlightColor: Colors.green,//長按后不松手時顯示的顏色
  splashColor: Colors.blue,//點擊一下時閃爍的顏色
  disabledColor: Colors.grey,//不可用時的顏色
  tooltip: "copy",//長按后的提示語
),

我發(fā)現這個有的時候在iOS 模擬器中不好使,先留著,以后再研究下~