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 dangerButtonTypeButtonType.primary
plain是否为朴素按钮boolfalse
hairline是否使用 0.5px 边框boolfalse
loading是否显示为加载状态boolfalse
block是否为块级元素boolfalse
shape按钮的形状,可选择为square,roundShapeTypeShapeType.square
loadingType加载器的类型ShapeTypeShapeType.square
size尺寸,可选值为 large small mini,normalButtonSizeButtonSize.normal
disabled是否禁用按钮boolfalse
icon左侧图标名称IconDatanull
color自定义主题颜色Colornull
onClick点击事件VoidCallbacknull
style按钮的主题,详情请看下表WyButtonStylenull

WyButtonStyle

参数color的优先级要高于WyButtonStyle,设置color可以覆盖WyButtonStyle中的backgroundColor,borderColor

参数说明类型默认值
backgroundColor按钮的背景颜色ColorColors.white
borderColor按钮的边框颜色,当plain为true时,有效ColorColor(0xffeaebec)
textColor按钮的文字颜色ColorColors.black
miniPadding但按钮的type为mini时,按钮内的默认paddingEdgeInsetsEdgeInsets.symmetric(horizontal: 6.0, vertical: 4.0)
smallPadding但按钮的type为small时,按钮内的默认paddingEdgeInsetsEdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0)
normalPadding但按钮的type为normal时,按钮内的默认paddingEdgeInsetsEdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0)
largePadding但按钮的type为large时,按钮内的默认paddingEdgeInsetsEdgeInsets.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是否显示遮罩层booltrue
overlayColor弹出层空白区域的颜色如果为null,则为透明色Colornull
position弹出层的位置,可选值为top, bottom, right, leftPopupPositionPopupPosition.bottom
closeOnClickOverlay是否在点击遮罩层后关闭booltrue
closeable是否显示关闭图标boolfalse
closeIcon关闭按钮的widgetIconDataicons.cancel
iconPosition关闭按钮的位置PopupCloseIconPositionPopupCloseIconPosition.topRight
closeIconBuilder关闭按钮的构造方法,优先级高于closeIconWidgetBuildernull
curve动画类名, 动画的运动曲线CurveCurves.ease
height弹出层的高度 当弹出层的位置position为left或者right时,该值无效doublenull
width弹出层的宽带doublenull
round是否显示圆角boolfalse
builder弹出层的内容区域WidgetBuildernull
style弹出层的主题,详情请看下表WyPopupStyleWyPopupStyle.defaultTheme

WyPopupStyle

参数说明类型默认值
primaryColor弹框内容的背景色ColorColors.white
iconSizecloseIcon的大小double22
iconColorcloseIcon的颜色ColorColors.white
width当position为left或right时,弹框的默认宽度double260
height当position为top或bottom时,弹框的默认高度double360

WyToast 轻提示

在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。

代码示例

WyToast(context, message: "提示文字");
onClick: () async {
	WyToast.loading(context, message: "登录中", duration: 0);
	await Future.delayed(Duration(seconds: 2));
	WyToast.remove();
}

方法

参数说明参数返回
WyToast展示提示optionsWyToast 实例
WyToast.loading展示加载提示optionsWyToast 实例
WyToast.fail展示失败提示optionsWyToast 实例
WyToast.success展示成功提示optionsWyToast 实例
WyToast.remove关闭提示-void

参数说明(options)

参数说明类型默认值
message文本内容, 必填项Stringnull
context上下文环境,必填项BuildContextnull
forbidClick是否禁止背景点击boolfalse
overlay是否显示背景遮罩层boolfalse
duration展示时长(ms),值为 0 时,toast 不会消失double2000
animationTimetoast动画的animation时长DurationDuration(milliseconds: 200)
position位置,可选值为 top bottom centerPositionPosition.center
iconData自定义图标IconDatanull
iconBuilder自定义icon的构造函数WidgetBuildernull
type提示类型,可选值为 message loading success fail widgetToastTypeToastType.message
styleWyToast的默认样式,详情看下表WyToastStyleWyToastStyle.defaultStyle

wyToastStyle

参数说明类型默认值
toastMaxWidthWyToast最大宽度String70%
toastFontSizeWyToast的字体大小double16
toastTextColorWyToast的字体的颜色ColorColors.white
toastLoadingIconColorWyToast的加载器的颜色ColorColors.white
toastLineHeightWyToast的字体行高double20
toastBorderRadiusWyToast的圆角大小RadiusRadius.circular(8.0)
toastBackgroundColorWyToast的背景颜色ColorColor.fromRGBO(0, 0, 0, 0.7)
toastOverlayBackgroundColorWyToast的背景蒙层的颜色ColorColor.fromRGBO(0, 0, 0, 0.3)
toastIconSizeWyToast的icon图标大小double60
toastTextPaddingWyToast的type类型为ToastType.message时的padding值EdgeInsetsEdgeInsets.symmetric(horizontal: 10, vertical: 12)
toastDefaultPaddingWyToast的type类型不为ToastType.message时的padding值double30
toastDefaultWidthWyToast的type类型不为ToastType.message时的widthdouble150
toastPositionTopDistanceWyToast距离top的值String20%
toastPositionBottomDistanceWyToast距离bottom的值String20%

WyImage 轻提示

增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载中提示、加载失败提示。

代码示例

Container(
	alignment: Alignment.center,
	child: Row(
		mainAxisAlignment: MainAxisAlignment.start,
		crossAxisAlignment: CrossAxisAlignment.start,
		children: srcList.map((item) {
			return WyImage(
				src: item,
				width: 150,
				height: 150,
				fit: BoxFit.cover,
				lazyLoad: true,
				radius: Radius.circular(20.0),
			);
		}).toList(),
	))

参数说明

参数说明类型默认值
src图片链接,必填项Stringnull
width宽度,必填项doublenull
height高度, 必填项doublenull
fit图片填充模式BoxFitBoxFit.fill
radius圆角大小RadiusRadius.circular(0.0)
round是否显示为圆形或椭圆形,如果width和height相同则为圆形否则为椭圆RadiusRadius.circular(0.0)
lazyLoad是否开启图片懒加载,须配合 WyLazyLoadScrollView 组件使用boolfalse
showError是否展示图片加载失败提示booltrue
showLoading是否展示图片加载中提示booltrue
errorIcon失败时提示的icon图标IconDataIcons.broken_image
loadingIcon加载时提示的icon图标IconDataIcons.image
loadingBuilder加载时提示widget的构造函数WidgetBuildernull
errorBuilder失败时提示widget的构造函数WidgetBuildernull
errorBuilder失败时提示widget的构造函数WidgetBuildernull
click点击图片时触发Functionnull
load图片加载完毕时触发Functionnull
error图片加载失败时触发Functionnull
progress图片加载过程中时触发ImageChunkListenernull
style组件的样式,详情请看下表WyImageStyleWyImageStyle.defaultStyle

WyImageStyle

参数说明类型默认值
imagePlaceholderBackgroundColorWyImage的默认背景色ColorColor.fromRGBO(247, 248, 250, 1)
imageLoadingIconSizeWyImage加载状态的默认Icon大小double48
imageLoadingIconColorWyImage加载状态的默认Icon颜色ColorColor.fromRGBO(220, 222, 224, 1)
imageErrorIconSizeWyImage错误状态的默认Icon大小double48
imageErrorIconColorWyImage错误状态的默认Icon颜色ColorColor.fromRGBO(220, 222, 224, 1)

WyLazyLoadScrollView

图片懒加载,需要WyImage开启图片懒加载模式。

代码示例

Container(
	child: WyLazyLoadScrollView(
		child: Container(
			alignment: Alignment.center,
			child: Column(
				mainAxisAlignment: MainAxisAlignment.start,
				crossAxisAlignment: CrossAxisAlignment.start,
				children: srcList.map((item) {
					return WyImage(
						src: item,
						width: 150,
						height: 150,
						fit: BoxFit.cover,
						lazyLoad: true,
						radius: Radius.circular(20.0),
					);
				}).toList(),
			)),
	)
)

参数说明

参数说明类型默认值
scrollParamsScrollView的参数ScrollParamsconst ScrollParams()
childWyLazyLoadScrollView的子组件,必填项Widgetnull
loadingWidget加载时的图片Widgetnull
errorWidget错误时的图片Widgetnull
preload预加载高度double20
attempt尝试次数int3
filter图片 URL 过滤FilterFunctionnull

Libraries

flutter_widegt_wangyan