Flutter macOS UI适配插件 reactive_macos_ui 的使用

reactive_macos_ui 是一个用于与 reactive_forms 集成的插件，它封装了 macos_ui 库，以便在 Flutter 应用程序中创建符合 macOS 风格的用户界面。本文将介绍如何使用该插件，并提供一个完整的示例 Demo。

1. 安装依赖

首先，在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  reactive_forms: ^12.0.0 # 请根据最新版本进行调整
  reactive_macos_ui: ^1.0.0 # 请根据最新版本进行调整
  macos_ui: ^0.5.0 # 请根据最新版本进行调整

然后运行 flutter pub get 来安装这些依赖。

2. 创建主应用

接下来，我们将创建一个简单的应用程序，展示如何使用 reactive_macos_ui 插件来构建 macOS 风格的表单。

示例代码

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_macos_ui/reactive_macos_ui.dart';

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

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

  FormGroup buildForm() => fb.group({
        'ratingIndicator': FormControl<double>(
          value: 0,
          validators: [Validators.min(1)],
        ),
        'capacityIndicator': FormControl<double>(
          value: 0,
          validators: [Validators.min(50)],
        ),
        'textField': FormControl<String>(
          value: null,
          validators: [Validators.required],
        ),
        'checkbox': FormControl<bool>(
          value: null,
          // disabled: true,
        ),
        'radio': FormControl<bool>(
          value: null,
        ),
        'switch': FormControl<bool>(
          value: true,
        ),
        'popupButton': FormControl<String>(
          value: 'One',
        ),
      });

  @override
  Widget build(BuildContext context) {
    return MacosApp(
      title: 'macos_ui example',
      theme: MacosThemeData.light().copyWith(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      darkTheme: MacosThemeData.dark().copyWith(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            padding: const EdgeInsets.symmetric(
              horizontal: 20.0,
              vertical: 20.0,
            ),
            child: ReactiveFormBuilder(
              form: buildForm,
              builder: (context, form, child) {
                return Column(
                  children: [
                    ReactiveRatingIndicator<double>(
                      formControlName: 'ratingIndicator',
                      validationMessages: {
                        'min': (_) => 'Please select more than 1',
                      },
                    ),
                    const SizedBox(height: 16),
                    ReactiveCapacityIndicator<double>(
                      formControlName: 'capacityIndicator',
                      validationMessages: {
                        'min': (_) => 'Please select',
                      },
                    ),
                    const SizedBox(height: 16),
                    ReactiveCapacityIndicator<double>(
                      formControlName: 'capacityIndicator',
                      discrete: true,
                      validationMessages: {
                        'min': (_) => 'Please select more than half',
                      },
                    ),
                    const SizedBox(height: 16),
                    ReactiveMacosTextField<String>(
                      formControlName: 'textField',
                    ),
                    const SizedBox(height: 16),
                    ReactiveMacosCheckbox<bool>(
                      formControlName: 'checkbox',
                    ),
                    const SizedBox(height: 16),
                    ReactiveMacosRadioButton<bool, bool>(
                      formControlName: 'radio',
                      value: true,
                    ),
                    ReactiveMacosRadioButton<bool, bool>(
                      formControlName: 'radio',
                      value: false,
                    ),
                    const SizedBox(height: 16),
                    ReactiveMacosSwitch<bool>(
                      formControlName: 'switch',
                    ),
                    const SizedBox(height: 16),
                    ReactiveMacosPopupButton<String, String>(
                      formControlName: 'popupButton',
                      items: <String>['One', 'Two', 'Three', 'Four']
                          .map<MacosPopupMenuItem<String>>((String value) {
                        return MacosPopupMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList(),
                    ),
                    const SizedBox(height: 16),
                    ElevatedButton(
                      child: const Text('Sign Up'),
                      onPressed: () {
                        if (form.valid) {
                          // ignore: avoid_print
                          print(form.value);
                        } else {
                          form.markAllAsTouched();
                        }
                      },
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

3. 关键组件说明

• ReactiveRatingIndicator: 用于显示评分指示器。
• ReactiveCapacityIndicator: 用于显示容量指示器。
• ReactiveMacosTextField: macOS 样式的文本输入框。
• ReactiveMacosCheckbox: macOS 样式的复选框。
• ReactiveMacosRadioButton: macOS 样式的单选按钮。
• ReactiveMacosSwitch: macOS 样式的开关。
• ReactiveMacosPopupButton: macOS 样式的下拉菜单。

4. 运行项目

确保你已经安装了 macOS 开发环境，并且在 macOS 目标上运行你的 Flutter 项目：

flutter run -d macos

这样，你就可以在 macOS 上看到一个符合 macOS 风格的表单界面了。

5. 参考资料

• reactive_forms
• macos_ui
• reactive_macos_ui Example

通过以上步骤，你应该能够成功地在你的 Flutter macOS 应用程序中集成 reactive_macos_ui 插件，并创建出符合 macOS 设计规范的用户界面。