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(
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为白色