Flutter UI组件库（JUI）
Flutter UI组件库 (JUI) 介绍
您是否正在寻找一种方法来简化Flutter开发过程，并创建美观、一致的用户界面？您的搜索到此为止！我们的Flutter UI组件库（JUI）提供了广泛的预构建、可自定义组件，帮助您快速构建令人惊叹的应用程序。
快速链接
- Pub包地址：pub.dev/packages/ju…
- GitHub仓库：github.com/ThinkerJack…
- 在线文档：http://www.yuque.com/jui_flutter…
为什么选择我们的UI组件库？
- 丰富的组件集合：从基本按钮到复杂表单，我们的库涵盖了所有UI需求。
- 可定制且灵活：每个组件都高度可定制，让您保持应用程序的独特外观和感觉。
- 易于使用：清晰的文档和直观的API，让您轻松将我们的组件集成到您的项目中。
- 节省时间：减少UI实现的时间，将更多精力放在应用程序的核心功能上。
- 一致的设计：通过我们精心设计的组件，确保整个应用程序的外观协调一致。
组件详解
我们的库包含多种组件，每个组件都经过精心设计，以满足不同的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: () {
// 您的操作代码
},
)
文档
我们为每个组件提供全面的文档，包括：
- 详细的参数描述
- 代码示例
- 使用最佳实践
我们的在线文档始终保持最新，您可以在这里访问：http://www.yuque.com/jui_flutter…
立即开始构建更好的UI！
不要让UI开发拖慢您的脚步。使用我们的Flutter UI组件库，您可以比以往更快地创建专业外观的应用程序。在您的下一个项目中尝试一下，体验不同！
准备好提升您的Flutter开发了吗？今天就开始使用我们的UI组件库吧！
如果您有任何问题或建议，欢迎在我们的 GitHub 仓库 上提出 issue 或贡献代码。我们期待您的反馈，共同改进这个组件库！
作者：有趣的杰克
来源：juejin.cn/post/7425814107444740150
来源：juejin.cn/post/7425814107444740150
