網站首頁編程語言正文

flutter中如何使用和擴展ThemeData實現詳解_Dart

作者：李小轟_Rex ? 更新時間： 2022-12-12 編程語言

前言

做過UI開發的同學都知道，在開發中我們通常會將文字大小、色值等內容放在配置文件中，通過統一的管理類來讀取（嚴禁在UI代碼中寫死）。以便后續調整時不用修改源碼，只需要修改配置文件即可。

例如這樣：

定義常量存放

/// 存放顏色常量
abstract class ColorConfigs {
  static const Color background = Color(0xFFFF6600);
  static const Color textHint = Color(0xFFA0A4A7);
}

通過統一獲取

/// GOOD
Container(
  //通過 ColorConfig 獲取色值
  color: ColorConfigs.background,
)
/// BAD
Container(
  //寫死
  color: Color(0xFFFF6600),
)

Flutter為我們提供了Theme類，可以讓我們節省封裝常量配置類（如上示例中的 ColorConfigs）的步驟。將色值、字體風格等配置內容存入ThemeData中，子控件可統一通過 Theme.of(context)讀取 color、textStyle、等配置信息。

本篇通過換膚demo，介紹在flutter項目中如何使用 theme 以及如何對 themeData 進行字段擴展，實現全局的主題配置管理。

Theme 的基本使用方式

1. Theme 的注冊

MaterialApp(
  theme: myThemeData, //一個ThemeData的實例，下面提供具體代碼
  home: BodyWidget(),
)

我們做全局的主體配置，在 MaterialApp 中對 theme 字段進行入參賦值。示例代碼中的 myThemeData 是一個 ThemeData 的實現實例，可通過 ThemeData 的構造方法來查看其可供保存的主體及樣式信息，按照各自所需進行參數賦值。

下面是小編在自己項目中用到的ThemeData配置項，定義了各種狀態顏色、字體樣式、可供參考：

myThemeData：

val myThemeData = ThemeData(
  primaryColor: Colors.white,
  disabledColor: const Color(0xffcbced0),
  backgroundColor: const Color(0xfff3f4f5),
  hintColor: const Color(0xffe2e5e7),
  errorColor: const Color(0xffe21a1a),
  highlightColor: const Color(0xffa7d500),
  shadowColor: const Color(0xffa0a4a7),
  selectedRowColor: const Color(0xfff3f4f5),
  colorScheme: const ColorScheme.light(
    primary: Colors.white,
    secondary: Color(0xffa7d500),
    background: Color(0xfff3f4f5),
    error: Color(0xffe21a1a),
    onPrimary: Color(0xff242524),
    onError: Colors.white,
    onBackground: Color(0xffe2e5e7),
    onSecondary: Color(0xff707275),
  ),
  textTheme: TextTheme(
    headline1: TextStyle(
      fontSize: 17.sp,
      fontWeight: FontWeight.bold,
      color: const Color(0xff242524),
    ),
    headline2: TextStyle(
      fontSize: 16.sp,
      fontWeight: FontWeight.bold,
      color: const Color(0xff242524),
    ),
    ...中間省略 healin3 ~ headline5,只是配置不一樣
    headline6: TextStyle(
      fontSize: 14.sp,
      fontWeight: FontWeight.bold,
      color: const Color(0xff707275),
    ),
    subtitle1: TextStyle(
      fontSize: 12.sp,
      fontWeight: FontWeight.w500,
      color: const Color(0xff242524),
    ),
    subtitle2: TextStyle(
      fontSize: 12.sp,
      fontWeight: FontWeight.w500,
      color: const Color(0xff707275),
    ),
    bodyText1: TextStyle(
      fontSize: 11.sp,
      fontWeight: FontWeight.normal,
      color: const Color(0xff242524),
    ),
    bodyText2: TextStyle(
      fontSize: 11.sp,
      fontWeight: FontWeight.normal,
      color: const Color(0xff242524),
    ),
  ),
)

2. 讀取 ThemeData 里的配置：

@override
Widget build(BuildContext context) {
  return Container(
    color: Theme.of(context).backgroundColor,
    child: Text(
        'hellow', 
        style: Theme.of(context).headline).bodyText1,
  );
}

Theme.of(context).backgroundColor：讀取主題配置中的背景顏色，在 myThemeData 中進行過賦值操作
Theme.of(context).headline).bodyText1：讀取主題配置中鍵值為 bodyText1 的字體樣式

小技巧介紹

通常為了便于開發閱讀，我們也可以使用extension對 ThemeData 內屬性進行重命名獲取：

新建 extension_theme.dart，文件名字隨意：

///用于重命名顏色屬性
extension ThemeDataColorExtension on ThemeData {
  Color get bgColor => colorScheme.onBackground;
 ...
}
///用于重命名字體樣式屬性
extension ThemeDataTextStyleExtension on ThemeData {
  TextStyle get bodyStyle => textTheme.bodyText1!;
 ...
}

在UI頁面進行引用導入使用，上面的 demo 可改為：

import ./extension_theme.dart
...
@override
Widget build(BuildContext context) {
  return Container(
    color: Theme.of(context).bgColor,
    child: Text(
        'hellow', 
        style: Theme.of(context).bodyStyle,
  );
}

ThemeData 內置字段不夠用，如何擴展？

從 ThemeData 的構造函數中我們可以看到，ThemeData 內置的字段是有限的。假如我們的UI設計包含的色值數量或者字體樣式數量超出了 ThemeData 可供設置數量怎么辦呢？

比如：我們想新增一個色值配置，名字就叫 connerColor，我們還想保持統一，一律通過 ThemeData 來統一讀取統一配置，要如何處理呢？

小編在項目里是這么做的，將 ThemeData 進行一層封裝，以新增 connerColor 為例，具體代碼結合下面????的一鍵換膚查詢。

如何實現一鍵換膚

有了ThemeData作為統一管理存放配置信息后，實現一鍵換膚的思路就很清晰了，大致是這樣的：

從上圖可以看到，除了需要ThemeData用于存放配置信息，我們還需要封裝一個監聽類用于監聽選中主題發生變更，這個功能我們在下面用provider來實現。

1. 首先在 yaml 新增引入 provider

dependencies:
  provider: ^6.0.2

2. 創建主題枚舉

假設我們提供兩種主題切換

///主題類型
enum ThemeEnum {
  yellow,
  red,
}

3. ThemeData 進行一層封裝處理

我們對 ThemeData 進行一層封裝處理，添加 connerColor 進行顏色字段擴展

///自定義模型，包裝一下 themeData
class ThemeItem {
  final ThemeEnum themeEnum;
  final ThemeData themeData;
  // 擴展一個字段，用于表示自定義色值
  final Color connerColor;
  ThemeItem(
    this.themeEnum,
    this.themeData, {
    required this.connerColor,
  });
}

4. 創建一個主題管理類 ThemeConfig

abstract class ThemeConfig {
  ///記錄當前選中主題
  static late ThemeItem _currentTheme;
  static ThemeData get currentThemeData => _currentTheme.themeData;
  static ThemeEnum get currentTheme => _currentTheme.themeEnum;
  ///提供獲取擴展的色值
  static Color? get connerColor => _currentTheme.connerColor;
  ///設置選中主題，提供外部調用，更換當前主題
  static void initTheme(ThemeItem theme) {
    _currentTheme = theme;
  }
}

5. 通過ThemeData進行讀取保持統一

為保持統一通過ThemeData進行讀取，使用extension對新增字段connerColor進行讀取擴展

extension ExTheme on ThemeData {
  ///擴展獲取自定義色值
  Color get connerColor =&gt; ThemeConfig.connerColor!;
}

6. 基于 provider 的使用

我們添加一個工具類，用于通知設置主題變更

class AppInfoProvider with ChangeNotifier {
  ThemeData get currentTheme => ThemeConfig.currentThemeData;
  ///切換主題
  setTheme(ThemeItem theme) {
    ThemeConfig.initTheme(theme);
    notifyListeners();
  }
}

切換主題時，直接調用：

Provider.of<AppInfoProvider>(context, listen: false).setTheme(themeItem);

7. 創建一個主題倉庫，里面存放兩套主題，用于演示 Demo

///主題倉庫
abstract class ThemeStore {
  static List<ThemeItem> themes = [
    //紅色主題
    ThemeItem(
      ThemeEnum.yellow,
      ThemeData(
        primaryColor: Colors.yellow,
        backgroundColor: Colors.yellow,
      ),
      connerColor: Colors.blue,
    ),
    //黃色主題
    ThemeItem(
      ThemeEnum.red,
      ThemeData(
        primaryColor: Colors.red,
        backgroundColor: Colors.red,
      ),
      connerColor: Colors.green,
    ),
  ];
}

8.完整的 demo 代碼及效果

main.dart

void main() {
  ///初始化主題
  ThemeConfig.initTheme(
    ThemeStore.themes.first,
  );
  runApp(const Material(
    child: MyApp(),
  ));
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: AppInfoProvider()),
      ],
      child: Consumer<AppInfoProvider>(
        builder: (context, appInfo, _) {
          return MaterialApp(
            theme: appInfo.currentTheme,
            home: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                BodyWidget(),
                SizedBox(
                  height: 30,
                ),
                _ThemePageButton(),
              ],
            ),
          );
        },
      ),
    );
  }
}
class _ThemePageButton extends StatelessWidget {
  const _ThemePageButton({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => const ThemeSetWidget(),
          ),
        );
      },
      child: const Text('打開主題設置頁面'),
    );
  }
}

body_widget

class BodyWidget extends StatelessWidget {
  const BodyWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 300,
      //讀取標準色值
      color: Theme.of(context).backgroundColor,
      child: Center(
        child: Container(
          height: 100,
          width: 150,
          //讀取自定義色值
          color: Theme.of(context).connerColor,
        ),
      ),
    );
  }
}

兩個方塊，外層方塊讀取的 ThemeData 標注字段色值，內層方塊讀取擴展字段色值。統一通過 ThemeData 讀取。

theme_set_widget

extension ExThemeEnum on ThemeEnum {
  Color get value {
    switch (this) {
      case ThemeEnum.yellow:
        return Colors.yellow;
      case ThemeEnum.red:
        return Colors.red;
    }
  }
}

///主題選擇頁面
class ThemeSetWidget extends StatelessWidget {
  const ThemeSetWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("顏色主題"),
        backgroundColor: Theme.of(context).backgroundColor,
      ),
      body: ExpansionTile(
        leading: const Icon(Icons.color_lens),
        title: const Text('顏色主題'),
        initiallyExpanded: true,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(
              left: 10,
              right: 10,
              bottom: 10,
            ),
            child: Wrap(
              spacing: 8,
              runSpacing: 8,
              children: ThemeStore.themes
                  .map((e) => _createItemWidget(context, e))
                  .toList(),
            ),
          )
        ],
      ),
    );
  }
  Widget _createItemWidget(
    BuildContext context,
    ThemeItem theme,
  ) {
    return InkWell(
      onTap: () {
        Provider.of<AppInfoProvider>(context, listen: false).setTheme(theme);
      },
      child: Container(
        width: 40,
        height: 40,
        color: theme.themeEnum.value,
        child: ThemeConfig.currentTheme == theme.themeEnum
            ? const Icon(
                Icons.done,
                color: Colors.white,
              )
            : null,
      ),
    );
  }
}

原文鏈接：https://juejin.cn/post/7065585593786302500

上一篇：Android?Binder進程間通信工具AIDL使用示例深
下一篇：C語言scanf語句吃掉回車或者空格問題及解決_C 語言

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁編程語言正文

flutter中如何使用和擴展ThemeData實現詳解_Dart

目錄

前言

Theme 的基本使用方式

1. Theme 的注冊

2. 讀取 ThemeData 里的配置：

小技巧介紹

ThemeData 內置字段不夠用，如何擴展？

如何實現一鍵換膚

1. 首先在 yaml 新增引入 provider

2. 創建主題枚舉

3. ThemeData 進行一層封裝處理

4. 創建一個主題管理類 ThemeConfig

5. 通過ThemeData進行讀取保持統一

6. 基于 provider 的使用

7. 創建一個主題倉庫，里面存放兩套主題，用于演示 Demo

8.完整的 demo 代碼及效果

相關推薦

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁 編程語言 正文

flutter中如何使用和擴展ThemeData實現詳解_Dart

目錄

前言

Theme 的基本使用方式

1. Theme 的注冊

2. 讀取 ThemeData 里的配置：

小技巧介紹

ThemeData 內置字段不夠用，如何擴展？

如何實現一鍵換膚

1. 首先在 yaml 新增引入 provider

2. 創建主題枚舉

3. ThemeData 進行一層封裝處理

4. 創建一個主題管理類 ThemeConfig

5. 通過ThemeData進行讀取保持統一

6. 基于 provider 的使用

7. 創建一個主題倉庫，里面存放兩套主題，用于演示 Demo

8.完整的 demo 代碼及效果

相關推薦

網站首頁編程語言正文