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

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

思路如下

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

状态栏

• 状态栏颜色

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

取得状态栏高度即可。

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,
          ),
        ],
      ),
    );
复制代码

属性

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

• 字体颜色

使用 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],
          )),
        ),
      )
复制代码

返回键监听

可以 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;
    });
  }
}
复制代码