Flutter 重構(gòu)屬性透傳及函數(shù)透傳使用示例
更新時間：2023年01月08日 15:22:01 作者：SoaringHeart
這篇文章主要為大家介紹了Flutter 重構(gòu)屬性透傳及函數(shù)透傳使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
一、來源
今天在研究 flutter 相冊庫 wechat_assets_picker 遇到一個問題：（我需要在第三方庫基礎(chǔ)上封裝一個組件，供項目內(nèi)部調(diào)用，組件內(nèi)封裝一些公共邏輯。）但是 AssetPicker.pickAssets 的屬性太多了，一個個傳遞實在太麻煩，就想是否有 vue 中那種數(shù)據(jù)透傳的解決方法呢(已知 flutter 中目前不支持這種屬性透傳)？苦苦思索5分鐘之后，靈光一閃：
函數(shù)透傳
/// 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);
/// 媒體對象數(shù)組
List<AssetEntity> selectedAssets;
/// 最大個數(shù)
int maxCount;
/// 每行元素個數(shù)
int rowCount;
/// 元素間距
double spacing;
/// 元素修飾器
BoxDecoration? decoration;
/// 添加圖片
Widget Function(BuildContext context, double itemWidth)? addBuilder;
/// 確認選擇回調(diào)函數(shù)
void Function(List<AssetEntity> selectedAssets) onChanged;
/// 解決flutter數(shù)據(jù)無法透傳的問題(透傳 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(() { });
}
}
總結(jié)
1、onPicker 參數(shù)需要和調(diào)用方法搭配使用，即實現(xiàn)了函數(shù)透傳，函數(shù)里的參數(shù)直接暴露給外部使用者，做二次定制開發(fā)；如果默認參數(shù)（可以適量添加）能夠滿足通用需求，則無需使用 onPicker 可選參數(shù)；
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，沒有使用下?lián)Q線（私有）實現(xiàn)是為了向外部暴露 State， 可以通過 GlobalKey 獲取 State 實例對象，進而調(diào)用一些封裝方法；達到更高的代碼復(fù)用；
聲明 GlobalKey：
GlobalKey：<WechatPhotoPickerState> _globalKey = GlobalKey();
調(diào)用 State 方法：
_globalKey.currentState?.onPicker();
3、所有自定義組件原則上都要支持 key 屬性，才是一個完整的組件 Widget；
無論是移動原生、前端 h5 或者 flutter 跨平臺，各種數(shù)據(jù)透傳的思想是相近，在一端取得突破之后，其他端基本都是平移實現(xiàn)，這些可以減少代碼量又不損失功能，而且維護性和擴展性更優(yōu)的實現(xiàn)方式就是代碼重構(gòu)的本質(zhì)。
以上就是Flutter 重構(gòu)屬性透傳及函數(shù)透傳使用示例的詳細內(nèi)容，更多關(guān)于Flutter 重構(gòu)屬性函數(shù)透傳的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Android源碼中的一些目錄結(jié)構(gòu)，方法需要的朋友2013-06-06
Android自定義scrollView實現(xiàn)頂部圖片下拉放大
這篇文章主要為大家詳細介紹了Android自定義scrollView實現(xiàn)頂部圖片下拉放大，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
Android編程實現(xiàn)WebView添加進度條的方法
這篇文章主要介紹了Android編程實現(xiàn)WebView添加進度條的方法,涉及Android WebView界面及控件功能相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
Flutter 首頁必用組件NestedScrollView的示例詳解
今天介紹的組件是NestedScrollView，大部分的App首頁都會用到這個組件。對Flutter 首頁必用組件NestedScrollView的相關(guān)知識感興趣的一起看看吧2020-05-05
這篇文章主要為大家詳細介紹了Android表格自定義控件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Android利用Andserver搭建服務(wù)器的詳細教程
這篇文章主要介紹了Android利用Andserver搭建服務(wù)器的教程，本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
Android裁剪圖片為圓形圖片的實現(xiàn)原理與代碼
這個方法是根據(jù)傳入的圖片的高度（height）和寬度（width）決定的，如果是 width <= height時，則會裁剪高度，裁剪的區(qū)域是寬度不變高度從頂部到寬度width的長度2013-01-01
editText是TextView的子類，TextView能用的工具EditText都能用，接下來通過實例代碼給大家分享Android EditText實現(xiàn)輸入表情功能，感興趣的朋友一起看看吧2017-08-08
札記：android手勢識別功能實現(xiàn)（利用MotionEvent）
現(xiàn)在手勢識別的應(yīng)用已經(jīng)很廣泛了。本篇文章主要介紹了android手勢識別功能實現(xiàn)，具有一定的參考價值，有興趣的可以了解一下。2016-11-11
注冊登錄或修改密碼功能常常需要輸入短信驗證碼，如何自動獲取短信驗證碼，這篇文章就為大家介紹了Androidcv注冊登錄自動獲取短信驗證碼的實現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-08-08