前言

在App設(shè)計(jì)中狀態(tài)欄純色的這種設(shè)計(jì)很常見(jiàn)，但是如果狀態(tài)欄需要為白色的時(shí)候就必須為黑色字體。在Android中已經(jīng)有很多成熟的方案來(lái)處理這種情況，那我們現(xiàn)在看看在Flutter中這種情況該怎么處理。

具體設(shè)置

1、設(shè)置主題色

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.red, primaryColor: Colors.white),  //設(shè)置App主題
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

這里的ThemeData即為控制App的主題，primarySwatch設(shè)置即可控制主題的各類顏色，但是這里的顏色是需要MaterialColor，但是純色種的黑色和白色不是MaterialColor。所以不能設(shè)置primarySwatch為Colors.white。
注：MaterialColor包含以下這些

• red,
• pink,
• purple,
• deepPurple,
• indigo,
• blue,
• lightBlue,
• cyan,
• teal,
• green,
• lightGreen,
• lime,
• yellow,
• amber,
• orange,
• deepOrange,
• brown,
• blueGrey,

那么就只能使用其他方式設(shè)置主題為白色。即為設(shè)置

primaryColor: Colors.white

此時(shí)我們可以看到App的狀態(tài)欄如下所示（Android）

2.jpg

2、設(shè)置狀態(tài)欄

雖然AppBar變成了白色，但是狀態(tài)欄是灰色顯然不是我們想要的。
嘗試設(shè)置文字顏色，AppBar的Brightness有兩種模式light和dark

appBar: PreferredSize(
    child: AppBar(
    brightness: Brightness.dark,
    title: Center(
         child: Text(
          "FlutterDemo",
        ),
      ),
   ),
  preferredSize: Size(double.infinity, 60)
),

這個(gè)和SystemUiOverlayStyle的light和dark剛好相反

final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
      ? SystemUiOverlayStyle.light
      : SystemUiOverlayStyle.dark;

然后設(shè)置狀態(tài)欄顏色

import 'dart:io';
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());

  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
        statusBarColor: Colors.red,
//        statusBarBrightness: Brightness.light,
//        statusBarIconBrightness: Brightness.dark
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

    print("systemUiOverlayStyle");
  }
}

設(shè)置為紅色之后，得到以下的樣式，可以看到狀態(tài)欄為紅色了，文字為白色

3.jpg

那么接下來(lái)我們只需要將狀態(tài)欄設(shè)置為白色或者透明，狀態(tài)欄文字設(shè)置為黑色。

void main() {
  runApp(MyApp());

  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,  //設(shè)置為透明
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

最后得到以下視圖

1.jpg

3、推薦AppBar的使用方式

注：使用PreferredSize包裹，可以更得心應(yīng)手哦！

//      appBar: PreferredSize(
//          child: Container(
//            width: double.infinity,
//            height: double.infinity,
//            decoration: BoxDecoration(color: Colors.white, boxShadow: [
//              BoxShadow(color: Color.fromRGBO(0, 0, 0, 0.2), blurRadius: 10.0)
//            ]),
//            child: SafeArea(
//                child: Center(
//              child: Text("FlutterDemo",style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
//            )),
//          ),
//          preferredSize: Size(double.infinity, 60)),
      appBar: PreferredSize(
          child: AppBar(
            backgroundColor: Colors.white,
            brightness: Brightness.light,
            title: Center(
              child: Text(
                "FlutterDemo",
              ),
            ),
          ),
          preferredSize: Size(double.infinity, 60)),

4、其他注意事項(xiàng)

SystemUiOverlayStyle在設(shè)置時(shí)其實(shí)有很多系統(tǒng)或者版本的限制

  /// The color of top status bar.
  ///
  /// Only honored in Android version M and greater.
  final Color statusBarColor;   //設(shè)置狀態(tài)欄顏色，只在Android的M版本以上生效

  /// The brightness of top status bar.
  ///
  /// Only honored in iOS.
  final Brightness statusBarBrightness;  //狀態(tài)欄亮度，只在IOS生效，只有l(wèi)ight和dart模式

  /// The brightness of the top status bar icons.
  ///
  /// Only honored in Android version M and greater.
  final Brightness statusBarIconBrightness;  //狀態(tài)欄Icon亮度，只在Android的M版本以上生效，只有l(wèi)ight和dart模式，和AppBar的brightness相反

其他相關(guān)參考

[Flutter]使用主題
flutter設(shè)置沉浸式狀態(tài)欄

完整代碼

https://github.com/leiyun1993/FlutterDemo-GankIO）