Flutter基礎-033-ThemeData主題

說明

Flutter 預先定義了一系列的主題，各個widget都全部或區域性使用了這些主題，因此當更改了預定義主題後，所有使用了這些主題的widget都會發生相應的變化。 #####原理 使用InheritedWidget，當共享資料發生變化時，依賴者也發生變化。

ThemeData屬性

Brightness brightness, //深色還是淺色 MaterialColor primarySwatch, //備用主題顏色，如果沒有設定primaryColor就使用該顏色 Color primaryColor, //主題主色，決定導航欄顏色 Color accentColor, //主題次級色，決定大多數Widget的顏色，如進度條、開關等。 Color cardColor, //卡片顏色 Color dividerColor, //分割線顏色 ButtonThemeData buttonTheme, //按鈕主題 Color dialogBackgroundColor,//對話方塊背景顏色 String fontFamily, //文字字型 TextTheme textTheme,// 字型主題，包括標題、body等文字樣式 IconThemeData iconTheme, // Icon的預設樣式 TargetPlatform platform, //指定平臺，應用特定平臺控制元件風格 Brightness primaryColorBrightness,// 主題主色的深淺色 Color primaryColorLight, Color primaryColorDark, Brightness accentColorBrightness, Color canvasColor,// 畫布顏色 Color scaffoldBackgroundColor, Color bottomAppBarColor, Color focusColor, Color hoverColor, Color highlightColor, Color splashColor, InteractiveInkFeatureFactory splashFactory, Color selectedRowColor, Color unselectedWidgetColor, Color disabledColor,//禁用時的顏色 Color buttonColor, ButtonThemeData buttonTheme, Color secondaryHeaderColor, Color textSelectionColor, Color cursorColor,// 游標顏色 Color textSelectionHandleColor, Color backgroundColor,// 背景顏色 Color dialogBackgroundColor, Color indicatorColor, Color hintColor, Color errorColor, Color toggleableActiveColor, String fontFamily, TextTheme textTheme, TextTheme primaryTextTheme, TextTheme accentTextTheme, InputDecorationTheme inputDecorationTheme, IconThemeData iconTheme, IconThemeData primaryIconTheme, IconThemeData accentIconTheme, SliderThemeData sliderTheme, TabBarTheme tabBarTheme, CardTheme cardTheme, ChipThemeData chipTheme, TargetPlatform platform, MaterialTapTargetSize materialTapTargetSize, PageTransitionsTheme pageTransitionsTheme, AppBarTheme appBarTheme, BottomAppBarTheme bottomAppBarTheme, ColorScheme colorScheme, DialogTheme dialogTheme, FloatingActionButtonThemeData floatingActionButtonTheme, Typography typography, CupertinoThemeData cupertinoOverrideTheme, SnackBarThemeData snackBarTheme, BottomSheetThemeData bottomSheetTheme,

class _MyHomePageState extends State<MyHomePage> {
  Color swatchTheme = Colors.lightGreen;
  int index = 0;
  @override
  Widget build(BuildContext context) {
    ThemeData td = Theme.of(context);
    return Theme(
      data: ThemeData(
        primarySwatch: swatchTheme,
        iconTheme: IconThemeData(color: swatchTheme),
//        textTheme: TextTheme(body1: TextStyle(color: swatchTheme)),
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(Icons.add),
                Icon(Icons.delete),
                Text('theme,使用了預設主題'), //會隨著主題變色
              ],
            ),
            Theme(
              data: td.copyWith(//複製父類指定的theme，並修改區域性
                iconTheme: td.iconTheme.copyWith(color: Colors.blue),
                textTheme: td.textTheme.copyWith(body1: TextStyle(color:Colors.blue)),
              ), // zi widget自定義icon的主題
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.add),
                  Icon(Icons.delete),
                  Text('theme,使用了自定義主題')
                ],
              ),
            ),
            Theme(
              data: ThemeData(// 完全使用新的自定義theme
                primarySwatch: Colors.pink,
                iconTheme: IconThemeData(color: Colors.pink),
                textTheme: TextTheme(body2: TextStyle(color: Colors.pink)),
              ), // zi widget自定義icon的主題
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.add),
                  Icon(Icons.delete),
                  Text('theme,使用了自定義主題')
                ],
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(
              () {
                index++;
                if (index & 3 == 0) {
                  swatchTheme = Colors.orange;
                }
                if (index & 3 == 1) {
                  swatchTheme = Colors.blue;
                }
                if (index & 3 == 2) {
                  swatchTheme = Colors.red;
                }
              },
            );
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}
複製程式碼

• 用Theme包裹住子孫widget
• 設定主題屬性data，進行自定義。
• 子widget的theme可以覆蓋父widget的theme。