flutter_widegt_wangyan

Description:

flutter widegt wangyan

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: (){},
),
copied to clipboard
参数说明



参数
说明
类型
默认值




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)})
copied to clipboard
参数说明



参数
说明
类型
默认值




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();
}
copied to clipboard
方法



参数
说明
参数
返回




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(),
))
copied to clipboard
参数说明



参数
说明
类型
默认值




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(),
)),
)
)
copied to clipboard
参数说明



参数
说明
类型
默认值




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