flutter_widegt_wangyan 0.0.7

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%

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	图片链接,必填项	String	null
width	宽度，必填项	double	null
height	高度， 必填项	double	null
fit	图片填充模式	BoxFit	BoxFit.fill
radius	圆角大小	Radius	Radius.circular(0.0)
round	是否显示为圆形或椭圆形，如果width和height相同则为圆形否则为椭圆	Radius	Radius.circular(0.0)
lazyLoad	是否开启图片懒加载，须配合 WyLazyLoadScrollView 组件使用	bool	false
showError	是否展示图片加载失败提示	bool	true
showLoading	是否展示图片加载中提示	bool	true
errorIcon	失败时提示的icon图标	IconData	Icons.broken_image
loadingIcon	加载时提示的icon图标	IconData	Icons.image
loadingBuilder	加载时提示widget的构造函数	WidgetBuilder	null
errorBuilder	失败时提示widget的构造函数	WidgetBuilder	null
errorBuilder	失败时提示widget的构造函数	WidgetBuilder	null
click	点击图片时触发	Function	null
load	图片加载完毕时触发	Function	null
error	图片加载失败时触发	Function	null
progress	图片加载过程中时触发	ImageChunkListener	null
style	组件的样式，详情请看下表	WyImageStyle	WyImageStyle.defaultStyle

WyImageStyle

参数	说明	类型	默认值
imagePlaceholderBackgroundColor	WyImage的默认背景色	Color	Color.fromRGBO(247, 248, 250, 1)
imageLoadingIconSize	WyImage加载状态的默认Icon大小	double	48
imageLoadingIconColor	WyImage加载状态的默认Icon颜色	Color	Color.fromRGBO(220, 222, 224, 1)
imageErrorIconSize	WyImage错误状态的默认Icon大小	double	48
imageErrorIconColor	WyImage错误状态的默认Icon颜色	Color	Color.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(),
			)),
	)
)

参数说明

参数	说明	类型	默认值
scrollParams	ScrollView的参数	ScrollParams	const ScrollParams()
child	WyLazyLoadScrollView的子组件，必填项	Widget	null
loadingWidget	加载时的图片	Widget	null
errorWidget	错误时的图片	Widget	null
preload	预加载高度	double	20
attempt	尝试次数	int	3
filter	图片 URL 过滤	FilterFunction	null