前言
这一篇，我们继续说实际开发中会用到的一些功能。
启动页
Android启动页
在 android/app/src/main/res/drawable/launch_background.xml中已经有写好的启动页，只需修改即可
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/ic_launcher" />
</item>
</layer-list>
如果有更进一步的需求，比如说要在启动页加载广告图，并延时几秒的功能，就需要自己实现了。
思路如下
在main方法中返回自己定义的SplashWidgit(名字随便起)，在其中处理自己的逻辑，包括加载广告图、设置延时等，延时结束后，跳转至真正的主页即可。
状态栏
- 状态栏颜色
1.使用MaterialApp的theme属性，theme: ThemeData(primaryColor: Colors.green)， 请注意：这个是全局的
image.png
2.使用AppBar的backgroundColor属性，backgroundColor: Colors.deepOrange
image.png
3.不使用AppBar，由于Flutter默认是从屏幕最顶部开始布局，所以，修改状态栏颜色简直太容易，只需要通过MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top取得状态栏高度即可。
Container(
color: Colors.white,
child: Column(
children: <Widget>[
Container(
//状态栏高度
height: MediaQueryData.fromWindow(WidgetsBinding.instance.window)
.padding
.top,
color: Colors.blue,
),
Container(
height: 200,
color: Colors.brown,
),
],
),
);
image.png
甚至你可以修改为渐变色，修改
Container的decoration属性
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.cyan, Colors.brown, Colors.deepOrange],
)),
image.png
- 字体颜色
使用AppBar的brightness属性：Brightness.light为黑色，Brightness.dark为白色；
不使用AppBar时，可以通过嵌套AnnotatedRegion<SystemUiOverlayStyle>来实现。
class StatusDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: AnnotatedRegion<SystemUiOverlayStyle>(
child: Column(
children: <Widget>[
Container(
height: 200,
color: Colors.brown,
),
],
),
value: SystemUiOverlayStyle(
statusBarColor: Colors.cyan,
//有Appbar时，会被覆盖
statusBarIconBrightness: Brightness.light,
//底部navigationBar背景颜色
systemNavigationBarColor: Colors.white),
),
);
}
}
- 渐变色
使用AppBar的flexibleSpace，其中渐变方式还可选择RadialGradient和SweepGradient
appBar: AppBar(
title: Text('DemoPage'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.cyan, Colors.brown, Colors.deepOrange],
)),
),
)
image.png
返回键监听
可以WillPopScope 嵌套，可以用于监听处理返回键的逻辑。其实WillPopScope 并不是监听返回按键，是当前页面将要被pop时触发的回调。
class _StatusDemoState extends State<StatusDemo> {
@override
Widget build(BuildContext context) {
return WillPopScope(
child: StatusWidget(),
onWillPop: () {
///如果返回 return new Future.value(false); popped 就不会被处理
///如果返回 return new Future.value(true); popped 就会触发
///这里可以通过 showDialog 弹出确定框，在返回时通过 Navigator.of(context).pop(true);决定是否退出
return showExitDialog(context);
},
);
}
Future<bool> showExitDialog(BuildContext context) {
return showDialog(
context: context,
builder: (BuildContext content) {
return AlertDialog(
title: Text("提示"),
content: Text("确认退出吗？"),
actions: <Widget>[
GestureDetector(
child: Container(
child: Text('退出'),
),
onTap: () {
Navigator.of(context).pop(true);
},
),
GestureDetector(
child: Container(
child: Text('取消'),
),
onTap: () {
Navigator.of(context).pop();
},
),
],
);
});
}
}
选取图片
使用的是Flutter提供的image_picker
首先，在pubspec.yaml文件中添加依赖image_picker: '0.6.0+8'
class TakeDemo extends StatefulWidget {
@override
_TakeDemoState createState() => _TakeDemoState();
}
class _TakeDemoState extends State<TakeDemo> {
File _image;
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: EdgeInsets.only(top: 20),
alignment: AlignmentDirectional.center,
child: Column(
children: <Widget>[
FlatButton(
onPressed: () {
getImage();
},
child: Text('从相册选择'),
),
Center(
child: _image == null
? Text('No image selected.',style: TextStyle(fontSize: 14),)
: Image.file(_image),
),
],
),
);
}
Future getImage() async {
//gallery相册，camera拍照
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
}
20190524_114834.gif
网友评论