插件介绍

Material 3 Demo 是一个展示 Flutter Material 3 设计系统核心特性的示例应用，为开发者提供了在鸿蒙平台上实现现代化 UI 的完整参考。该应用集成了 Material 3 的最新组件、排版系统、颜色生成方案和高程支持，支持浅色/深色主题切换，并可在 Material 2 和 Material 3 设计系统之间无缝切换。

主要功能特性：

• 更新的 Material 3 组件：AppBar、Buttons、Floating Action Button (FAB)、Chips、Card、Checkbox、Dialog、NavigationBar、NavigationRail、ProgressIndicators、Radio buttons、TextFields 和 Switch
• 动态主题系统：支持浅色/深色主题自动切换，符合鸿蒙系统的主题偏好
• Material 2/3 兼容：可一键切换设计系统，便于比较不同设计规范
• 智能颜色生成：从单个种子颜色或图像生成完整配色方案
• 自适应布局：根据屏幕宽度自动切换导航方式（移动端底部导航栏，桌面/网页左侧导航栏）
• 完善的排版系统：展示 Material 3 推荐的文本样式和排版规则
• 现代高程效果：使用 surfaceTintColor 实现符合 Material 3 设计规范的深度和层次感

使用步骤

1. 包的引入

由于这是一个自定义修改版本的 Flutter 包，需要通过 Git 形式引入。在您的鸿蒙 Flutter 项目的 pubspec.yaml 文件中添加以下依赖配置：

dependencies:
  material_3_demo:
    git:
      url: "https://atomgit.com/"
      path: "packages/material_3_demo/material_3_demo"

然后运行以下命令获取依赖：

flutter pub get

2. 初始化应用

在您的应用入口文件中，初始化 Material 3 Demo 应用：

import 'package:flutter/material.dart';
import 'package:material_3_demo/main.dart' as material3;

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

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

  @override
  Widget build(BuildContext context) {
    return const material3.App();
  }
}

3. 自定义主题配置

您可以根据需要自定义 Material 3 Demo 的主题配置：

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

  @override
  State<MyCustomMaterial3App> createState() => _MyCustomMaterial3AppState();
}

class _MyCustomMaterial3AppState extends State<MyCustomMaterial3App> {
  bool useMaterial3 = true;
  ThemeMode themeMode = ThemeMode.system;
  ColorSeed colorSelected = ColorSeed.blue;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Material 3 Demo',
      themeMode: themeMode,
      theme: ThemeData(
        colorSchemeSeed: colorSelected.color,
        useMaterial3: useMaterial3,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        colorSchemeSeed: colorSelected.color,
        useMaterial3: useMaterial3,
        brightness: Brightness.dark,
      ),
      home: Home(
        useLightMode: themeMode == ThemeMode.light,
        useMaterial3: useMaterial3,
        colorSelected: colorSelected,
        imageSelected: ColorImageProvider.leaves,
        handleBrightnessChange: (bool useLightMode) {
          setState(() {
            themeMode = useLightMode ? ThemeMode.light : ThemeMode.dark;
          });
        },
        handleMaterialVersionChange: () {
          setState(() {
            useMaterial3 = !useMaterial3;
          });
        },
        handleColorSelect: (int value) {
          setState(() {
            colorSelected = ColorSeed.values[value];
          });
        },
        handleImageSelect: (int value) {
          // 实现图像颜色方案选择逻辑
        },
        colorSelectionMethod: ColorSelectionMethod.colorSeed,
      ),
    );
  }
}

API 调用

主题管理 API

1. 切换浅色/深色主题

void handleBrightnessChange(bool useLightMode) {
  setState(() {
    themeMode = useLightMode ? ThemeMode.light : ThemeMode.dark;
  });
}

2. 切换 Material 2/3 设计系统

void handleMaterialVersionChange() {
  setState(() {
    useMaterial3 = !useMaterial3;
  });
}

3. 选择种子颜色生成配色方案

void handleColorSelect(int value) {
  setState(() {
    colorSelectionMethod = ColorSelectionMethod.colorSeed;
    colorSelected = ColorSeed.values[value];
  });
}

4. 从图像生成配色方案

void handleImageSelect(int value) {
  final String url = ColorImageProvider.values[value].url;
  ColorScheme.fromImageProvider(provider: NetworkImage(url))
      .then((newScheme) {
    setState(() {
      colorSelectionMethod = ColorSelectionMethod.image;
      imageSelected = ColorImageProvider.values[value];
      imageColorScheme = newScheme;
    });
  });
}

颜色系统 API

1. 颜色种子枚举

enum ColorSeed {
  baseColor(Color(0xff6750a4)),
  blue(Color(0xff3b82f6)),
  indigo(Color(0xff6366f1)),
  // 更多颜色种子...
}

2. 图像颜色提供者

enum ColorImageProvider {
  leaves(
    'https://images.unsplash.com/photo-1502691876148-a84978e59af8',
  ),
  // 更多图像提供者...
}

鸿蒙平台适配要点

1. 主题兼容性：Material 3 Demo 自动适配鸿蒙系统的浅色/深色主题偏好，保持与系统 UI 的一致性

2. 屏幕适配：应用会根据鸿蒙设备的屏幕宽度自动选择合适的导航方式（底部导航栏或左侧导航栏）

3. 权限处理：当使用图像生成配色方案时，需要确保应用具有网络访问权限

4. 性能优化：在鸿蒙低性能设备上，建议关闭不必要的动画效果以提升性能

总结

Flutter Material 3 Demo 为开发者提供了一个完整的 Material 3 设计系统参考实现，在鸿蒙平台上可以实现现代化、自适应的用户界面。通过智能颜色生成、动态主题切换和自适应布局等特性，开发者可以快速构建符合 Material 3 设计规范的鸿蒙应用。

该包的核心优势包括：

• 完整的 Material 3 组件库
• 灵活的主题配置选项
• 自适应多设备布局
• 与鸿蒙系统的深度集成

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