flutter筆記匯總

const Icon(
  IconData icon,                          //具體展示的圖標
 {                      
    Key key,
    double size,                          //字體大小
    Color color,                          //顏色
    String semanticLabel,                   //語義標簽
    TextDirection textDirection            //icon里可以添加文本，文本的書寫方向
  }
)

官方給出了4種icon
Icons：基礎的圖標。
IconButton：交互式圖標，就是圖標按鈕。
IconTheme：為圖標提供環(huán)境配置。
ImageIcon：自定義圖片圖標。

1、Icons

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: Icon(
            Icons.add,
            size: 50.0,
            color: Colors.blue
          )
        )
      )
    );
  }
}

比較簡單，設置字體大小顏色。flutter內置了material的icon，所有icon看這里 design.google.com/icons/直接用就可以。（打不開？自己想辦法）

自定義字體圖標

不想用material提供的圖標，想自定義？可以，看下面
1、首先生成一個字體：
可以去這里https://www.iconfont.cn/
也可以去這里https://icomoon.io/app/#/select
下載一個字體圖標包，解壓。
2、在項目根目錄下新建一個fonts文件夾，把tff格式的字體放到文件夾下。
3、在pubspec.yaml中添加字體

flutter:
  uses-material-design: true
  fonts:
    - family: myIcon  #指定一個字體名
      fonts:
        - asset: fonts/icomoon.ttf

4、使用字體圖標

body: new Container(
  alignment: Alignment.center,
  child: Icon(
    IconData(
      0xe90c,                    //去下載的字體包里找到css文件，把字體的`content`粘過來，別忘了加`0x`表示十六進制
      fontFamily: 'myIcon'      //自定義的字體名
    )
  )
)

2、IconButton

Icon里有這貨，Button里也有這貨，不純潔。
寫在Icon里吧，下一篇寫Button就不寫他了。

const IconButton({
  Key key,
  double iconSize: 24.0,                                        //字體大小
  EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),        //按鈕的內邊距
  AlignmentGeometry alignment: Alignment.center,                //圖標的對齊方式
  @required Widget icon,                                         //圖標
  Color color,                                                  //圖標字體顏色
  Color focusColor,                                             //獲得焦點時的顏色?
  Color hoverColor,                                              //鼠標懸停時的顏色？
  Color highlightColor,                                         //按鈕按下時的背景顏色
  Color splashColor,                                           //點擊時，水波動畫中水波的顏色
  Color disabledColor,                                          //禁用時的顏色
  @require VoidCallback onPressed,                              //點擊按鈕的回調函數(shù)
  FocusNode focusNode,                                          //
  String tooltip                                                 //點擊按鈕的提示語
})

上代碼，看demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: IconButton(
            icon: new Icon(Icons.add),
            iconSize: 24.0,
            padding: const EdgeInsets.all(4.0),
            alignment: Alignment.centerLeft,
            color: Colors.red,
            highlightColor: Colors.blue,
            splashColor: Colors.green,
            tooltip: 'test',
            onPressed: () {
              print(1);
            },
          )
        )
      )
    );
  }
}

這是個圓形的按鈕。
focusNode和focusColor推測是配合使用，和可以獲得焦點的節(jié)點聯(lián)動，獲得焦點改變圖標顏色，還未實驗，歡迎補充。
tooltip是要長按才出現(xiàn)提示，點擊不會出現(xiàn)，highlightColor也是需要長按。
hoverColor推測是桌面端和web端用的，畢竟移動端沒發(fā)hover。
調整iconSize/alignment/padding會發(fā)現(xiàn)IconButton是有一個固定的寬高尺寸的，不可設置。

3、IconTheme

這貨只有child和data，在data里配置樣式。

const IconThemeData({
  Color color,
  double opacity,
  double size
})

樣式也不多，下面上代碼，看用法。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: IconTheme(
            data:  IconThemeData(color: Colors.red, opacity: 0.5, size: 30.0),
            child: Container(
              child: new Icon(Icons.add)
            )
          )
        )
      )
    );
  }
}

可以看到這里IconTheme的子節(jié)點，不一定必須是Icon，這里是個Container。
IconTheme相當于一個裝飾器，對其下面的所有圖標樣式統(tǒng)一設置。

4、ImageIcon

const ImageIcon(
  ImageProvider image,
  {
    Key key,
    double size,
    Color color,
    String semanticlabel
  }
)

用一張圖片做icon，和Image加color效果基本相同，不管什么花里胡哨的圖片，都渲染成純色，這里一定要用png這種背景透明的圖片。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: ImageIcon(
            AssetImage('images/logo.png'),
            color: Colors.red,
            size: 50.0
          )
        )
      )
    );
  }
}

Icon到這里基本上就結束了。