前言

这一篇，我们继续说实际开发中会用到的一些功能。

• 【Flutter】开发之目录

启动页

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><bitmapandroid:gravity="center"android:src="@mipmap/ic_launcher" /></item>
</layer-list>
复制代码

如果有更进一步的需求，比如说要在启动页加载广告图，并延时几秒的功能，就需要自己实现了。

思路如下

在main方法中返回自己定义的SplashWidgit(名字随便起)，在其中处理自己的逻辑，包括加载广告图、设置延时等，延时结束后，跳转至真正的主页即可。

状态栏

• 状态栏颜色

1.使用MaterialApp的theme属性，theme: ThemeData(primaryColor: Colors.green)， 请注意：这个是全局的

2.使用AppBar的backgroundColor属性，backgroundColor: Colors.deepOrange 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,),],),);
复制代码

甚至你可以修改为渐变色，修改Container的decoration属性

          decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.cyan, Colors.brown, Colors.deepOrange],)),
复制代码

• 字体颜色

使用AppBar的brightness属性：Brightness.light为黑色，Brightness.dark为白色；

不使用AppBar时，可以通过嵌套AnnotatedRegion<SystemUiOverlayStyle>来实现。

class StatusDemo extends StatelessWidget {@overrideWidget 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],)),),)
复制代码

返回键监听

可以WillPopScope 嵌套，可以用于监听处理返回键的逻辑。其实WillPopScope 并不是监听返回按键，是当前页面将要被pop时触发的回调。

class _StatusDemoState extends State<StatusDemo> {@overrideWidget 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;@overrideWidget 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;});}
}
复制代码

你的认可，是我坚持更新博客的动力，如果觉得有用，就请点个赞，谢谢