目录一、来源函数透传二、 WechatPhotoPicker 使用示例二、 WechatPhotoPicker 组件源码总结一、来源 今天在研究 Flutter 相册库 wechat
今天在研究 Flutter 相册库 wechat_assets_picker 遇到一个问题:(我需要在第三方库基础上封装一个组件,供项目内部调用,组件内封装一些公共逻辑。)但是 AssetPicker.pickAssets 的属性太多了,一个个传递实在太麻烦,就想是否有 Vue 中那种数据透传的解决方法呢(已知 flutter 中目前不支持这种属性透传)?苦苦思索5分钟之后,灵光一闪:
/// pickAssets 方法源码:
static Future<List<AssetEntity>?> pickAssets(
BuildContext context, {
List<AssetEntity>? selectedAssets,
int maxAssets = 9,
int pageSize = 80,
int gridThumbSize = Constants.defaultGridThumbSize,
int pathThumbSize = 80,
int gridCount = 4,
RequestType requestType = RequestType.image,
List<int>? previewThumbSize,
SpecialPickerType? specialPickerType,
Color? themeColor,
ThemeData? pickerTheme,
SortPathDelegate<AssetPathEntity>? sortPathDelegate,
AssetsPickerTextDelegate? textDelegate,
FilterOptionGroup? filterOptions,
WidgetBuilder? specialItemBuilder,
IndicatorBuilder? loadingIndicatorBuilder,
SpecialItemPosition specialItemPosition = SpecialItemPosition.none,
bool allowSpecialItemWhenEmpty = false,
AssetSelectPredicate<AssetEntity>? selectPredicate,
bool? shouldRevertGrid,
bool useRootNavigator = true,
Curve routeCurve = Curves.easeIn,
Duration routeDuration = const Duration(milliseconds: 300),
}) async {
...
class WechatPhotoPickerDemo extends StatefulWidget {
WechatPhotoPickerDemo({ Key? key, this.title}) : super(key: key);
final String? title;
@override
_WechatPhotoPickerDemoState createState() => _WechatPhotoPickerDemoState();
}
class _WechatPhotoPickerDemoState extends State<WechatPhotoPickerDemo> {
int maxCount = 9;
List<AssetEntity> entitys = [];
GlobalKey<WechatPhotoPickerState> _globalKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title ?? "$widget"),
actions: ['选择',].map((e) => TextButton(
child: Text(e,
style: TextStyle(color: Colors.white),
),
onPressed: onPicker,
)).toList(),
),
body: Column(
children: [
WechatPhotoPicker(
key: _globalKey,
selectedAssets: entitys,
onChanged: (List<AssetEntity> selectedAssets) {
print("selectedAssets: ${selectedAssets.length}");
},
onPicker: () => AssetPicker.pickAssets(
context,
maxAssets: 8,
selectedAssets: entitys,
),
)
],
)
);
}
onPicker() async {
_globalKey.currentState?.onPicker();
print(entitys.length);
}
}
/// 基于 wechat_assets_picker 的图片选择组件
class WechatPhotoPicker extends StatefulWidget {
WechatPhotoPicker({
Key? key,
this.selectedAssets = const [],
this.maxCount = 9,
this.rowCount = 3,
this.spacing = 10,
this.decoration,
this.addBuilder,
required this.onChanged,
this.onPicker,
}) : super(key: key);
/// 媒体对象数组
List<AssetEntity> selectedAssets;
/// 最大个数
int maxCount;
/// 每行元素个数
int rowCount;
/// 元素间距
double spacing;
/// 元素修饰器
BoxDecoration? decoration;
/// 添加图片
Widget Function(BuildContext context, double itemWidth)? addBuilder;
/// 确认选择回调函数
void Function(List<AssetEntity> selectedAssets) onChanged;
/// 解决flutter数据无法透传的问题(透传 AssetPicker.pickAssets 方法)
Future<List<AssetEntity>?> Function()? onPicker;
@override
WechatPhotoPickerState createState() => WechatPhotoPickerState();
}
class WechatPhotoPickerState extends State<WechatPhotoPicker> {
@override
Widget build(BuildContext context) {
return photoSection(
selectedAssets: widget.selectedAssets,
maxCount: widget.maxCount,
rowCount: widget.rowCount,
spacing: widget.spacing,
);
}
photoSection({
List<AssetEntity> selectedAssets = const [],
int maxCount = 9,
int rowCount = 3,
double spacing = 10,
}) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints){
double itemWidth = ((constraints.maxWidth - spacing * (rowCount - 1))/rowCount).truncateToDouble();
// print("itemWidth: $itemWidth");
return Wrap(
spacing: spacing,
runSpacing: spacing,
children: [
...selectedAssets.map((e) => Container(
clipBehavior: Clip.antiAlias,
decoration: widget.decoration ?? BoxDecoration(
// border: Border.all(width: 2),
borderRadius: BorderRadius.all(Radius.circular(4)),
),
child: FadeInImage(
width: itemWidth,
height: itemWidth,
placeholder: AssetImage('images/img_placeholder.png'),
image: AssetEntityImageProvider(e, isOriginal: false),
fit: BoxFit.cover,
),
)).toList(),
if (selectedAssets.length < maxCount)
InkWell(
onTap: () {
onPicker();
},
child: Container(
width: itemWidth,
height: itemWidth,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.1),
// border: Border.all(width: 1),
borderRadius: BorderRadius.all(Radius.circular(4)),
),
child: widget.addBuilder != null ? widget.addBuilder!(context, itemWidth) : Icon(
Icons.add,
size: itemWidth/3,
color: Colors.black.withOpacity(0.3),
),
),
)
]
);
}
);
}
onPicker() async {
List<AssetEntity>? result = widget.onPicker != null ? await widget.onPicker!() :
await AssetPicker.pickAssets(
context,
maxAssets: widget.maxCount,
selectedAssets: widget.selectedAssets,
);
widget.selectedAssets = result ?? [];
widget.onChanged(widget.selectedAssets);
setState(() { });
}
}
1、onPicker 参数需要和调用方法搭配使用,即实现了函数透传,函数里的参数直接暴露给外部使用者,做二次定制开发;如果默认参数(可以适量添加)能够满足通用需求,则无需使用 onPicker 可选参数;
onPicker: () => AssetPicker.pickAssets(
context,
maxAssets: 8,
selectedAssets: entitys,
),
List<AssetEntity>? result = widget.onPicker != null ? await widget.onPicker!() :
await AssetPicker.pickAssets(
context,
maxAssets: widget.maxCount,
selectedAssets: widget.selectedAssets,
);
2、WechatPhotoPickerState,没有使用下换线(私有)实现是为了向外部暴露 State, 可以通过 GlobalKey 获取 State 实例对象,进而调用一些封装方法;达到更高的代码复用;
声明 GlobalKey:
GlobalKey:<WechatPhotoPickerState> _globalKey = GlobalKey();
调用 State 方法:
_globalKey.currentState?.onPicker();
3、所有自定义组件原则上都要支持 key 属性,才是一个完整的组件 Widget;
无论是移动原生、前端 h5 或者 flutter 跨平台,各种数据透传的思想是相近,在一端取得突破之后,其他端基本都是平移实现,这些可以减少代码量又不损失功能,而且维护性和扩展性更优的实现方式就是代码重构的本质。
以上就是Flutter 重构属性透传及函数透传使用示例的详细内容,更多关于Flutter 重构属性函数透传的资料请关注编程网其它相关文章!
--结束END--
本文标题: Flutter重构属性透传及函数透传使用示例
本文链接: https://lsjlt.com/news/177097.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0