Flutter for OpenHarmony 实战：使用 ThemeData 构建鸿蒙全局视觉规范

Flutter for OpenHarmony 实战之基础组件：ThemeData — 打造深度适配鸿蒙系统的全局视觉规范

引言

在 Flutter for OpenHarmony 开发中，ThemeData 用于配置全局主题和色盘，可构建符合鸿蒙系统原生美学的界面。通过对全局主题和色盘（ColorScheme）的精细化配置，可以极速构建出符合鸿蒙系统原生美学的界面。

一、ThemeData：应用的视觉指挥塔

ThemeData 包含了应用中几乎所有组件的默认外观配置：

• colorScheme：核心色盘（主要颜色、次要颜色、背景色、错误色）。
• textTheme：文字排版体系（标题、正文、说明文字的规格）。
• cardTheme / buttonTheme：特定组件的全局默认样式（圆角、阴影等）。

二、实战演练：构建鸿蒙风格的主题包

2.1 定义鸿蒙蓝品牌色盘

final ThemeData ohosLightTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xFF007DFF), // 鸿蒙经典蓝色
    brightness: Brightness.light,
    primary: const Color(0xFF007DFF),
    surface: Colors.white,
  ),
  // 全局卡片圆角适配鸿蒙规范
  cardTheme: CardTheme(
    elevation: 2,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
  ),
  // 按钮全局高度与间距调优
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      minimumSize: const Size(88, 48),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
    ),
  ),
);

2.2 自动适配深色模式 (Dark Mode)

MaterialApp(
  theme: ohosLightTheme,
  darkTheme: ohosDarkTheme, // 定义一套深色主题
  themeMode: ThemeMode.system, // 核心：自动跟随鸿蒙系统设置
  home: const HomePage(),
)

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    // 💡 2.2 核心：获取当前系统的亮暗偏好
    final Brightness systemBrightness = MediaQuery.platformBrightnessOf(context);
    final bool isDark = systemBrightness == Brightness.dark;

    // 💡 定义一套'鸿蒙风格'的深色/亮色主题配置
    final lightTheme = ThemeData(
      brightness: Brightness.light,
      colorScheme: ColorScheme.fromSeed(
        seedColor: const Color(0xFF007DFF),
        brightness: Brightness.light,
      ),
      useMaterial3: true,
    );

    final darkTheme = ThemeData(
      brightness: Brightness.dark,
      colorScheme: ColorScheme.fromSeed(
        seedColor: const Color(0xFF007DFF),
        brightness: Brightness.dark,
      ),
      useMaterial3: true,
    );

    return Theme(
      // 💡 在本示例中，我们局部演示系统自动选择逻辑
      data: isDark ? darkTheme : lightTheme,
      child: Scaffold(
        appBar: AppBar(title: const Text('深色模式实验室')),
        body: ListView(
          padding: const EdgeInsets.all(24),
          children: [
            _buildStatusHeader(isDark),
            const SizedBox(height: 30),
            const Text("适配原理：", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
            const SizedBox(height: 12),
            const Text(
              "通过在 MaterialApp 中配置 theme 和 darkTheme，并将 themeMode 设为 ThemeMode.system，Flutter 会自动监听鸿蒙系统的设置变化（如在'控制中心'切换深色模式）。",
              style: TextStyle(height: 1.5, color: Colors.grey),
            ),
            const SizedBox(height: 40),
            _SampleListItem(icon: Icons.notifications_none, title: "系统通知", trailing: "已开启"),
            _SampleListItem(icon: Icons.lock_outline, title: "隐私安全", trailing: "受保护"),
            _SampleListItem(
              icon: Icons.palette_outlined,
              title: "当前主题状态",
              trailing: isDark ? "深色模式" : "亮色模式",
            ),
            const Divider(height: 60),
            const Text(
              "💡 鸿蒙适配建议：\n在鸿蒙端，除了 UI 颜色的改变，建议在深色模式下适当降低图片的对比度和亮度（使用 ColorFilter），以提供更温和的夜间阅读体验。",
              style: TextStyle(color: Colors.grey, fontSize: 13),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildStatusHeader(bool isDark) {
    return Container(
      padding: const EdgeInsets.all(32),
      decoration: BoxDecoration(
        color: isDark ? Colors.blueGrey[900] : Colors.blue[50],
        borderRadius: BorderRadius.circular(20),
        border: Border.all(
          color: isDark ? Colors.white10 : Colors.blue[100]!,
        ),
      ),
      child: Column(
        children: [
          Icon(
            isDark ? Icons.dark_mode : Icons.light_mode,
            size: 60,
            color: isDark ? Colors.yellow : Colors.orange,
          ),
          const SizedBox(height: 16),
          Text(
            isDark ? "鸿蒙深色模式已激活" : "显示为系统标准亮色",
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: isDark ? Colors.white : Colors.blue[900]),
          ),
        ],
      ),
    );
  }
}

class _SampleListItem extends StatelessWidget {
  final IconData icon;
  final String title;
  final String trailing;

  const _SampleListItem({required this.icon, required this.title, required this.trailing});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(icon),
      title: Text(title),
      trailing: Text(trailing, style: const TextStyle(color: Colors.grey)),
      contentPadding: EdgeInsets.zero,
    );
  }
}