Flutter平台构建插件 platform_builder 的使用

platform_builder 是一个用于执行平台检查并在不同平台上构建相应小部件的Flutter库。以下是该库的详细用法说明和示例代码。

平台检查

首先，您可以通过以下方式导入并使用Platform实例进行平台检查：

import 'package:platform_builder/platform_builder.dart';

if (Platform.instance.isAndroid) {
  print('android');
} else if (Platform.instance.isWeb) {
  print('web');
}

平台构建器

PlatformBuilder允许根据运行时平台构建不同的UI组件。例如：

import 'package:platform_builder/platform_builder.dart';

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return PlatformBuilder(
      androidBuilder: (context) => Icon(Icons.android),
      iOSBuilder: (context) => Icon(Icons.apple),
    );
  }
}

支持的平台

platform_builder支持多种平台：

• Android
• iOS
• macOS
• Linux
• Fuschia
• Windows
• Web
• Chrome扩展

默认情况下，所有平台都被启用。如果需要指定应用程序支持的平台，请调用Platform.init方法：

Platform.init(
  supportedPlatforms: {
    Platforms.iOS,
    Platforms.android,
    Platforms.web,
  },
);

如果某个特定的PlatformBuilder需要覆盖全局支持的平台列表（例如在开发过程中），可以传递一个覆盖列表给该小部件：

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return PlatformBuilder(
      supportedPlatforms: {Platforms.iOS, Platforms.android},
      androidBuilder: (context) => Icon(Icons.android),
      iOSBuilder: (context) => Icon(Icons.apple),
    );
  }
}

构建器优先级

当多个构建器适用于同一平台时，将按照以下顺序确定优先级：更具体的构建器优先于较通用的构建器。

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return PlatformBuilder(
      builder: (context) {...},
      nativeBuilder: (context) {...},
      androidBuilder: (context) {...},
    );
  }
}

在Web平台上，这三个构建器都适用，但优先级将是：

1. androidBuilder
2. nativeBuilder
3. builder

平台解析器

对于非小部件值的解析，可以使用PlatformResolver API来实现基于平台的值解析：

const platformResolver = PlatformResolver<String>(
  defaultResolver: () => "Unknown",
  androidResolver: () => "Android",
  nativeResolver: () => "Native",
);

print(platformResolver.current); // 输出: Android
print(platformResolver.resolve(Platforms.iOS)); // 输出: Native
print(platformResolver.resolve(Platforms.web)); // 输出: Unknown

示例项目

下面是一个完整的示例项目，展示了如何初始化并使用PlatformBuilder来显示不同平台上的文本信息：

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();

    Platform.init(supportedPlatforms: {
      Platforms.web,
      Platforms.android,
      Platforms.iOS,
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: PlatformBuilder(
            webBuilder: (_context) => const Text('You are on web!'),
            iOSBuilder: (_context) => const Text('You are on iOS!'),
            androidBuilder: (_context) => const Text('You are on Android!'),
          ),
        ),
      ),
    );
  }
}