Flutter改變狀態列字型、狀態列背景顏色、Appbar背景顏色的方式

o動感超人o發表於2020-06-22
FlutterAPP

1. 改變狀態列字型顏色

有2種方式，注意這裡只能改變狀態列字型顏色為白色或者黑色

void main() {
  runApp(
    MaterialApp(
      home: App(),
    ),
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        appBarTheme: AppBarTheme.of(context).copyWith(
          // 方式1
          brightness: Brightness.light,
        ),
      ),
      child: Scaffold(
        appBar: AppBar(
          // 方式2,在這裡設定的話會覆蓋上面的方式1
          brightness: Brightness.dark,
        ),
        body: Container(),
      ),
    );
  }
}
複製程式碼

2. 單獨改變狀態列背景顏色

單獨改變狀態列顏色很簡單


SystemUiOverlayStyle uiStyle = SystemUiOverlayStyle.light.copyWith(
  statusBarColor: Colors.red,
);

void main() {
  // 單獨改變狀態列顏色
  SystemChrome.setSystemUIOverlayStyle(uiStyle);
  runApp(
    MaterialApp(
      home: App(),
    ),
  );
}
複製程式碼

3. 同時改變狀態列背景顏色和AppBar背景顏色

void main() {
  runApp(
    MaterialApp(
      home: App(),
    ),
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        appBarTheme: AppBarTheme.of(context).copyWith(
          // 方式1
          color: Colors.yellow,
        ),
      ),
      child: Scaffold(
        appBar: AppBar(
          // 方式2,在這裡設定的話會覆蓋上面的方式1
          backgroundColor: Colors.deepPurpleAccent,
        ),
        body: Container(),
      ),
    );
  }
}
複製程式碼

總結

在這裡強調一下，為什麼會有屬性被覆蓋的情況，其實看原始碼就知道，在_AppBarState的build方法裡，如果brightness為null，就會使用appBarTheme.brightness，而appBarTheme是通過AppBarTheme.of(context)獲取的，而該方法的實現實際是Theme.of(context).appBarTheme，backgroundColor同理，如果該屬性為null，就會使用theme.primaryColor，而theme是Theme.of(context)獲取的。

還有一個地方要注意，如果同時使用SystemChrome.setSystemUIOverlayStyle(uiStyle)方法和3. 同時改變狀態列背景顏色和AppBar背景顏色，則SystemChrome.setSystemUIOverlayStyle(uiStyle)設定的顏色會覆蓋3. 同時改變狀態列背景顏色和AppBar背景顏色方法中設定的狀態列顏色，所以如果同時使用的話就可以達到單獨設定狀態列顏色和AppBar背景顏色的效果了。

  /// The [ThemeData.appBarTheme] property of the ambient [Theme].
  static AppBarTheme of(BuildContext context) {
    return Theme.of(context).appBarTheme;
  }
複製程式碼

相關文章