Flutter平台目标UI适配插件ui_target_platform的使用

Flutter平台目标UI适配插件ui_target_platform的使用

UITargetPlatform 是一个用于在不同平台上进行UI适配的插件。当前版本的 TargetPlatform 枚举不包含针对 Web 平台的值。因此，在处理 Web 平台时，不能直接使用 Theme.of(context).platform，而需要使用全局变量 kIsWeb。

此插件包含了一个新的枚举 UITargetPlatform，它包含了与 TargetPlatform 相同的值，并新增了 web 值。此外，还包含了一个用于测试的全局变量 debugDefaultUITargetPlatformIsWeb。该插件的 test_screen 模块使用此变量来进行 Web 测试。

使用方法

要从 Theme 获取 TargetPlatform 并将其传递给 UITargetPlatform.fromTargetPlatform()：

[@override](/user/override)
Widget build(BuildContext context) {
  // 获取当前平台的 UITargetPlatform
  final platform = UITargetPlatform.fromTargetPlatform(Theme.of(context).platform);

  // 根据不同的平台返回不同的组件
  switch (platform) {
    case UITargetPlatform.iOS:
      return _cupertinoSlider();
    case UITargetPlatform.web:
      return _webSlider();
    default:
      return _defaultSlider();
  }
}

你也可以直接使用 UITargetPlatform.of(context)，这等同于 UITargetPlatform.fromTargetPlatform(Theme.of(context).platform)：

final platform = UITargetPlatform.of(context);

示例代码

以下是一个完整的示例代码，展示了如何在多个平台上适配 UI。

import 'package:flutter/material.dart';
import 'screens/multi_platform/multi_platform_screen.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ui_target_platform Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MultiPlatformScreen(),
    );
  }
}

在这个示例中，MultiPlatformScreen 类会根据当前平台返回不同的组件。例如：

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

class MultiPlatformScreen extends StatelessWidget {
  const MultiPlatformScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取当前平台的 UITargetPlatform
    final platform = UITargetPlatform.of(context);

    // 根据不同的平台返回不同的组件
    switch (platform) {
      case UITargetPlatform.iOS:
        return _cupertinoSlider();
      case UITargetPlatform.web:
        return _webSlider();
      default:
        return _defaultSlider();
    }
  }

  Widget _cupertinoSlider() {
    return Center(
      child: Text('This is an iOS slider'),
    );
  }

  Widget _webSlider() {
    return Center(
      child: Text('This is a web slider'),
    );
  }

  Widget _defaultSlider() {
    return Center(
      child: Text('This is a default slider'),
    );
  }
}