https://book.flutterchina.club/chapter3/text.html 這里面詳細(xì)介紹了各種常用UI，下面是開發(fā)用到的，做個(gè)總結(jié)：

• ClipRRect：讓矩形的Widget變圓角

ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: ,
                    )

• ClipOval：切圓形
• ClipPath：切路徑
• SafeArea：處理劉海屏的顯示位置
• 單例的創(chuàng)建

class Manager {
  static Manager get instance => _getInstance();
  static Manager _instance;

  Manager._internal() {}

  static Manager _getInstance() {
    if (_instance == null) {
      _instance = Manager._internal();
    }
    return _instance;
  }
}

• WillPopScope：導(dǎo)航返回?cái)r截

WillPopScope(
        onWillPop: () async {
//_lastPressedAt上次點(diǎn)擊時(shí)間
          if (_lastPressedAt == null ||                  
              DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
            //兩次點(diǎn)擊間隔超過(guò)1秒則重新計(jì)時(shí)
            _lastPressedAt = DateTime.now();
            return false;
          }
          return true;
        },
        child: Container(
          alignment: Alignment.center,
          child: Text("1秒內(nèi)連續(xù)按兩次返回鍵退出"),
        )
    )

返回 Future.value(false); 表示不退出.
返回 Future.value(true); 表示退出.

• InkWell：點(diǎn)擊出現(xiàn)水波紋效果

InkWell(
                onTap: (){  //不設(shè)置不會(huì)出現(xiàn)水波紋效果
                  print('點(diǎn)擊');
                },
                child: Text('點(diǎn)擊出現(xiàn)水波紋效果'),
              ),

Ink控件用于在[Material]控件上繪制圖像和其他裝飾，以便[InkWell]、[InkResponse]控件的“水波紋”效果在其上面顯示

 Ink(decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.center,
                          end: Alignment.center,
                          colors: [Color(0xFFDE2F21), Color(0xFFEC592F)]),
                      borderRadius: BorderRadius.all(Radius.circular(20))),
                      child: InkWell(
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                        child: Container(
                          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                          child: Text(
                            '這是InkWell的點(diǎn)擊效果',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        onTap: () {},
                      ),),

• RichText：富文本，和TextSpan配合使用

 RichText(
                                text: TextSpan(children: <TextSpan>[
                              TextSpan(
                                  text: '123',
                                  style: TextStyle(color: Colors.red)),
                              TextSpan(
                                  text: '456',
                                  style: TextStyle(color: Colors.greenAccent))
                            ])),

• Drawer：抽屜效果

Scaffold(
        drawerScrimColor: Color(0x4D333333),
        drawer: new MyDrawer(),  //自定義mydrawer
        backgroundColor: Colors.black,
        body:…
)
Scaffold.of(context).openDrawer(); //顯示drawer

• Dart 沒有關(guān)鍵詞 public 、private 等修飾符，_ 下橫向直接代表 private ，但是有 @protected 注解 。

跳轉(zhuǎn)到跟路由

Navigator.popUntil(context, (route) => route.isFirst);
Navigator.popUntil(context, ModalRoute.withName('xxx'));
Navigator.popUntil(context, ModalRoute.withName(Navigator.defaultRouteName));

設(shè)置狀態(tài)欄顏色

AppBar(
    brightness: Brightness.light,   //light為黑色   dark為白色
  )

//有修改
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);  //light為白色