Flutter UI组件库 (JUI) 介绍

您是否正在寻找一种方法来简化Flutter开发过程，并创建美观、一致的用户界面？您的搜索到此为止！我们的Flutter UI组件库（JUI）提供了广泛的预构建、可自定义组件，帮助您快速构建令人惊叹的应用程序。

快速链接

• Pub包地址：https://pub.dev/packages/jui
• GitHub仓库：https://github.com/ThinkerJack/jui
• 在线文档：https://www.yuque.com/jui_flutter/kb/howistv001f1ghp9

为什么选择我们的UI组件库？

1. 丰富的组件集合：从基本按钮到复杂表单，我们的库涵盖了所有UI需求。
2. 可定制且灵活：每个组件都高度可定制，让您保持应用程序的独特外观和感觉。
3. 易于使用：清晰的文档和直观的API，让您轻松将我们的组件集成到您的项目中。
4. 节省时间：减少UI实现的时间，将更多精力放在应用程序的核心功能上。
5. 一致的设计：通过我们精心设计的组件，确保整个应用程序的外观协调一致。

组件详解

我们的库包含多种组件，每个组件都经过精心设计，以满足不同的UI需求。以下是对各类组件的详细介绍：

1. 通用组件

1.1 JuiButton（多样化按钮）

JuiButton提供了多种样式和尺寸的按钮选择：

• 多种颜色类型：包括蓝色、灰色、红色等，适应不同的UI主题。
• 可选尺寸：从小型到大型，满足各种布局需求。
• 自定义功能：支持添加图标、调整字体大小、设置点击事件等。

1.2 JuiDashedBorder（虚线边框）

JuiDashedBorder为容器提供了引人注目的虚线边框设计：

• 可自定义虚线样式：调整虚线的宽度、高度、间距等。
• 支持圆角：可设置边框的圆角半径，增加设计的灵活性。
• 互动功能：可添加点击事件，增强用户交互体验。

2. 数据展示

2.1 JuiExpandableText（可展开文本）

JuiExpandableText适用于管理长文本内容：

• 自动折叠：超过指定行数的文本会自动折叠。
• 展开/收起功能：用户可以通过点击展开或收起全文。
• 自定义样式：支持设置文本样式、展开/收起按钮样式等。

2.2 JuiHighlightedText（高亮文本）

JuiHighlightedText用于在文本中突出显示特定内容：

• 灵活的高亮方式：支持多个高亮词，每个词可有不同的样式。
• 可点击功能：高亮部分可设置点击事件，增加交互性。
• 样式自定义：可单独设置普通文本和高亮文本的样式。

2.3 JuiTag（可自定义标签）

JuiTag提供了丰富的标签设计选项：

• 多种颜色和形状：包括圆角矩形、圆形等，颜色可自定义。
• 支持图标：可在标签中添加图标，增强视觉效果。
• 大小可调：适应不同的布局需求。

2.4 JuiNoContent（空状态页面）

JuiNoContent用于优雅地展示无内容状态：

• 预设样式：提供多种常见的空状态设计。
• 自定义能力：支持自定义图片、文字和布局。
• 响应式设计：自适应不同屏幕尺寸。

3. 数据录入

3.1 JuiCheckBox（复选框）

JuiCheckBox提供了灵活的多选功能：

• 多种样式：支持方形和圆形两种基本样式。
• 状态管理：轻松处理选中、未选中和禁用状态。
• 自定义外观：可调整大小、颜色等视觉属性。

3.2 JuiSelectPicker（选择器）

JuiSelectPicker提供了多种类型的选择器：

• 滚轮选择器：适合选择日期、时间等连续数据。
• 列表选择器：适用于长列表项的选择。
• 操作选择器：类似于底部弹出的操作表，适合少量选项的快速选择。
• 支持单选和多选：灵活满足不同的选择需求。
• 自定义选项样式：可自定义选项的外观和布局。

3.3 CustomTimePicker（时间选择器）

CustomTimePicker提供了全面的时间选择功能：

• 多种时间格式：支持年月日、年月、年月日时分等多种格式。
• 范围选择：支持选择时间范围。
• 灵活配置：可设置最小和最大可选时间。
• 自定义外观：可调整选择器的样式以匹配您的应用主题。

4. 反馈

4.1 JuiDialog（对话框）

JuiDialog提供了丰富的对话框选项：

• 标准对话框：用于显示信息和确认操作。
• 输入对话框：允许用户在对话框中输入文本。
• 自定义对话框：支持完全自定义对话框内容。
• 灵活的按钮配置：可自定义确认和取消按钮的文本和行为。
• 样式定制：可调整对话框的宽度、标题样式等。

5. 表单

我们的表单组件集提供了全面的解决方案：

5.1 JuiCustomItem（自定义表单项）

• 允许完全自定义表单项的内容和布局。

5.2 JuiTextDetailItem（文本详情项）

• 用于展示只读的文本信息，适合详情页面。

5.3 JuiTapItem（可点击项）

• 创建可点击的表单项，通常用于导航或触发操作。

5.4 JuiRangeItem（范围选择项）

• 允许用户输入或选择一个数值范围。

5.5 JuiTextInputItem（文本输入项）

• 提供各种文本输入选项，支持单行、多行、数字等输入类型。

所有表单项都支持：

• 必填标记
• 禁用状态
• 自定义样式
• 错误提示
• 辅助说明文本

快速开始

集成我们的组件非常简单。首先，在您的pubspec.yaml文件中添加依赖：

dependencies:
  jui: ^latest_version

然后，在您的代码中导入并使用组件。例如：

import 'package:jui/jui.dart';

// 在您的widget构建方法中
JuiButton(
  colorType: JuiButtonColorType.blue,
  sizeType: JuiButtonSizeType.large,
  text: "开始使用",
  onTap: () {
    // 您的操作代码
  },
)

文档

我们为每个组件提供全面的文档，包括：

• 详细的参数描述
• 代码示例
• 使用最佳实践

我们的在线文档始终保持最新，您可以在这里访问：https://www.yuque.com/jui_flutter/kb/howistv001f1ghp9

立即开始构建更好的UI！

不要让UI开发拖慢您的脚步。使用我们的Flutter UI组件库，您可以比以往更快地创建专业外观的应用程序。在您的下一个项目中尝试一下，体验不同！

准备好提升您的Flutter开发了吗？今天就开始使用我们的UI组件库吧！

---

如果您有任何问题或建议，欢迎在我们的 GitHub 仓库 上提出 issue 或贡献代码。我们期待您的反馈，共同改进这个组件库！