Flutter平台适配插件platform_widget_mixin的使用

插件概述

platform_widget_mixin 是一个用于解耦不同平台特性的插件。通过该插件，你可以在不使用复杂的if/else检查的情况下构建针对不同平台（如Android、iOS、Web、桌面等）的不同UI。

特性

• 构建不同的UI以适应各种平台，无需在小部件中添加复杂的条件判断。

开始使用

首先，你需要将 platform_widget_mixin 添加到你的 pubspec.yaml 文件中：

dependencies:
  platform_widget_mixin: ^x.y.z

然后运行 flutter pub get 命令来安装插件。

示例截图

示例代码

下面是一个完整的示例，展示了如何使用 platform_widget_mixin 来创建适应不同平台的小部件。

示例代码

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

void main() async {
  runApp(const AdaptiveConfigurationWidget(child: MyApp()));
}

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

  // 构建Android应用
  [@override](/user/override)
  Widget buildAndroid(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.purple),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: child,
    );
  }

  // 构建iOS应用
  [@override](/user/override)
  Widget buildIOS(BuildContext context) {
    return CupertinoApp(
      theme: const CupertinoThemeData(primaryColor: Colors.purple),
      home: child,
    );
  }

  // 返回子小部件
  [@override](/user/override)
  Widget? get child => const HomePage();
}

class HomePage extends StatelessWidget with PlatformWidgetMixin {
  const HomePage({super.key});

  // 构建Android平台上的页面
  [@override](/user/override)
  Widget buildAndroid(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const _ToolbarTitle(),
      ),
      body: child,
    );
  }

  // 构建iOS平台上的页面
  [@override](/user/override)
  Widget buildIOS(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          middle: _ToolbarTitle(),
        ),
        child: child);
  }

  // 构建穿戴设备上的页面
  [@override](/user/override)
  Widget buildWear(BuildContext context) {
    return Scaffold(
      body: child,
    );
  }

  // 返回子小部件
  [@override](/user/override)
  Widget get child => const Center(child: PlatformNameWidget());
}

// 自定义工具栏标题
class _ToolbarTitle extends StatelessWidget {
  const _ToolbarTitle({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Text('Example App');
  }
}

// 显示平台名称的自定义小部件
class PlatformNameWidget extends StatefulWidget {
  const PlatformNameWidget({super.key});

  [@override](/user/override)
  State<PlatformNameWidget> createState() => _PlatformNameWidgetState();
}

class _PlatformNameWidgetState extends State<PlatformNameWidget>
    with PlatformWidgetMixin {
  // 构建Android平台上的文本
  [@override](/user/override)
  Widget buildAndroid(BuildContext context) => const Text('Android mobile');

  // 构建iOS平台上的文本
  [@override](/user/override)
  Widget buildIOS(BuildContext context) => const Text('iPhone');

  // 构建iPad平台上的文本
  [@override](/user/override)
  Widget buildIPad(BuildContext context) => const Text('iPad');

  // 构建macOS平台上的文本
  [@override](/user/override)
  Widget buildMacOS(BuildContext context) => const Text('Mac');

  // 构建Android TV平台上的文本
  [@override](/user/override)
  Widget buildAndroidTV(BuildContext context) => const Text('Android TV');

  // 构建Android平板上的文本
  [@override](/user/override)
  Widget buildAndroidTablet(BuildContext context) => const Text('Android Tablet');

  // 构建桌面平台上的文本
  [@override](/user/override)
  Widget buildDesktop(BuildContext context) => const Text('Desktop');

  // 构建电视平台上的文本
  [@override](/user/override)
  Widget buildTV(BuildContext context) => const Text('TV');

  // 构建平板平台上的文本
  [@override](/user/override)
  Widget buildTablet(BuildContext context) => const Text('Tablet');

  // 构建tvOS平台上的文本
  [@override](/user/override)
  Widget buildTvOS(BuildContext context) => const Text('Apple TV');

  // 构建Web平台上的文本
  [@override](/user/override)
  Widget buildWeb(BuildContext context) => const Text('Web');

  // 构建Web桌面平台上的文本
  [@override](/user/override)
  Widget buildWebDesktop(BuildContext context) => const Text('Web Desktop');

  // 构建Web移动平台上的文本
  [@override](/user/override)
  Widget buildWebMobile(BuildContext context) => const Text('Web Mobile');

  // 构建Web平板平台上的文本
  [@override](/user/override)
  Widget buildWebTablet(BuildContext context) => const Text('Web Tablet');

  // 构建穿戴设备平台上的文本
  [@override](/user/override)
  Widget buildWear(BuildContext context) => const Text('Wear');

  // 构建watchOS平台上的文本
  [@override](/user/override)
  Widget buildWatchOS(BuildContext context) => const Text('Apple Watch');

  // 构建Wear OS平台上的文本
  [@override](/user/override)
  Widget buildWearOS(BuildContext context) => const Text('Android Wear');
}