Flutter-小结

https://book.flutterchina.club/chapter3/text.html 这里面详细介绍了各种常用UI，下面是开发用到的，做个总结：

ClipRRect：让矩形的Widget变圆角

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

ClipOval：切圆形
ClipPath：切路径
SafeArea：处理刘海屏的显示位置
单例的创建

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

  Manager._internal() {}

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

WillPopScope：导航返回拦截

WillPopScope(
        onWillPop: () async {
//_lastPressedAt上次点击时间
          if (_lastPressedAt == null ||                  
              DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
            //两次点击间隔超过1秒则重新计时
            _lastPressedAt = DateTime.now();
            return false;
          }
          return true;
        },
        child: Container(
          alignment: Alignment.center,
          child: Text("1秒内连续按两次返回键退出"),
        )
    )

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

InkWell：点击出现水波纹效果

InkWell(
                onTap: (){  //不设置不会出现水波纹效果
                  print('点击');
                },
                child: Text('点击出现水波纹效果'),
              ),

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的点击效果',
                            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 没有关键词 public 、private 等修饰符，_ 下横向直接代表 private ，但是有 @protected 注解。

跳转到跟路由

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

设置状态栏颜色

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

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

最后编辑于：2020.07.24 18:53:44