返回顶部
首页 > 资讯 > 移动开发 >Flutter重构属性透传及函数透传使用示例
  • 671
分享到

Flutter重构属性透传及函数透传使用示例

Flutter重构属性函数透传Flutter重构 2023-01-08 18:01:28 671人浏览 八月长安
摘要

目录一、来源函数透传二、 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 {
...

二、 WechatPhotoPicker 使用示例

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);
  }
}

二、 WechatPhotoPicker 组件源码

/// 基于 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

猜你喜欢
  • Flutter重构属性透传及函数透传使用示例
    目录一、来源函数透传二、 WechatPhotoPicker 使用示例二、 WechatPhotoPicker 组件源码总结一、来源 今天在研究 flutter 相册库 wechat...
    99+
    2023-01-08
    Flutter 重构属性函数透传 Flutter 重构
  • Flutter重构属性透传及函数透传如何使用
    这篇文章主要介绍“Flutter重构属性透传及函数透传如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Flutter重构属性透传及函数透传如何使用”文章能帮助大家解决问题。一、来源今天在研究 ...
    99+
    2023-07-04
  • Vue3重构函数透传示例解析
    目录列表页面+下拉刷新和上拉加载+占位图(无数据+断网)...一、来源 之前做 vue 手机端需求开发时,遇到多个相似列表页面: 列表页面+下拉刷新和上拉加载+占位图(无数据+断网)...
    99+
    2023-02-17
    Vue3 重构函数透传 Vue3 重构
  • Kotlin类与属性及构造函数的使用详解
    目录1.类的属性 filed2.构造函数3.执行顺序4.延迟初始化5.惰性初始化1.类的属性 filed 1)在kotlin中定义属性,必须赋初始值,要不编译器检查不通过。这个和ja...
    99+
    2024-04-02
  • js匿名函数使用&传参的示例分析
    这篇文章将为大家详细讲解有关js匿名函数使用&传参的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。如下所示:function () {...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作