【Flutter】開發之功能篇（七）

前言

這一篇，咱們繼續說實際開發中會用到的一些功能。

• 【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)， 請注意：這個是全局的

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 {
  @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;
    });
  }
}
複製代碼

你的承認，是我堅持更新博客的動力，若是以爲有用，就請點個贊，謝謝