和尚继续整理 Flutter 中日常用到的小知识点。
和尚为了给添加渐变色背景,需要用到 LinearGradient,和尚尝试时发现如下注意。
Widget _decorationWid() {
return ListView(
children: <Widget>[
_childChangeWid(
'两种颜色 均分',
BoxDecoration(
gradient: const LinearGradient(
colors: [Color(0xFFFFC125), Color(0xFFFF7F24)]))),
_childChangeWid(
'多种颜色 均分',
BoxDecoration(
gradient: const LinearGradient(colors: [
Color(0xFFFFC125), Color(0xFFFF7F24), Color(0xFFFF4040)
]))),
_childChangeWid(
'两种颜色 1:3',
BoxDecoration(
gradient: const LinearGradient(colors: [
Color(0xFFFFC125), Color(0xFFFF7F24), Color(0xFFFF7F24), Color(0xFFFF7F24)
]))),
_childChangeWid(
'两种颜色 垂直均分',
BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topRight,
colors: [Color(0xFFFFC125), Color(0xFFFF7F24)]))),
_childChangeWid(
'两种颜色 前半部均分 延伸',
BoxDecoration(
gradient: const LinearGradient(
begin: Alignment(-1.0, 0.0), end: Alignment(0.0, 0.0), tileMode: TileMode.clamp,
colors: [Color(0xFFFFC125), Color(0xFFFF7F24)]))),
_childChangeWid(
'两种颜色 均分 重复',
BoxDecoration(
gradient: const LinearGradient(
begin: Alignment(-1.0, 0.0), end: Alignment(0.0, 0.0), tileMode: TileMode.repeated,
colors: [Color(0xFFFFC125), Color(0xFFFF7F24)]))),
_childChangeWid(
'两种颜色 均分 镜面反射',
BoxDecoration(
gradient: const LinearGradient(
begin: Alignment(-1.0, 0.0), end: Alignment(0.0, 0.0), tileMode: TileMode.mirror,
colors: [Color(0xFFFFC125), Color(0xFFFF7F24)]))),
_childChangeWid(
'两种颜色 设置起始位置与终止位置',
BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topLeft, end: Alignment(0.5, 0.0), tileMode: TileMode.repeated,
colors: [Color(0xFFFFC125), Color(0xFFFF7F24)])))]
);
}
Widget _childChangeWid(var des, Decoration childDec) {
return Container(
height: 60.0, alignment: Alignment.center,
child: Text(des, style: TextStyle(color: Colors.white, fontSize: 16.0)),
margin: const EdgeInsets.fromLTRB(8.0, 3.0, 8.0, 3.0),
decoration: childDec);
}
Flutter 中默认提供了 AppBar 给我们带来了很多便利,但是有需要调整 AppBar 的高度,方式很简单。在 AppBar 外嵌套一层 PreferdSize 即可设置 AppBar 的高度。
appBar: AppBar(
title: Row(children: <Widget>[
Text('标题栏高度测试-默认'),
Expanded(flex: 1, child: Icon(Icons.add))
])),
appBar: PreferredSize(
child: AppBar(
title: Row(children: <Widget>[
Text('标题栏高度测试-80.0'),
Expanded(flex: 1, child: Icon(Icons.add))
])),
preferredSize: Size.fromHeight(80.0)),
和尚以前处理过沉浸式状态栏,效果很不错,但是有时也需要保护状态栏,此时需要 SafeArea 配合一下。通过调整 SafeArea 的 top 的 bool 属性来判断是否保护状态栏,bottom 属性可以在有虚拟返回状态栏的测试机中尝试。
Widget _childTopImgWid() {
return new SafeArea(
top: false,
child: Scaffold(
body: Container(
color: Colors.blue, child: Image.asset('images/icon_top_bg.png'))));
}
Widget _childTopImgWid() {
return new SafeArea(
top: true,
child: Scaffold(
body: Container(
color: Colors.blue, child: Image.asset('images/icon_top_bg.png'))));
}
和尚因业务方面需要使用 Checkbox 选择框,简单学习整理一下。
Tips: Checkbox 与 Android 略有不同,只有状态框没有文字内容。
Checkbox(
value: select,
tristate: true,
activeColor: Colors.pink,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
onChanged: (bool cb) {
setState(() {
select = cb;
});
})
和尚在学习图片时发现一个有意思的属性 colorBlendMode,在 Image 使用时配合 color 共同使用,可以营造很多特殊效果,包括色度色调等,属性众多,建议多多尝试一下。
Widget _mixImgWid() {
return Row(children: <Widget>[
Image.asset('images/icon_launcher.png',
color: Colors.redAccent,
width: 80.0,
colorBlendMode: BlendMode.modulate),
Image.asset('images/icon_launcher.png',
color: Colors.redAccent,
width: 80.0,
colorBlendMode: BlendMode.colorBurn),
Image.asset('images/icon_launcher.png',
color: Colors.redAccent,
width: 80.0,
colorBlendMode: BlendMode.colorDodge),
Image.asset('images/icon_launcher.png',
color: Colors.redAccent,
width: 80.0,
colorBlendMode: BlendMode.difference)
]);
}
如果有不对的地方还希望多多指出。