Flutter跨平台UI组件插件enough_platform_widgets的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter跨平台UI组件插件enough_platform_widgets的使用

enough_platform_widgets 是一个为Flutter开发者提供的更多跨平台小部件的库。它基于 flutter_platform_widgetscupertino_stepper 等优秀包,提供了丰富的跨平台组件。

安装

在您的 pubspec.yaml 文件中添加如下依赖:

dependencies:
  enough_platform_widgets: ^1.0.0

Flutter版本支持

  • 对于 Flutter 3.16 及以上版本,请使用 1.0 或更高版本。
  • 对于之前的 Flutter 版本,请使用 0.7.4 版本。

平台小部件和方法

这些平台小部件根据所选平台使用其对应的Material或Cupertino小部件。以下是部分示例:

  • DecoratedPlatformTextField
  • DensePlatformIconButton
  • DialogHelper
  • PlatformBottomBar
  • PlatformCheckboxListTile
  • PlatformChip
  • PlatformDialogActionButton
  • PlatformDialogActionText
  • PlatformDropdownButton
  • PlatformFilledButtonIcon
  • PlatformInkWell
  • PlatformPageScaffold
  • PlatformPopupButton
  • PlatformProgressIndicator
  • PlatformRadioListTile
  • PlatformSliverAppBar
  • PlatformSnackApp
  • PlatformStepper
  • PlatformTextButtonIcon
  • PlatformToggleButtons
  • PlatformToolbar
  • SelectablePlatformListTile
  • showPlatformTimePicker()
  • showPlatformDatePicker()

此外,所有 flutter_platform_widgets 都可用。

Cupertino小部件

当前提供的Cupertino小部件包括:

  • CupertinoBar
  • CupertinoCheckboxListTile
  • CupertinoChip
  • CupertinoDropdownButton
  • CupertinoInkWell
  • CupertinoMultipleSegmentedControl
  • CupertinoPageScaffoldWithToolbar
  • CupertinoPageWithBar
  • CupertinoRadioListTile
  • CupertinoSearchFlowTextField
  • CupertinoSnackApp
  • CupertinoToolbar

示例代码

以下是一个简单的示例,展示了如何使用 enough_platform_widgets 创建一个包含基本列表项的应用程序:

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

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

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

  @override
  Widget build(BuildContext context) {
    return PlatformApp(
      title: 'Platform App Example',
      material: (context, platform) => MaterialAppData(
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: Text('Hello World'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: ListView(
              children: [
                SelectablePlatformListTile(
                  title: Text('List Tile 1'),
                ),
                SelectablePlatformListTile(
                  title: Text('List Tile 2'),
                ),
                SelectablePlatformListTile(
                  title: Text('List Tile 3'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

这个例子展示了一个基础的应用结构,其中包含了一个顶部栏(PlatformAppBar)和一个列表视图(ListView),每个列表项都是一个跨平台的列表项(SelectablePlatformListTile)。通过这种方式,您可以轻松地构建出适应不同平台特性的用户界面。


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

1 回复

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


当然,下面是一个关于如何使用 enough_platform_widgets 这个 Flutter 跨平台 UI 组件插件的示例代码。这个插件提供了一系列在不同平台上具有原生风格的 UI 组件。

首先,确保你已经在 pubspec.yaml 文件中添加了 enough_platform_widgets 依赖:

dependencies:
  flutter:
    sdk: flutter
  enough_platform_widgets: ^最新版本号  # 替换为最新的版本号

然后,运行 flutter pub get 来获取依赖。

接下来,下面是一个简单的示例,展示如何使用 enough_platform_widgets 提供的一些组件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Enough Platform Widgets Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PlatformScaffold(
        appBar: PlatformAppBar(
          title: Text('Enough Platform Widgets Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              PlatformButton(
                material: (_, __) => MaterialButtonData(
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
                cupertino: (_, __) => CupertinoButtonData(
                  color: CupertinoColors.activeBlue,
                ),
                onPressed: () {
                  print('Button pressed!');
                },
                child: Text('Click Me'),
              ),
              SizedBox(height: 20),
              PlatformTextField(
                decoration: InputDecoration(
                  labelText: 'Enter some text',
                ),
              ),
              SizedBox(height: 20),
              PlatformSwitch(
                value: true,
                onChanged: (value) {
                  print('Switch value: $value');
                },
              ),
              SizedBox(height: 20),
              PlatformAlertDialog(
                title: Text('Alert'),
                content: Text('This is an alert dialog!'),
                actions: <Widget>[
                  PlatformButton(
                    material: (_, __) => MaterialButtonData(
                      color: Colors.red,
                      textColor: Colors.white,
                    ),
                    cupertino: (_, __) => CupertinoButtonData(
                      color: CupertinoColors.destructiveRed,
                    ),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('OK'),
                  ),
                ],
              ).show(context), // Note: This will immediately show the dialog.
            ],
          ),
        ),
      ),
    );
  }
}

解释

  1. PlatformScaffold: 提供一个跨平台的脚手架,它在 iOS 上表现为 CupertinoScaffold,在 Android 上表现为 MaterialScaffold。
  2. PlatformAppBar: 跨平台的 AppBar,它在不同平台上具有不同的风格。
  3. PlatformButton: 跨平台的按钮,支持 Material 和 Cupertino 风格。
  4. PlatformTextField: 跨平台的文本输入框。
  5. PlatformSwitch: 跨平台的开关组件。
  6. PlatformAlertDialog: 跨平台的对话框,支持 Material 和 Cupertino 风格。

注意事项

  • 在实际使用中,你可以根据平台条件(如 Theme.of(context).platform)来进一步定制组件的行为和样式。
  • 确保你检查并更新到 enough_platform_widgets 的最新版本,以获取最新的功能和修复。

希望这个示例能够帮助你更好地理解如何使用 enough_platform_widgets 插件!

回到顶部