一、插件介绍

flutter_ohos_theme_fontsizescale是一款专为Flutter OpenHarmony跨平台开发设计的主题与字体大小管理插件。该插件实现了Flutter应用与OpenHarmony系统主题和字体大小设置的无缝对接，让开发者能够快速实现跟随系统主题切换和字体大小缩放的功能，提升应用的用户体验和可访问性。
在这里插入图片描述

核心功能

  • 跟随系统主题自动切换（亮色/暗色模式）
  • 字体大小跟随系统设置自动缩放
  • 提供主题和字体大小设置界面示例
  • 支持应用内主题状态查询

二、环境设置

在开始使用主题与字体大小缩放插件之前，需要确保您的开发环境满足以下要求：

Flutter环境要求

  • Flutter SDK版本：≥ 3.7.0
  • Dart SDK版本：≥ 2.19.6

OpenHarmony环境要求

  • OpenHarmony SDK API版本：≥ 9
  • DevEco Studio版本：≥ 3.0

三、包的引入

由于此插件为自定义修改版本，需要通过Git方式引入。在您的Flutter项目中，修改pubspec.yaml文件，添加以下依赖配置：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_ohos_theme_fontsizescale:
    git:
      url: "https://atomgit.com/openharmony-sig/flutter_ohos_theme_fontsizescale.git"
      path: flutter_ohos_theme_fontsizescale

添加依赖后，执行以下命令获取包：

flutter pub get

四、API调用

1. 主题管理

获取系统主题模式

使用MediaQuery.of(context).platformBrightness获取当前系统主题模式：

Brightness sysColorMode = MediaQuery.of(context).platformBrightness;
print("当前系统主题为：$sysColorMode"); // 输出：当前系统主题为：Brightness.light 或 Brightness.dark
应用主题到MaterialApp

将系统主题应用到MaterialApp：

MaterialApp(
  title: "应用标题",
  theme: ThemeData(
    primaryColor: sysColorMode == Brightness.dark ? Colors.white : Colors.black,
    brightness: sysColorMode, // 应用系统主题
  ),
  home: const MyHomePage(),
);

2. 字体大小管理

获取系统字体缩放因子

使用MediaQuery.of(context).textScaleFactor获取当前系统字体缩放因子：

double sysTextScaleFactor = MediaQuery.of(context).textScaleFactor;
print("当前系统字体大小系数：$sysTextScaleFactor"); // 输出：当前系统字体大小系数：1.0 或其他值
应用字体缩放

将系统字体缩放应用到特定文本：

Text(
  "字体大小跟随系统",
  style: TextStyle(fontSize: 14 * sysTextScaleFactor),
);

或者使用Text组件的textScaleFactor属性：

Text(
  "字体大小跟随系统",
  textScaleFactor: sysTextScaleFactor,
);

3. 固定字体大小

如果某些文本不需要跟随系统字体大小变化，可以设置固定的缩放因子：

Text(
  "字体大小固定",
  textScaleFactor: 1.0, // 固定为原始大小
);

五、完整使用流程

1. 主应用入口设置

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "主题与字体大小演示",
      theme: ThemeData(
        primaryColor: Colors.lightBlue,
      ),
      home: const MainPage(),
    );
  }
}

2. 主页面实现

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    // 获取系统主题和字体缩放因子
    Brightness sysColorMode = MediaQuery.of(context).platformBrightness;
    double sysTextScaleFactor = MediaQuery.of(context).textScaleFactor;

    return Scaffold(
      appBar: AppBar(
        title: const Text("主题与字体大小演示"),
        backgroundColor: sysColorMode == Brightness.dark ? Colors.black : Colors.lightBlue,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "当前系统主题：${sysColorMode == Brightness.dark ? '暗色模式' : '亮色模式'}",
              style: TextStyle(fontSize: 18 * sysTextScaleFactor),
            ),
            const SizedBox(height: 20),
            Text(
              "当前字体缩放因子：$sysTextScaleFactor",
              style: TextStyle(fontSize: 16 * sysTextScaleFactor),
            ),
            const SizedBox(height: 30),
            Text(
              "这段文字跟随系统字体大小变化",
              style: TextStyle(fontSize: 14 * sysTextScaleFactor),
            ),
            const SizedBox(height: 10),
            Text(
              "这段文字大小固定不变",
              textScaleFactor: 1.0,
              style: const TextStyle(fontSize: 14),
            ),
            const SizedBox(height: 40),
            ElevatedButton(
              onPressed: () {
                // 导航到设置页面
                Navigator.push(context, MaterialPageRoute(builder: (context) => SettingsPage()));
              },
              child: Text(
                "进入设置页面",
                style: TextStyle(fontSize: 16 * sysTextScaleFactor),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3. 设置页面实现

class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    Brightness sysColorMode = MediaQuery.of(context).platformBrightness;

    return Scaffold(
      appBar: AppBar(
        title: const Text("设置"),
        backgroundColor: sysColorMode == Brightness.dark ? Colors.black : Colors.lightBlue,
      ),
      body: ListView(
        children: [
          ListTile(
            leading: const Icon(Icons.color_lens),
            title: const Text("主题设置"),
            subtitle: Text("当前主题：${sysColorMode == Brightness.dark ? '暗色模式' : '亮色模式'}"),
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => ThemeSettingsPage()));
            },
          ),
          ListTile(
            leading: const Icon(Icons.text_fields),
            title: const Text("字体大小"),
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => FontSizeSettingsPage()));
            },
          ),
        ],
      ),
    );
  }
}

4. 主题设置页面

class ThemeSettingsPage extends StatelessWidget {
  const ThemeSettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    Brightness sysColorMode = MediaQuery.of(context).platformBrightness;

    return Scaffold(
      appBar: AppBar(
        title: const Text("主题设置"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "当前系统主题：$sysColorMode",
              style: Theme.of(context).textTheme.headline6,
            ),
            const SizedBox(height: 20),
            Text(
              "应用已自动跟随系统主题",
              style: Theme.of(context).textTheme.bodyText1,
            ),
          ],
        ),
      ),
    );
  }
}

5. 字体大小设置页面

class FontSizeSettingsPage extends StatelessWidget {
  const FontSizeSettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    Brightness sysColorMode = MediaQuery.of(context).platformBrightness;
    double sysTextScaleFactor = MediaQuery.of(context).textScaleFactor;

    return Scaffold(
      appBar: AppBar(
        title: const Text("字体大小"),
      ),
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: [
          Text(
            "当前系统字体大小系数：$sysTextScaleFactor",
            style: Theme.of(context).textTheme.headline6,
          ),
          const SizedBox(height: 30),
          Text(
            "示例文本：星河璀璨，鸿蒙正当时",
            style: Theme.of(context).textTheme.bodyText1,
          ),
          const SizedBox(height: 10),
          Text(
            "（字体大小跟随系统）",
            style: Theme.of(context).textTheme.caption,
          ),
          const SizedBox(height: 20),
          Text(
            "示例文本：星河璀璨，鸿蒙正当时",
            textScaleFactor: 1.0,
            style: Theme.of(context).textTheme.bodyText1,
          ),
          const SizedBox(height: 10),
          Text(
            "（字体大小固定）",
            style: Theme.of(context).textTheme.caption,
          ),
        ],
      ),
    );
  }
}

六、最佳实践

1. 主题适配建议

  • 使用Theme.of(context)获取当前主题样式，而不是硬编码颜色
  • 为不同主题模式提供合适的颜色对比，确保可读性
  • 图片资源也应考虑主题适配，可使用ColorFilter调整图片颜色
Image.asset(
  "images/avatar.jpg",
  width: 40.0,
  height: 40.0,
  fit: BoxFit.cover,
  color: sysColorMode == Brightness.dark ? Colors.white : null,
  colorBlendMode: sysColorMode == Brightness.dark ? BlendMode.color : null,
),

2. 字体大小适配建议

  • 对所有文本组件应用系统字体缩放因子
  • 关键信息文本可以使用固定大小，确保始终清晰可见
  • 测试不同字体缩放级别下的布局，确保不会出现布局错乱

3. 性能优化

  • 避免在build方法中频繁获取系统主题和字体缩放因子
  • 考虑使用Provider或其他状态管理工具缓存主题状态

七、总结

flutter_ohos_theme_fontsizescale插件为Flutter OpenHarmony跨平台开发提供了便捷的主题与字体大小管理解决方案。通过简单的API调用，开发者可以快速实现：

  1. 应用跟随系统主题自动切换（亮色/暗色模式）
  2. 字体大小跟随系统设置自动缩放
  3. 灵活控制特定文本的缩放行为
  4. 提供主题和字体大小设置界面

该插件实现了Flutter应用与OpenHarmony系统设置的无缝对接，提升了应用的用户体验和可访问性，同时保持了Flutter开发的简洁性和高效性。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

# flutter # harmonyos # 华为
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

鸿蒙三方库适配README.OpenSource文件解读

在 OpenHarmony / 鸿蒙生态做C/C++ 三方库适配时，仓库里常会看到一个名叫 README.OpenSource的文件。它看起来是一段JSON，不像普通 README 那样长篇大论，却是开源治理与合规里很常用的一种写法：用结构化数据，把「这个组件是谁的、什么协议、从哪来、当前版本是什么」说清楚。本文以本仓库 thirdparty/AES/README.OpenSource为例，逐字段

avatar 开源鸿蒙跨平台开发者社区
cover

ReactNative for OpenHarmony项目鸿蒙化三方库：rn-placeholder — 骨架屏占位组件

avatar 开源鸿蒙跨平台开发者社区

鸿蒙三方库适配读懂 `README_zh.md`：中文适配说明里每段在说什么？

在 OpenHarmony / lycium 三方库目录里，README_zh.md通常承担「给中文读者看的说明书」：用自然语言说明这是什么库、编出来在哪、怎么编、怎么测，不必像 HPKBUILD那样写成 Shell 脚本。本仓库的 thirdparty/AES/README_zh.md对应包名AES、上游 tiny-AES-c。下面按原文章节顺序，把每段话的用途、背后的约定、和别的文件怎么对照讲

avatar 开源鸿蒙跨平台开发者社区