Flutter【组件】按钮

发布于:2024-06-27 ⋅ 阅读:(157) ⋅ 点赞:(0)

简介

flutter 按钮组件。提供一种封装按钮组件的思路,并不支持过多的自定义属性。根据使用场景及设计规范进行封装,使用起来比较方便。

github地址:https://github.com/ThinkerJack/jac_uikit

pub地址:https://pub.dev/packages/jac_uikit

使用方式:

  CButton(
              colorType: CButtonColorType.blue,
              sizeType: CButtonSizeType.ultraSmall,
              text: "最小号蓝色按钮",
              onTap: () {},
            ),
            CButton(
              colorType: CButtonColorType.blue,
              sizeType: CButtonSizeType.small,
              text: "小号蓝色按钮",
              onTap: () {},
            ),
            CButton(
              colorType: CButtonColorType.blue,
              sizeType: CButtonSizeType.middle,
              text: "中号蓝色按钮",
              onTap: () {},
            ),
            CButton(
              colorType: CButtonColorType.blue,
              sizeType: CButtonSizeType.large,
              text: "大号蓝色按钮",
              onTap: () {},
            ),
            CButton(
              colorType: CButtonColorType.white,
              sizeType: CButtonSizeType.large,
              text: "大号白色按钮",
              onTap: () {},
            ),
            CButton(
              colorType: CButtonColorType.gray,
              sizeType: CButtonSizeType.large,
              text: "大号灰色按钮",
              onTap: () {},
            ),
            CButton(
              colorType: CButtonColorType.blueBorder,
              sizeType: CButtonSizeType.large,
              text: "大号蓝边按钮",
              onTap: () {},
            ),
            CButton(
              colorType: CButtonColorType.blueBorder,
              sizeType: CButtonSizeType.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; //文字行高

网站公告

今日签到

点亮在社区的每一天
去签到