Flutter UI组件插件gluestack_ui的使用

gluestack-ui-flutter 是一个通用的UI库，提供了可选样式的无障碍组件。这些组件旨在方便地集成到使用Flutter开发的应用程序中。

文档

gluestack-ui-flutter 库旨在增强Web和移动应用开发。它具有跨平台的一致性组件，提供灵活的样式选项，并强调无障碍性。专为Web开发设计，包括适合Web的组件、原生Web样式、响应式设计和流畅的动画。关键考虑因素包括Flutter Web特定性、性能优化和社区参与。该库还支持集中样式管理、一致性、可重用性、可扩展性、高效开发和快速原型制作，旨在促进协作并确保独特的高性能UI体验。

以下是几个帮助你了解 gluestack-ui-flutter 能力的链接：

• 小部件示例（故事书）: https://gluestack-ui-example.web.app/#/storybook
• 入门示例: https://github.com/gluestack/flutter-examples
• 厨房水槽（使用Gluestack构建的示例布局）: https://kitchensink-23184.web.app/
• 令牌配置器: https://token-configurator.web.app/

要跟踪 gluestack-ui-flutter 的最新发展，可以参考以下链接: https://github.com/gluestack/gluestack-ui-flutter/tree/feature/core-widgets。

我们从 gluestack-ui 中获得灵感来创建 gluestack-ui-flutter。请参阅以下链接以获取更多信息: https://flutter.gluestack.io/docs/overview/introduction。

特性

• 可定制的小部件: 库中的每个小部件都有一组可定制的属性，允许你根据具体需求调整其外观和行为。
• 声明性和动态样式: 使用JSON进行样式配置，使你能够采用更声明性的UI设计方法。这在需要动态更改样式或从外部源加载样式时特别强大。
• Web专注: 虽然Material和Cupertino在移动设备上表现出色，但 gluestack-ui 可以为Web体验定制，提供针对桌面交互和布局优化的组件。考虑响应式设计、鼠标悬停交互和Web特定的UI模式。
• 开发者的灵活性: 提供内联样式覆盖，让开发者能够在个别情况下快速自定义组件，而无需修改JSON配置进行小改动。
• 响应式设计: 这些小部件使用现代Web设计原则构建，并且完全响应式，可以在各种设备和屏幕尺寸上无缝工作。
• 文档齐全: 每个组件都有详尽的文档，包括属性列表和示例，帮助你快速上手。
• 易于使用: 这些小部件设计简单易用，方便集成到现有的Flutter应用程序中。只需安装库并导入所需的组件即可。
• 独立于Material Design标准: 传统UI框架如Material Design提供了预定义的设计原则和指南。虽然有益，但它们可能并不总是与每个应用的具体美学或功能需求相匹配。通过摆脱对Material Design的依赖，开发者获得了自由，可以创建符合其应用独特需求和品牌的小部件。此外，从Material Design解耦可以优化性能，特别是对于轻量级和快速加载的界面。这种独立性赋予开发者对性能特征更大的控制权，有可能提升用户体验并减少资源消耗。
• 频繁更新: 我们一直在努力改进库并添加新组件。关注我们的GitHub以获取最新的发布和功能。
• 社区支持: 需要帮助使用库或有关于新功能的建议？加入我们的 Discord 频道，与社区互动并获得支持。

安装

在你的依赖项中添加包：

dependencies:
  gluestack_ui: 0.1.0-beta.4

或者

dependencies:
  gluestack_ui:
    git: https://github.com/gluestack/gluestack-ui-flutter.git

使用

将 <code>GSApp</code> 用 <code>GluestackProvider</code> 包裹起来。

GluestackProvider(
  child: GSApp.router(
    ....
)

以下是如何在Flutter应用中使用 <code>GSButton</code> 组件的一个示例：

import 'package:gluestack_ui/gluestack_ui.dart';

GSButton(
  action: GSButtonActions.negative,
  variant: GSButtonVariants.solid,
  size: GSButtonSizes.$lg,
  onPressed: () {},
  style: GSStyle(
    web: GSStyle(
      bg: $GSColors.amber600,
    ),
    ios: GSStyle(
      bg: $GSColors.pink600,
    ),
    onHover: GSStyle(
      bg: $GSColors.green400,
    ),
    md: GSStyle(
      bg: $GSColors.pink400,
    ),
  ),
  child: const GSButtonText(text: "Click Here"),
)

所有Gluestack小部件都支持暗色主题。包会检测Gluestack内置的 <code>GSTheme.of(context).brightness</code> 的当前主题。因此，你可以通过GSApp本身使用你选择的状态管理来管理主题模式。

通过令牌配置自定义令牌

你可以自定义默认令牌以提供自己的设计值。

GluestackProvider(
  gluestackTokenConfig: GluestackTokenConfig(
    gsColorsToken: const GSColorsToken(
      primary600: Colors.pink,
      primary700: Colors.pink,
    ),
    gsFontSizeToken: const GSFontSizeToken(
      $sm: 12,
      $md: 14,
    ),
    // 更多令牌配置...
  ),
  child: GSApp.router(
    ....
  ),
)

提供自定义小部件配置

我们已经基于Figma配置文件构建了这些小部件。如果你想要自定义包提供的默认值，可以通过指定自己的配置来自定义单个小部件。

注意: 配置格式必须与Gluestack内部使用的格式相同。例如，对于按钮，请参阅默认的 配置文件。

以下示例提供了 <code>GSButton</code> 小部件的自定义配置。

// 示例按钮配置。
const Map<String, dynamic> customButtonConfig = {
  ...
  '_dark': {
    'bg': '\$primary400',
    'borderColor': '\$primary700',
    ':hover': {
      'bg': '\$error300',
      'borderColor': '\$primary400',
    }
  }
  ...
};

GluestackProvider(
  gluestackCustomConfig: GluestackCustomConfig(
    button: customButtonConfig,
    buttonText: customButtonTextConfig,
    ...
  ),
  gluestackTokenConfig: GluestackTokenConfig(...),
  child: GSApp.router(
    ...
  ),
)

主题

你可以使用 <code>gsThemeToken</code> 参数在 <code>GluestackProvider</code> 中的 <code>gluestackTokenConfig</code> 下自定义你的应用主题。

gluestack-ui-flutter 提供了两个默认主题，即浅色和深色主题，分别命名为 ‘light_theme’ 和 ‘dark_theme’。

要修改基主题中的某些特定颜色，只需创建一个Map，如下所示：

const myTheme = {
  "light_theme": {
    "colors": {
      'primary300': Color(0xffE11D48),
      'primary400': Color(0xffE11D48),
      'primary600': Color(0xffE11D48),
      'primary700': Color(0xffE11D48),
      'success500': Color(0xffE11D48),
    }
  },
}

然后，像这样提供给 <code>gsThemeToken</code>:

return GluestackProvider(
  gluestackTokenConfig: GluestackTokenConfig(
    gsThemeToken: myTheme,
  ),
  child: GSApp(
    theme: GSThemeData.fromTheme('light_theme'),
  ),
)

要全局动态切换主题，可以像这样提供上述示例中的主题，其中 <code>currentTheme</code> 是一个状态变量，其值可以是 ‘light_theme’ 或 ‘dark_theme’ 或自定义主题名称。

theme: GSThemeData.fromTheme(currentTheme),

要完全创建一个新的主题，可以创建上述示例中的 <code>myTheme</code> 变量，如下所示：

const myTheme = {
  "cyan_theme": {
    "colors": {
      "primary0": Color(0xFFB2EBF2),
      "primary50": Color(0xFF80DEEA),
      "primary100": Color(0xFF4DD0E1),
      "primary200": Color(0xFF26C6DA),
      "primary300": Color(0xFF00BCD4),
      "primary400": Color(0xFF00ACC1),
      "primary500": Color(0xFF0097A7),
      "primary600": Color(0xFF00838F),
      "primary700": Color(0xFF006064),
      "primary800": Color(0xFF004D40),
      "primary900": Color(0xFF00332A),
      "primary950": Color(0xFF00251A),
      "secondary0": Color(0xFFB2EBF2),
      "secondary50": Color(0xFF80DEEA),
      "secondary100": Color(0xFF4DD0E1),
      "secondary200": Color(0xFF26C6DA),
      "secondary300": Color(0xFF00BCD4),
      "secondary400": Color(0xFF00ACC1),
      "secondary500": Color(0xFF0097A7),
      "secondary600": Color(0xFF00838F),
      "secondary700": Color(0xFF006064),
      "secondary800": Color(0xFF004D40),
      "secondary900": Color(0xFF00332A),
      "secondary950": Color(0xFF00251A),
      //... 其他主题颜色 ...
    },
  },
}

要检查应用当前使用的主题，可以访问 <code>GSTheme.of(context).themeId</code>。以下是一个示例，说明如何根据当前应用主题条件使用颜色值。

GSTheme.of(context).themeId == 'dark_theme'
  ? const Color(0xFF262626)
  : null,