插件介绍

Platform Design是一个Flutter示例项目，展示了如何在同一应用中根据不同平台（Android/iOS/鸿蒙OS）自动应用相应的设计模式和用户界面，同时最大化代码复用率。

主要功能和特性

• 平台自适应导航结构：在Android和鸿蒙OS上使用侧边抽屉导航（Drawer），在iOS上使用底部标签栏导航（Bottom Tab Bar）
• 平台特定UI组件：使用Material Design和Cupertino组件库，根据平台自动切换
• 统一内容展示：核心内容保持平台无关，仅在平台特定的"容器"中展示
• 主题适配：同时支持浅色/深色主题，并为Material和Cupertino组件提供独立主题配置
• 手势交互：实现了平台特定的下拉刷新模式（Android静态刷新/iOS过滚动刷新）
• 鸿蒙OS支持：专门针对鸿蒙OS进行了适配，默认使用Android设计模式

使用步骤

1. 导入依赖

在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  platform_design:
    git:
      url: "https://atomgit.com/flutter/samples.git"
      path: "platform_design"
  english_words: ^4.0.0
  flutter_lorem: ^2.0.0
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

然后运行flutter pub get命令安装依赖。

2. 基本配置

在应用入口文件中，创建一个继承自StatelessWidget的应用类，并配置Material和Cupertino主题：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(const MyAdaptingApp());

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

  @override
  Widget build(context) {
    return MaterialApp(
      title: 'Adaptive App',
      theme: ThemeData(
        primarySwatch: Colors.green,
        useMaterial3: true,
      ),
      darkTheme: ThemeData.dark(),
      builder: (context, child) {
        return CupertinoTheme(
          data: const CupertinoThemeData(),
          child: Material(child: child),
        );
      },
      home: const PlatformAdaptingHomePage(),
    );
  }
}

3. 实现平台适配的主页面

创建一个StatefulWidget来实现平台特定的主页结构：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:platform_design/widgets.dart';

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

  @override
  State<PlatformAdaptingHomePage> createState() =>
      _PlatformAdaptingHomePageState();
}

class _PlatformAdaptingHomePageState extends State<PlatformAdaptingHomePage> {
  @override
  Widget build(context) {
    return PlatformWidget(
      androidBuilder: _buildAndroidHomePage,
      iosBuilder: _buildIosHomePage,
    );
  }

  Widget _buildAndroidHomePage(BuildContext context) {
    // Android和鸿蒙OS使用抽屉导航
    return Scaffold(
      appBar: AppBar(title: const Text('Android/HarmonyOS Home')),
      drawer: Drawer(
        child: Column(
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.green),
              child: Text('Menu'),
            ),
            ListTile(
              leading: const Icon(Icons.home),
              title: const Text('Home'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            // 其他菜单项
          ],
        ),
      ),
      body: const Center(child: Text('Home Content')),
    );
  }

  Widget _buildIosHomePage(BuildContext context) {
    // iOS使用底部标签栏导航
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: const [
          BottomNavigationBarItem(
            label: 'Home',
            icon: Icon(CupertinoIcons.home),
          ),
          // 其他标签项
        ],
      ),
      tabBuilder: (context, index) {
        return CupertinoTabView(
          defaultTitle: 'Home',
          builder: (context) => const Center(child: Text('iOS Home Content')),
        );
      },
    );
  }
}

API调用示例

PlatformWidget - 平台自适应组件

PlatformWidget是实现平台适配的核心组件，它根据当前运行的平台自动选择相应的UI实现：

import 'package:platform_design/widgets.dart';

PlatformWidget(
  // 鸿蒙OS会使用此构建器
  androidBuilder: (context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Android/HarmonyOS UI')),
      body: const Center(child: Text('Material Design UI')),
    );
  },
  iosBuilder: (context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('iOS UI'),
      ),
      child: const Center(child: Text('Cupertino UI')),
    );
  },
)

PressableCard - 平台无关的可点击卡片

PressableCard是一个自定义的平台无关组件，提供一致的点击反馈效果：

import 'package:platform_design/widgets.dart';

PressableCard(
  color: Colors.blue,
  flattenAnimation: AnimationController(vsync: this, duration: Duration.zero),
  onPressed: () {
    print('Card pressed!');
  },
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Press Me'),
  ),
)

平台特定对话框

使用showChoices函数展示平台特定的选择对话框：

import 'package:platform_design/widgets.dart';

showChoices(
  context,
  ['Option 1', 'Option 2', 'Option 3'],
);

在鸿蒙OS上，这将显示一个带有单选按钮的Material对话框；在iOS上，则显示一个Cupertino选择器。

总结

Platform Design示例项目展示了如何在Flutter应用中实现高效的跨平台设计，特别针对鸿蒙OS进行了适配。通过使用PlatformWidget等核心组件，开发者可以轻松地为不同平台提供符合其设计规范的用户界面，同时保持大部分代码的复用。

在鸿蒙OS上，应用默认采用与Android相似的设计模式（侧边抽屉导航、Material组件），但开发者可以根据需要进行自定义调整。这种灵活的设计方式使得Flutter应用能够在鸿蒙OS上提供良好的用户体验，同时最大化开发效率。

参考资源

• Flutter官方文档：https://flutter.dev/docs
• Material Design指南：https://material.io/design
• Apple Human Interface Guidelines：https://developer.apple.com/design/human-interface-guidelines

---

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