flutter_widegt_wangyan 0.0.6 flutter_widegt_wangyan: ^0.0.6 copied to clipboard
A new Flutter package project.
flutter_widegt_wangyan #
一个flutter的ui库,其中包含多种常用的组件
WyButton 按钮 #
按钮用于触发一个操作,如提交表单
代码示例
WyButton(
text: '大按钮',
type: ButtonType.info,
size: ButtonSize.large,
onClick: (){},
),
WyButton(
text: '迷你按钮',
type: ButtonType.warning,
block: false,
size: ButtonSize.mini,
onClick: (){},
),
WyButton(
text: '常规按钮',
type: ButtonType.danger,
block: false,
size: ButtonSize.normal,
onClick: (){},
),
WyButton(
text: '小按钮',
type: ButtonType.primary,
size: ButtonSize.small,
block: false,
onClick: (){},
),
参数说明
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
text | 按钮文字 | Sting | 按钮 |
type | 类型,可选值为 primary info warning danger | ButtonType | ButtonType.primary |
plain | 是否为朴素按钮 | bool | false |
hairline | 是否使用 0.5px 边框 | bool | false |
loading | 是否显示为加载状态 | bool | false |
block | 是否为块级元素 | bool | false |
shape | 按钮的形状,可选择为square,round | ShapeType | ShapeType.square |
loadingType | 加载器的类型 | ShapeType | ShapeType.square |
size | 尺寸,可选值为 large small mini,normal | ButtonSize | ButtonSize.normal |
disabled | 是否禁用按钮 | bool | false |
icon | 左侧图标名称 | IconData | null |
color | 自定义主题颜色 | Color | null |
onClick | 点击事件 | VoidCallback | null |
style | 按钮的主题,详情请看下表 | WyButtonStyle | null |
WyButtonStyle
参数color的优先级要高于WyButtonStyle,设置color可以覆盖WyButtonStyle中的backgroundColor,borderColor
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
backgroundColor | 按钮的背景颜色 | Color | Colors.white |
borderColor | 按钮的边框颜色,当plain为true时,有效 | Color | Color(0xffeaebec) |
textColor | 按钮的文字颜色 | Color | Colors.black |
miniPadding | 但按钮的type为mini时,按钮内的默认padding | EdgeInsets | EdgeInsets.symmetric(horizontal: 6.0, vertical: 4.0) |
smallPadding | 但按钮的type为small时,按钮内的默认padding | EdgeInsets | EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0) |
normalPadding | 但按钮的type为normal时,按钮内的默认padding | EdgeInsets | EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0) |
largePadding | 但按钮的type为large时,按钮内的默认padding | EdgeInsets | EdgeInsets.symmetric(horizontal: 24.0, vertical: 20.0) |
WyPopup 弹出层 #
弹出层容器,用于展示弹窗、信息提示等内容
代码示例
WyPopup.showSheet<num>(
context,
height: 300,
builder: (context) => Container(
alignment: Alignment.center,
child: FlatButton(
child: Text('按钮'),
onPressed: () => {Navigator.pop(context, 100)},
),
),
)).then((onValue) => {print(onValue)})
参数说明
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
overlay | 是否显示遮罩层 | bool | true |
overlayColor | 弹出层空白区域的颜色如果为null,则为透明色 | Color | null |
position | 弹出层的位置,可选值为top, bottom, right, left | PopupPosition | PopupPosition.bottom |
closeOnClickOverlay | 是否在点击遮罩层后关闭 | bool | true |
closeable | 是否显示关闭图标 | bool | false |
closeIcon | 关闭按钮的widget | IconData | icons.cancel |
iconPosition | 关闭按钮的位置 | PopupCloseIconPosition | PopupCloseIconPosition.topRight |
closeIconBuilder | 关闭按钮的构造方法,优先级高于closeIcon | WidgetBuilder | null |
curve | 动画类名, 动画的运动曲线 | Curve | Curves.ease |
height | 弹出层的高度 当弹出层的位置position为left或者right时,该值无效 | double | null |
width | 弹出层的宽带 | double | null |
round | 是否显示圆角 | bool | false |
builder | 弹出层的内容区域 | WidgetBuilder | null |
style | 弹出层的主题,详情请看下表 | WyPopupStyle | WyPopupStyle.defaultTheme |
WyPopupStyle
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
primaryColor | 弹框内容的背景色 | Color | Colors.white |
iconSize | closeIcon的大小 | double | 22 |
iconColor | closeIcon的颜色 | Color | Colors.white |
width | 当position为left或right时,弹框的默认宽度 | double | 260 |
height | 当position为top或bottom时,弹框的默认高度 | double | 360 |
WyToast 轻提示 #
在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。
代码示例
WyToast(context, message: "提示文字");
onClick: () async {
WyToast.loading(context, message: "登录中", duration: 0);
await Future.delayed(Duration(seconds: 2));
WyToast.remove();
}
方法
参数 | 说明 | 参数 | 返回 |
---|---|---|---|
WyToast | 展示提示 | options | WyToast 实例 |
WyToast.loading | 展示加载提示 | options | WyToast 实例 |
WyToast.fail | 展示失败提示 | options | WyToast 实例 |
WyToast.success | 展示成功提示 | options | WyToast 实例 |
WyToast.remove | 关闭提示 | - | void |
参数说明(options)
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
message | 文本内容, 必填项 | String | null |
context | 上下文环境,必填项 | BuildContext | null |
forbidClick | 是否禁止背景点击 | bool | false |
overlay | 是否显示背景遮罩层 | bool | false |
duration | 展示时长(ms),值为 0 时,toast 不会消失 | double | 2000 |
animationTime | toast动画的animation时长 | Duration | Duration(milliseconds: 200) |
position | 位置,可选值为 top bottom center | Position | Position.center |
iconData | 自定义图标 | IconData | null |
iconBuilder | 自定义icon的构造函数 | WidgetBuilder | null |
type | 提示类型,可选值为 message loading success fail widget | ToastType | ToastType.message |
style | WyToast的默认样式,详情看下表 | WyToastStyle | WyToastStyle.defaultStyle |
wyToastStyle
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
toastMaxWidth | WyToast最大宽度 | String | 70% |
toastFontSize | WyToast的字体大小 | double | 16 |
toastTextColor | WyToast的字体的颜色 | Color | Colors.white |
toastLoadingIconColor | WyToast的加载器的颜色 | Color | Colors.white |
toastLineHeight | WyToast的字体行高 | double | 20 |
toastBorderRadius | WyToast的圆角大小 | Radius | Radius.circular(8.0) |
toastBackgroundColor | WyToast的背景颜色 | Color | Color.fromRGBO(0, 0, 0, 0.7) |
toastOverlayBackgroundColor | WyToast的背景蒙层的颜色 | Color | Color.fromRGBO(0, 0, 0, 0.3) |
toastIconSize | WyToast的icon图标大小 | double | 60 |
toastTextPadding | WyToast的type类型为ToastType.message时的padding值 | EdgeInsets | EdgeInsets.symmetric(horizontal: 10, vertical: 12) |
toastDefaultPadding | WyToast的type类型不为ToastType.message时的padding值 | double | 30 |
toastDefaultWidth | WyToast的type类型不为ToastType.message时的width | double | 150 |
toastPositionTopDistance | WyToast距离top的值 | String | 20% |
toastPositionBottomDistance | WyToast距离bottom的值 | String | 20% |