flutter_ex_widget

Description:

flutter ex widget

flutter_ex_widget #
Flutter扩展组件库
Getting Started #
针对业务中需要在列表滚动停止时上报屏幕中的item数据，搜索了下网络上的获取屏幕中item机制都不太友好，比如重写delegate
或者设置屏幕外缓存距离为0都不能高效的实现业务需求。
所以通过重写SliverGridView和SliverListView来达到此效果。
以下是栗子🌰
#ExSliverList
ExSliverList1(
delegate: SliverChildBuilderDelegate((context, index) {
return Container(
height: (index % 2 == 0) ? 50 : 100,
child: Text('$index'),
color: Color.fromARGB(
255,
Random.secure().nextInt(255),
Random.secure().nextInt(255),
Random.secure().nextInt(255)),
);
}, childCount: 30),
onLayoutPosition: (start,end) {
print('start$start end$end');
},
)
copied to clipboard
只需要传入onLayoutPosition方法就会回调屏幕中的item 不包含屏幕外的。
-1表示不在屏幕中
#ExSliverGrid
ExSliverGrid(
onLayoutPosition: (start,end) {
print('start$start end$end');
},
delegate: SliverChildBuilderDelegate((context, index) {
return Container(
child: Text('$index'),
color: Color.fromARGB(255, Random.secure().nextInt(255),
Random.secure().nextInt(255), Random.secure().nextInt(255)),
);
}),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 30,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
)
copied to clipboard
同上 传入onLayoutPosition即可在布局完成后回调最新的屏幕中的item
当然可以在滚动停止时主动获取，但目前没有支持，如果需要的话可以后期支持
#ExIconWidget
可以在控件四周添加别的控件
类似安卓的 drawableLeft,drawableRight,drawableTop,drawableBottom
ExIconWidget(
content: Text(
'已收到货',
style: TextStyle(
fontSize: 14, color: Color(AppColors.textBlack474245)),
overflow: TextOverflow.ellipsis,
),
rightIcon: Image.asset(
'images/ic_arrow_detail_right.png',
width: 12,
height: 12,
),
maxWidth: 200,
maxHeight: 300,
)
copied to clipboard
注意需要设置maxHeight,maxWidth.如果宽高没有要求可以尽量大一些，但最终会以实际大小为准。内部会自动计算最终的控件大小
#ExFlow
可以设置最大行数的Tag标签控件,超过部分不展示
ExFlow(
delegate: TagDelegate(
maxLines: flowRowCount,
itemSpace: 8,
lineHeight: 8,
needLoseItemWhenItemWidthBig: false, // 如果某一个tag很长会导致一直判断为ture 可以设置ture丢弃该项
),
children: List.generate(
widget?.tags?.length??0,
(index) => TagChip(
widget?.tags[index],
index,
widget.jumpToTop,
)),
),
)
copied to clipboard
#ExText
不同手机上居中展示
ExTxt('文字',TextStyle(fontSize:14))
copied to clipboard
#ExRichText
特俗文字标为特定颜色
ExRichText(
text: 'hehe#_\$1111#_\$aaa#_\$2222',
flag: '#_\$',
style: TextStyle(color: Colors.black),
flagStyle: TextStyle(color: Colors.red),
)
copied to clipboard
#ExAlignLengthText
不同个数文字首尾对齐
呵 呵
呵 呵 和
ExAlignLengthText(
text: label ?? '',
alignTextLength: 4,
style: TextStyle(color: Color(AppColors.textGray96), fontSize: 12),
)
copied to clipboard
#ExCenterLineWidget
ExCenterLineWidget(
child: Text(
'You have pushed the button this many times:¥3',
),
color: Colors.redAccent,
lineHeight: 2,
),
copied to clipboard
#ExPrice
Container(
color: Colors.amber,
margin: EdgeInsets.only(top: 6, bottom: 6),
child: ExPrice(
'123456',
TextStyle(fontSize: 50, height: 1.0),
priceUnit: '折',
priceUnitStyle: TextStyle(fontSize: 20),
isLeft: true,
),
),
copied to clipboard
#showCustomSizeDialog
showCustomSizeDialog(
context,
child: Container(
width: 100,
height: 100,
color: Colors.white,
child: Text('test'),
),
onClickOutSide: () { // 点击蒙层区域
//Navigator.of(context).pop();
},
// onClickContent: () { // 点击内容区域 这里对应的child
// Navigator.of(context).pop();
// },
);
copied to clipboard
#ExRoundTriangleWidget 圆角矩形带三角指示器
具体字段含义可以查看源码

ExRoundTriangleWidget(
data: tips ?? '',
textStyle: TextStyle(fontSize: 10, fontWeight: FontWeight.w500, color: Colors.white),
roundRadius: 8,
triangleWidth: 8,
triangleHeight: 4,
triangleDistance: priceWidth / 2 + 2,
triangleFromLeft: false,
),
)
copied to clipboard
如果后续大家有现有基础控件上无法实现的效果，或者比较复杂的布局想简化时，也可以告知我 非常乐意扩展简单易用的控件，让后续
业务开发中更加快捷方便😊