前言

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

• 【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;});} } 復制代碼

你的認可，是我堅持更新博客的動力，如果覺得有用，就請點個贊，謝謝

轉載于:https://juejin.im/post/5ce76bcbe51d457756536704

總結

以上是生活随笔為你收集整理的【Flutter】开发之功能篇（七）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。