前言
笔者最近在看 Flutter Widget of the Week:https://www.youtube.com/watch?v=b_sQ9bMltGU,并落地了代码 FlutterLearningRecord:https://github.com/fluttercndev/FlutterLearningRecord。在本文中,笔者将分享几个 Widget 的使用场景及使用方式。在本文中,笔者会介绍如下Widget:SafeArea、Expanded、Wrap、AnimatedContainer、Opacity、FutureBuilder、在BottomAppBar居中的 FloatingActionButton。
首先给大家展示下目前笔者做的常用 Widget 的效果。
一、常用 Widget Demo 效果
笔者上方的常用 Widget Demo 效果图,展示了SafeArea、Expanded、Wrap、AnimatedContainer、Opacity、FutureBuilder、在底部AppBar居中的 FloationgActionButton的使用场景及使用效果。
Widget | 使用场景 |
SafeArea | 用于带头帘、下巴的设备 |
Expanded | 用于Row、Column中的子Widget布局完后,撑开剩余空间 |
Wrap | 用于包裹可能子Widget可能越过屏幕边界的场景,使子Widget可以换行 |
AnimatedContainer | 用于给子Widget做动画效果 |
Opacity | 用于对子Widget做不透明度处理 |
AnimatedOpacity | 用于给子Widget的不透明度变化过程做动画 |
FutureBuilder | 用于耗时任务,耗时执行完后返回请求到的数据 |
FloationActionButton | 可以在BottomAppBar底部居中,一定程度适用发布视频文章,也可在屏幕中其他位置悬浮 |
下边给大家简单介绍下上边的Widget的使用方式。
二、常用 Widget 使用方式
1
SafeArea
1.1
不带SafeArea 示意图
1.2
带SafeArea 示意图
使用 SafeArea 作为 body 的子 Widget,原来的子 Widget 作为 SafeAreade 的子 Widget;
1.3
SafeArea 示例代码
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: ListView(
children: <Widget>[
_randomColorContainer(),
],
),
),
);
}
2
Expanded
2.1
左右 Expanded(黄色部分Widget) 分别占剩余空间的2:1
Expanded 会显然同级的其他 Widget 先布局,之后剩余的空间,Expanded 才会去占用。
当有多个Expanded时,Expanded的 flex 参数,用于指定要占空白的空间的比例。
2.2
Expaned 示例代码
Row _expandedRow3() {
return Row(
children: <Widget>[
Text(
'3.LeftText',
style: TextStyle(fontSize: 32.0, backgroundColor: Colors.greenAccent),
),
Expanded(
flex: 2,
child: Container(
height: 20.0,
color: Colors.yellow,
)),
Container(
color: Colors.blue,
width: 100.0,
// width: 10.0,
height: 50.0,
child: Text(
'C',
style:
TextStyle(fontSize: 32.0, backgroundColor: Colors.greenAccent),
),
),
Expanded(
flex: 1,
child: Container(
height: 20.0,
color: Colors.yellow,
)),
Container(
width: 100.0,
height: 50.0,
child: Text(
'Right',
style:
TextStyle(fontSize: 32.0, backgroundColor: Colors.greenAccent),
),
),
],
);
}
3
Wrap
3.1
Wrap Demo 示意图
1.2
Wrap 示例代码
Wrap horizontalWrap(int index) {
return Wrap(
// 默认主轴为水平方向
// direction: Axis.horizontal,
children: <Widget>[
horizontalRandomColorWrapContainer(index++),
horizontalRandomColorWrapContainer(index++),
horizontalRandomColorWrapContainer(index++),
horizontalRandomColorWrapContainer(index++),
],
);
}
4
AnimatedContainer
4.1
AnimatedContainer 执行动画前示意图
4.2
AnimatedContainer 执行动画后示意图
AnimatedContainer 执行前后,改变了 Widget 的背景色、宽度、高度、子 Widget 的对齐方式。
4.3
AnimatedContainer 示例代码
AnimatedContainer(
onEnd: () {
print('动画结束');
},
child: DecoratedBox(
child: FlutterLogo(size: halfContainerWH,),
decoration: BoxDecoration(
//TODO: borderRadius 效果
borderRadius: selected ? BorderRadius.all(Radius.circular(25.0)) : BorderRadius.all(Radius.circular(0)),
)),
duration: Duration(seconds: 2),
curve: Curves.linearToEaseOut,
width: selected ? halfContainerWH : containerWH,
height: selected ? containerWH : halfContainerWH,
alignment: selected ? Alignment.topCenter : Alignment.center,
color: selected ? Colors.purpleAccent : Colors.blueGrey),
5
Opacity
5.1
Opacity 的不透明度
5.2
Opacity 示例代码
Opacity(
opacity: 1.0,
child: Container(
decoration: BoxDecoration(color: Colors.blue),
child: Text(
'Opacity: 1.0',
style: TextStyle(
color: Colors.white,
backgroundColor: Colors.blue,
fontSize: 24.0),
),
),
// child: Text('Opacity:1.0'),
),
6
AnimatedOpacity
6.1
AnimatedOpacity 改变透明度前
6.2
AnimatedOpacity 改变透明度后
6.3
AnimatedOpacity 示例代码
AnimatedOpacity(
onEnd: () {
print('动画结束');
},
opacity: animatedOpacityValue,
duration: Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
child: FlutterLogo(size: 100.0),
),
7
FutureBuilder
7.1
FutureBuilder 效果图
7.2
FutureBuilder 示例代码
FutureBuilder(
future: Dio().get('https://api.github.com/orgs/flutterchina/repos'),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
Response response = snapshot.data;
// 请求结果有误,显示错误信息
if (snapshot.hasError) {
return Text(snapshot.error.toString());
}
// 显示请求结果
return ListView(
children: response.data
.map<Widget>((obj) => ListTile(
title: Text(obj["name"]),
subtitle: Text(obj["full_name"])))
.toList(),
);
} else if (snapshot.connectionState == ConnectionState.waiting) {
} else if (snapshot.connectionState == ConnectionState.none) {
}
// 请求过程中返回进度指示器
return CircularProgressIndicator(
strokeWidth: 10.0,
semanticsLabel: '请稍候...',
);
}),
8
FloationgActionButton
8.1
居中 FloatingActionButton 效果
8.2
FloationActionButton 居中示例代码
floatingActionButton: FloatingActionButton(
// child: Text('FAB'),
child: Icon(Icons.add),
onPressed: () {
print('点击FAB');
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.blue,
child: Container(
height: 44.0,
),
),
三、Demo
1
Demo下载地址
1.1
FlutterLearingRecord
Demo 下载地址:FlutterLearningRecord:https://github.com/fluttercndev/FlutterLearningRecord
四、参考学习网址
- https://flutter.cn
- https://flutter.dev/docs/get-started/web
- https://flutter.dev/docs/
- https://book.flutterchina.club
- https://book.flutterchina.club/chapter14/
- http://gityuan.com/2019/06/29/flutter_run_app/
- https://juejin.im/post/5cce7042518825415234792d
- https://www.jianshu.com/p/094fab99cec6
- https://juejin.im/post/5d6ce03ef265da03ab426881