简介

Flutter UI组件库

组件文档

通用

按钮

使用方式：

            JacButton(
              colorType: JacButtonColorType.blue,
              sizeType: JacButtonSizeType.ultraSmall,
              text: "最小号蓝色按钮",
              onTap: () {},
            ),
      
            JacButton(
              colorType: JacButtonColorType.blue,
              sizeType: JacButtonSizeType.small,
              text: "小号蓝色按钮",
              onTap: () {},
            ),

            JacButton(
              colorType: JacButtonColorType.blue,
              sizeType: JacButtonSizeType.middle,
              text: "中号蓝色按钮",
              onTap: () {},
            ),
      
            JacButton(
              colorType: JacButtonColorType.blue,
              sizeType: JacButtonSizeType.large,
              text: "大号蓝色按钮",
              onTap: () {},
            ),
     
            JacButton(
              colorType: JacButtonColorType.white,
              sizeType: JacButtonSizeType.large,
              text: "大号白色按钮",
              onTap: () {},
            ),
       
            JacButton(
              colorType: JacButtonColorType.gray,
              sizeType: JacButtonSizeType.large,
              text: "大号灰色按钮",
              onTap: () {},
            ),
        
            JacButton(
              colorType: JacButtonColorType.blueBorder,
              sizeType: JacButtonSizeType.large,
              text: "大号蓝边按钮",
              onTap: () {},
            ),
     
            JacButton(
              colorType: JacButtonColorType.blueBorder,
              sizeType: JacButtonSizeType.large,
              width: 230,
              height: 80,
              text: "自定义宽高按钮",
              onTap: () {},
            ),

图片示例：

参数：

  final Function onTap; //点击事件
  final String text; //文本内容
  final JacButtonSizeType sizeType; //大小类型
  final JacButtonColorType colorType; //颜色类型
  final bool? visibility; //是否展示
  final bool disable; //是否禁用
  final double? width; //宽度
  final double? height; //高度
  final double? fontSize; //文字大小
  final double? circular; //圆角度
  final double? fontHeight; //文字行高

数据展示

文本

富文本组件

使用方式：

            HighlightedText.builder(
              text: "全部文案包含高亮文案测试用",
              highlights: [
                HighlightWord(
                  "文案",
                  () {
                    debugPrint("文案");
                  },
                  highlightStyle: const TextStyle(color: Colors.red),
                ),
                HighlightWord("含", () {
                  debugPrint("含");
                }),
                HighlightWord("测试", () {
                  debugPrint("测试");
                }),
              ],
              defaultTextStyle: const TextStyle(color: Colors.black, fontSize: 16),
              defaultHighlightStyle: const TextStyle(color: Colors.cyanAccent, fontSize: 16),
            )

图片示例：

参数：

    required String text,//全部文本内容
    List<HighlightWord> highlights = const [],//高亮数据集合
    TextStyle? defaultTextStyle,//默认文本样式
    TextStyle? defaultHighlightStyle,//高亮文本样式
    int maxLines = 5,//最大行数
    TextOverflow overflow = TextOverflow.ellipsis,//文本超出样式

class HighlightWord {
  final String word;//文字内容
  final VoidCallback onTap;//点击事件
  final TextStyle? highlightStyle;//高亮样式

  HighlightWord(this.word, this.onTap,{ this.highlightStyle});
}

展开收起文本

使用方式：

  ExpandableText(
              content: '测试' * 50,
              maxLines: 3,
            ),

图片示例：

参数：

  final String content; //文本内容
  final String expandText; //展开文字
  final String collapsedText; //收起文字
  final int maxLines; //最大行数
  final bool canCollapsed; //是否支持收起
  final TextStyle? contentTextStyle; //普通文本样式
  final TextStyle? expandTextStyle; //展开收起文本样式

标签

使用方式：

                  JacTag(
                    paddingVertical: 1,
                    paddingHorizontal: 6,
                    tagType: JacTagType.text,
                    tagShapeType: JacTagShapeType.rectangle,
                    tagColorType: JacTagColorType.blue,
                    text: "标签",
                    fontSize: 12,
                  ),
                  JacTag(
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    tagType: JacTagType.icon,
                    tagShapeType: JacTagShapeType.semicircle,
                    tagColorType: JacTagColorType.blue,
                    text: "标签",
                    icon: Icon(
                      Icons.ac_unit,
                      size: 14,
                      color: Color(0XFF5590F6),
                    ),
                    fontSize: 14,
                  ),
                  JacTag(
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    tagType: JacTagType.icon,
                    tagShapeType: JacTagShapeType.rectangle,
                    tagColorType: JacTagColorType.blue,
                    text: "标签",
                    icon: Icon(
                      Icons.ac_unit,
                      size: 14,
                      color: Color(0XFF5590F6),
                    ),
                    fontSize: 14,
                  ),

                  JacTag(
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    tagType: JacTagType.icon,
                    tagShapeType: JacTagShapeType.capsule,
                    tagColorType: JacTagColorType.blue,
                    text: "标签",
                    icon: Icon(
                      Icons.ac_unit,
                      size: 14,
                      color: Color(0XFF5590F6),
                    ),
                    fontSize: 14,
                  ),

图片示例：

参数：

  final double paddingVertical; //垂直内边距
  final double paddingHorizontal; //水平内边距
  final JacTagType tagType; //tag类型
  final JacTagShapeType tagShapeType; //tag形状类型
  final JacTagColorType tagColorType; //tag颜色类型
  final String text; //文字内容
  final double fontSize; //字体大小
  final Widget? icon; //左侧图标

//tag颜色类型
enum JacTagColorType { black, blue, green, yellow, red, gray }

//tag形状类型
enum JacTagShapeType {
  //半圆
  semicircle,
  //矩形
  rectangle,
  //胶囊
  capsule
}

//tag类型
enum JacTagType {
  //纯文字
  text,
  //icon+文字
  icon
}

数据录入

表单项

点击

使用方式：

              TapItem(
                title: '标题',
                content: '内容',
                tipText: "请输入",
                onTap: () {
                  debugPrint("点击");
                },
              ),
              TapItem(
                title: '标题',
                content: '内容',
                tipText: "请输入",
                isRequired: true,
                maxLine: 1,
                hintText: '请选择',
                showTips: true,
                onTap: () {
                  debugPrint("点击");
                },
              ),

图片示例：

参数：

  final String title; //标题
  final String hintText; //输入框底文
  final String content; //输入框内容
  final Function onTap; //点击事件
  final bool showTips; //是否报错
  final String tipText; //错误文案
  final int maxLine; //文本内容最大行数
  final bool isRequired; //是否是必填