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

 更新时间:2023年1月10日 15:10  点击:102 作者:SoaringHeart

一、来源

今天在研究 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 重构属性函数透传的资料请关注猪先飞其它相关文章!

原文出处:https://juejin.cn/post/7185778984028733497

相关文章

  • Flutter 开发一个登录页面

    登录页面在 App 开发中非常常见,本篇借登录页面的开发介绍了文本框 TextField组件的使用,同时使用文本框的装饰属性实现了个性化文本框设置。...2021-06-05
  • Flutter 如何封装文本输入框组件

    在实际开发过程中,往往开始是完成功能层面的开发,然而再考虑组件封装和代码优化。当然,组件封装越早做越好,因为这样会提高整个团队开发的规范性和效率。本文将介绍如何封装一个文本输入框组件...2021-06-05
  • Flutter悬浮按钮FloatingActionButton使用详解

    本文主要介绍了Flutter悬浮按钮FloatingActionButton使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-07-12
  • Flutter 底部弹窗ModelBottomSheet的使用示例

    在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showModelBottomSheet 方法用于弹出底部弹窗,本篇介绍如何使用底部弹窗。...2021-06-07
  • Flutter项目在 iOS14 启动崩溃的解决方法

    这篇文章主要介绍了Flutter项目在 iOS14 启动崩溃的解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-24
  • 重构-C++实现矩阵的简单实例

    下面小编就为大家带来一篇重构-C++实现矩阵的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-04-25
  • 详解Flutter 调用 Android Native 的方法

    这篇文章主要介绍了详解Flutter 调用 Android Native 的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-25
  • flutter的环境安装配置问题及解决方法

    Flutter是Google推出的基于Dart语言开发的跨平台开源UI框架,旨在统一纷纷扰扰的跨平台开发框架,在UI层面上多端共用一套Dart代码来实现多平台适配开发,这篇文章主要介绍了flutter的环境安装配置问题,需要的朋友可以参考下...2020-06-09
  • flutter实现点击事件

    这篇文章主要介绍了flutter实现点击事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-26
  • 用Flutter做桌上弹球(绘图(Canvas&CustomPaint)API)

    这篇文章主要介绍了用Flutter做桌上弹球 聊聊绘图(Canvas&CustomPaint)API,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-31
  • Flutter开发中的路由参数处理

    在实际开发中,我们经常会需要在页面跳转的时候携带路由参数,典型的例子就是从列表到详情页的时候,需要携带详情的 id,以便详情页获取对应的数据。同时,有些时候还需要返回时携带参数返回上一级,以便上级页面根据返回结果更新。本篇将介绍这两种情形的实现。...2021-06-18
  • Flutter路由fluro引入配置和使用的具体方法

    Flutter本身提供了路由机制,本文主要介绍了Flutter fluro配置使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-08
  • Flutter实现局部刷新

    这篇文章主要为大家详细介绍了Flutter实现局部刷新,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-14
  • PHP代码维护,重构变困难的4种原因分析

    这篇文章主要介绍了PHP代码维护,重构变困难的4种原因,分析了代码维护与重构的注意事项与感想,需要的朋友可以参考下...2016-01-26
  • 如何在Flutter中嵌套Android布局

    通常Flutter与Android页面交互是各自独占整个手机屏幕,但有些情况下无法满足需求,有些时候Flutter中没有提供相关插件或者插件不满足需求,这时候就需要开发者自定义插件,开发者可以参考本文中的方法去进行自定义。...2021-06-07
  • Flutter中如何使用WillPopScope的示例代码

    这篇文章主要介绍了Flutter中如何使用WillPopScope,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-14
  • Flutter Android应用启动白屏的解决方案

    任何一个app基本都会设计一个启动页,今天我们就来看看怎么在flutter项目中设置启动页,这篇文章主要给大家介绍了关于Flutter Android应用启动白屏解决的相关资料,需要的朋友可以参考下...2021-11-11
  • Flutter深色模式适配的实现

    这篇文章主要介绍了Flutter深色模式适配的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-04
  • Repeater控件动态变更列(Header,Item和Foot)信息(重构cs)

    上一篇虽然它算不上是完全动态化,但它已经达到初期想要的效果,现另开一篇,不是重新另外写,而是想重构cs的代码,因为前一篇的代码虽然简单,但代码冗余过多,感兴趣的朋友可以参考下哈...2021-09-22
  • Android如何在原生App中嵌入Flutter

    这篇文章主要介绍了Android如何在原生App中嵌入Flutter,帮助大家更好的理解和学习Android开发,感兴趣的朋友可以了解下...2021-03-13