当前位置:网站首页>使用 RepositoryProvider简化父子组件的传值
使用 RepositoryProvider简化父子组件的传值
2022-07-05 19:29:00 【InfoQ】
前言
- 构造函数传值:父组件将子组件需要的对象通过构造函数传递给子组件;
- 单例对象:构建单例对象,使得父子组件使用的是同一个对象;
- 容器:将对象存入容器中,父子组件使用的时候直接从容器中获取。
RepositoryProvider
Provider
RepositoryProvider定义
Repository
Provider
Provider
Bloc
Bloc
RepositoryProvider
create
value
create
value
RepositoryProvider
class RepositoryProvider<T> extends Provider<T>
with RepositoryProviderSingleChildWidget {
RepositoryProvider({
Key? key,
required Create<T> create,
Widget? child,
bool? lazy,
}) : super(
key: key,
create: create,
dispose: (_, __) {},
child: child,
lazy: lazy,
);
RepositoryProvider.value({
Key? key,
required T value,
Widget? child,
}) : super.value(
key: key,
value: value,
child: child,
);
static T of<T>(BuildContext context, {bool listen = false}) {
try {
return Provider.of<T>(context, listen: listen);
} on ProviderNotFoundException catch (e) {
if (e.valueType != T) rethrow;
throw FlutterError(
'''
RepositoryProvider.of() called with a context that does not contain a repository of type $T.
No ancestor could be found starting from the context that was passed to RepositoryProvider.of<$T>().
This can happen if the context you used comes from a widget above the RepositoryProvider.
The context used was: $context
''',
);
}
}
}
mixin RepositoryProviderSingleChildWidget on SingleChildWidget {}
MultiRepositoryProvider
RepositoryProvider
RepositoryProvider
Provider
of
listen
false
// 方式1
context.read<T>()
// 方式2
RepositoryProvider.of<T>(context)
MultiRepositoryProvider
MultiRepositoryProvider(
providers: [
RepositoryProvider<RepositoryA>(
create: (context) => RepositoryA(),
),
RepositoryProvider<RepositoryB>(
create: (context) => RepositoryB(),
),
RepositoryProvider<RepositoryC>(
create: (context) => RepositoryC(),
),
],
child: ChildA(),
)
RepositoryProvider 应用
- 头像及背景图:
_getBannerWithAvatar
;
- 个人资料:
_getPersonalProfile
;
- 个人数据统计:
_getPersonalStatistic
。
PersonalEntity personalProfile = personalResponse.personalProfile!;
return Stack(
children: [
CustomScrollView(
slivers: [
_getBannerWithAvatar(context, personalProfile),
_getPersonalProfile(personalProfile),
_getPersonalStatistic(personalProfile),
],
),
// ...
],
);
},
//...
personalProfile
personalProfile
RepositoryProvider.value(
child: CustomScrollView(
slivers: [
const BannerWithAvatar(),
const PersonalProfile(),
const PersonalStatistic(),
],
),
value: personalProfile,
),
// ...
value
personalProfile
personalProfile
context.read<PersonalEntity>()
RepositoryProvider
personalProfile
class BannerWithAvatar extends StatelessWidget {
final double bannerHeight = 230;
final double imageHeight = 180;
final double avatarRadius = 45;
final double avatarBorderSize = 4;
const BannerWithAvatar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverToBoxAdapter(
child: Container(
height: bannerHeight,
color: Colors.white70,
alignment: Alignment.topLeft,
child: Stack(
children: [
Container(
height: bannerHeight,
),
Positioned(
top: 0,
left: 0,
child: CachedNetworkImage(
imageUrl:
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=688497718,308119011&fm=26&gp=0.jpg',
height: imageHeight,
width: MediaQuery.of(context).size.width,
fit: BoxFit.fill,
),
),
Positioned(
left: 20,
top: imageHeight - avatarRadius - avatarBorderSize,
child: _getAvatar(
context.read<PersonalEntity>().avatar,
avatarRadius * 2,
avatarBorderSize,
),
),
],
),
),
);
}
Widget _getAvatar(String avatarUrl, double size, double borderSize) {
return Stack(alignment: Alignment.center, children: [
Container(
width: size + borderSize * 2,
height: size + borderSize * 2,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(size / 2 + borderSize),
),
),
Container(
width: size,
height: size,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(size / 2),
),
child: CachedNetworkImage(
imageUrl: avatarUrl,
height: size,
width: size,
fit: BoxFit.fill,
),
),
]);
}
}
总结
RepositoryProvider
RepositoryProvider
Provider
RepositoryProvider
context
RepositoryProvider.of
边栏推荐
- 40000 word Wenshuo operator new & operator delete
- JAD installation, configuration and integration idea
- Bitcoinwin (BCW)受邀参加Hanoi Traders Fair 2022
- Vagrant2.2.6 supports virtualbox6.1
- 司空见惯 - 英雄扫雷鼠
- MMO项目学习一:预热
- 【C语言】字符串函数及模拟实现strlen&&strcpy&&strcat&&strcmp
- 块编辑器如何选择?印象笔记 Verse、Notion、FlowUs
- Pandora IOT development board learning (HAL Library) - Experiment 8 timer interrupt experiment (learning notes)
- JS solution force deduction daily question (12) - 556 Next larger element III (2022-7-3)
猜你喜欢
Decision tree and random forest
Postman core function analysis - parameterization and test report
IFD-x 微型红外成像仪(模块)关于温度测量和成像精度的关系
100million single men and women supported an IPO with a valuation of 13billion
Microwave radar induction module technology, real-time intelligent detection of human existence, static micro motion and static perception
webuploader文件上传 拖拽上传 进度监听 类型控制 上传结果监听控件
软件测试是干什么的?学习有啥要求?
测试外包公司怎么样?
Cf:b. almost Terry matrix [symmetry + finding rules + structure + I am structural garbage]
aggregate
随机推荐
关于 Notion-Like 工具的反思和畅想
软件测试是干什么的?学习有啥要求?
数据库 逻辑处理功能
手机开户选择哪家券商公司比较好哪家平台更安全
[Collection - industry solutions] how to build a high-performance data acceleration and data editing platform
Go语言学习教程(十六)
Go语言 | 03 数组、指针、切片用法
#夏日挑战赛#数据库学霸笔记,考试/面试快速复习~
Apprentissage du projet MMO I: préchauffage
Debezium系列之:解析默认值字符集
JS solution force deduction daily question (12) - 556 Next larger element III (2022-7-3)
100million single men and women supported an IPO with a valuation of 13billion
中国银河证券开户安全吗 证券开户
C#应用程序界面开发基础——窗体控制(5)——分组类控件
okcc呼叫中心有什么作用
Go语言 | 02 for循环及常用函数的使用
MySQL中字段类型为longtext的值导出后显示二进制串方式
The binary string mode is displayed after the value with the field type of longtext in MySQL is exported
Android面试,android音视频开发
IFD-x 微型红外成像仪(模块)关于温度测量和成像精度的关系