Flutter平台适配组件插件flutter_platform_component的使用

Flutter平台适配组件插件flutter_platform_component的使用

Flutter Platform Component

📱 准备好的继承组件基础，使用现成的抽象以快速使用，并按平台分解。

iOS (Cupertino) Android (Material)
✅ ✅

Pub Likes Pub Version License: MIT


VS Code Snippets 已为该包生成：

开始使用

获取开始
文档

请参阅此处的文档以了解如何使用该包和组件 - Flutter Platform Component Wiki。

优势

该包遵循以下原则：填写所需的合同 - 获取所有准备好的继承平台组件。

平台分解

组件根据样式和行为按平台分离。

统一主题合同

扩展主题与ThemeData类非常有用，当你仅使用Material Design时。如果你希望获取针对平台正确行为的小部件，必须填写Theme和CupertinoTheme，并且每次都要记住在你使用的小部件中分离这些颜色。Theme Extension的工作方式与此包相同。在此包的情况下 - 只需要填写所使用的主题的一个合同即可。

组件实体

除了主题之外，还有其他实体，它们的管理方式与主题相同 - 动画、日期、持续时间、触觉反馈、尺寸、文本样式和时间。

优化

每个实体都通过其状态小部件和继承小部件进行更新，以优化通过上下文订阅到实体数据的子小部件的重绘。

色彩方案

色彩方案是在方便设计师（主色、次色、强调色、成功色、警告色和危险色，带有深色/默认/浅色阴影）的前提下创建的。在该方案中，创建了永久颜色和色调颜色（注意 - primaryLight和primaryDark）。

样板代码

准备好的组件可以消除大量的样板代码。

统一API

所有组件属性名称都是统一的，例如，你永远不会看到“background”和“backgroundColor”。

验证

表单字段不仅有正常的验证，还有单独的自动验证，可以在字段中输入字符时用于消息。分段控制、渐变分段控制、滑动分段控制、切换、渐变切换组件也有验证功能（IsRequired标志），并且可以放置在Form小部件的根部。

禁用组件

每个可点击的组件都有实现的禁用属性。

代码片段

已为该包生成了VS Code代码片段，以便于开发和创建自己的小部件包装器。

设计

组件遵循以下设计范式：

  1. 组件不应包含业务逻辑；
  2. 所有组件必须努力达到目标平台的行为；
  3. 如果目标平台食谱中没有这样的组件，则需要一个尽可能相似的组件，并具有相同的行径；
  4. 如果禁用组件只有没有背景色，则组件将改变禁用组件的颜色；
  5. 跨平台组件的设计及其行为不会混合。
依赖项

该包使用以下依赖项的分支：

感谢这些依赖项的作者。

待办事项
  • 组件的提升；
  • 支持WEB & 桌面；
  • FPCTooltip；
  • FPCDrawer；
  • 属性注释脚本以获得pub分数。
额外信息

更多详细信息请查看示例项目。如果您发现任何错误或建议，请随时打开问题。

示例代码

import 'package:flutter_platform_component/flutter_platform_component.dart';
import 'package:example/application/widget/main/main_screen.dart';
import 'package:example/application/navigation_controller.dart';
import 'package:flutter/material.dart';

void main() {
  // 创建导航控制器实例
  final INavigationController navigationController = NavigationController();

  // 启动应用
  runApp(
    FlutterPlatformComponent(
      // 应用程序作为子组件
      child: Application(
        navigationController: navigationController,
      ),
    ),
  );
}

// 应用程序类
class Application extends StatelessWidget {
  const Application({
    super.key,
    required this.navigationController,
  });

  final INavigationController navigationController;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FPCApp(
      // 设置导航键
      navigatorKey: this.navigationController.navigatorKey,
      // 设置路由生成器
      onGenerateRoute: this.navigationController.onGenerateRoute,
      // 初始化路由
      onGenerateInitialRoutes: (
        String route,
      ) => [
            // 从上下文中创建路由
            FPCPageRoute.fromContext(
              context,
              child: const MainScreen(),
            ),
          ],
    );
  }
}

更多关于Flutter平台适配组件插件flutter_platform_component的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter平台适配组件插件flutter_platform_component的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_platform_component 是一个用于在 Flutter 应用中适配不同平台（如 iOS 和 Android）UI 组件的插件。它提供了一组预定义的组件，这些组件在不同平台上会自动适配各自的设计规范，例如 Material Design 和 Cupertino Design。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_platform_component 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_platform_component: ^latest_version

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

基本使用

flutter_platform_component 提供了一些常用的组件，如按钮、文本框、对话框等，这些组件会根据当前平台自动切换样式。

1. 使用平台适配的按钮

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Platform Component Example'),
      ),
      body: Center(
        child: FPCButton(
          onPressed: () {
            // 处理按钮点击事件
          },
          child: Text('Click Me'),
        ),
      ),
    );
  }
}

在这个例子中，FPCButton 会根据当前平台自动切换为 MaterialButton 或 CupertinoButton。

2. 使用平台适配的文本框

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Platform Component Example'),
      ),
      body: Center(
        child: FPCTextField(
          onChanged: (value) {
            // 处理文本框内容变化
          },
          decoration: InputDecoration(
            labelText: 'Enter your name',
          ),
        ),
      ),
    );
  }
}

FPCTextField 会根据当前平台自动切换为 TextField 或 CupertinoTextField。

3. 使用平台适配的对话框

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

class MyHomePage extends StatelessWidget {
  void _showDialog(BuildContext context) {
    FPCAlertDialog(
      title: Text('Alert'),
      content: Text('This is a platform-specific dialog.'),
      actions: [
        FPCButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('OK'),
        ),
      ],
    ).show(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Platform Component Example'),
      ),
      body: Center(
        child: FPCButton(
          onPressed: () => _showDialog(context),
          child: Text('Show Dialog'),
        ),
      ),
    );
  }
}

FPCAlertDialog 会根据当前平台自动切换为 AlertDialog 或 CupertinoAlertDialog。

自定义平台样式

flutter_platform_component 允许你自定义组件的样式。你可以通过传递不同的参数来覆盖默认的平台样式。

FPCButton(
  onPressed: () {
    // 处理按钮点击事件
  },
  child: Text('Custom Button'),
  backgroundColor: Colors.orange,
  textColor: Colors.white,
)
回到顶部