定製不同風格的App主題

移動的小太陽發表於2021-03-24
APP

定製不同風格的App主題

主題一般由 顏色、圖片、字型、字號資源組成；現在越來越多APP都支援了黑夜主題，還有一些APP支援切換主題。所謂的切換主題就是在不同場景下，更新這些資源和配置。

Android 通過把配置資訊則寫入各個 style中，通過 activity 的 setTheme 進行切換主題；在Flutter 中則是通過ThemeData 來統一管理主題的配置資訊。

ThemeData 涵蓋了 Material Design 規範的可自定義部分樣式，比如應用明暗模式 brightness、應用主色調 primaryColor、應用次級色調 accentColor、文字字型 fontFamily、輸入框游標顏色 cursorColor 等。如果你想深入瞭解 ThemeData 的其他 API 引數，可以參考官方文件ThemeData。

定製全域性的佈局風格

在APP開發中，我們都知道首先要 指定主題的風格，包括 App 的主題色、字型等，在Flutter 中可以通過 MaterialApp widget 下的 theme來設定。

// 改變一下主題
class ThemeDemo2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          brightness: Brightness.dark, // 改變主題為深色
          primaryColor: Colors.cyan, //修改主色調為青色
          iconTheme: IconThemeData(color: Colors.red), // 按鈕主題的顏色，改成了紅色
          textTheme: TextTheme(
              bodyText2: TextStyle(color: Colors.deepPurple)) // 文字的顏色改成了紫色
      ),
      home: Home1(title: "改變主題顏色",),
    );
  }
}
複製程式碼

我們可以對比一下，更改主題前後的區別：

image.png 可以看到，修改的主題為深色模式，主色調為青色了、按鈕的主題顏色也修改了，還有文字的顏色也改了。看起來還是挺簡單的。

主題的複用

有時候我們想複用主題的顏色、字型樣式，改怎麼辦呢？

通過Theme.of(context) 方法，取出對應的屬性，然後使用到對應的地方。Theme.of(context)獲取的父容器的主題樣式。

為不同的平臺定製不同的主題

有時候在開發中，我們需要為不同的平臺配置不同的主題，這時候怎麼辦呢？

我們可以根據 defaultTargetPlatform 來判斷當前應用所執行的平臺，從而根據系統型別來設定對應的主題。以後有需要區分當前是哪個平臺，都可以使用 defaultTargetPlatform 來完成判斷。

class ThemeDemo4 extends StatelessWidget {
// iOS亮色主題
  final ThemeData kIOSTheme = ThemeData(
      brightness: Brightness.light,
      //亮色主題
      accentColor: Colors.white,
      //(按鈕)Widget前景色為白色
      primaryColor: Colors.blue,
      //主題色為藍色
      iconTheme: IconThemeData(color: Colors.grey),
      //icon主題為灰色
      textTheme: TextTheme(bodyText2: TextStyle(color: Colors.black)) //文字主題為黑色
      );

// Android深色主題
  final ThemeData kAndroidTheme = ThemeData(
      brightness: Brightness.dark,
      //深色主題
      accentColor: Colors.black,
      //(按鈕)Widget前景色為黑色
      primaryColor: Colors.cyan,
      //主題色Wie青色
      iconTheme: IconThemeData(color: Colors.blue),
      //icon主題色為藍色
      textTheme: TextTheme(bodyText2: TextStyle(color: Colors.red)) //文字主題色為紅色
      );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: defaultTargetPlatform == TargetPlatform.android
          ? kAndroidTheme
          : kIOSTheme,
      home: Home1(
        title: "不同平臺，不同主題",
      ),
    );
  }
}
複製程式碼

image.png

總結

通過對 主題 的學習，瞭解到了 如何去定製一個主題，指定 是亮色還是暗色模式、字型樣式、主色調等；然後通過 Theme.of(context) 方法拿到父widget 的主題，再獲取到對應的屬性進行復用；最後 通過 defaultTargetPlatform 獲取到當前執行的平臺，為不同的平臺 設定不同的主題，完成了根據平臺，展示不同主題。

相關文章