Flutter实战之--GetX页面多例

3bb1f694eea188216c6d7c06b2dd9d0d.jpeg

用了两年的flutter,有了一些心得,不虚头巴脑,只求实战有用,以供学习或使用flutter的小伙伴参考,学习尚浅,如有不正确的地方还望各路大神指正,以免误人子弟,在此拜谢~(原创不易,转发请标注来源和作者)

注意:无特殊说明,flutter版本为3.0+

上一篇分析了如何使用GetX组织项目结构,这一篇我们来探讨一下如何实现页面多例。

一.场景分析

我们在实现大部门业务的时候都是单例的,通俗来讲就是在页面跳转后,栈内不会出现两个相同的页面,在上一篇中使用Getx组织项目结构,我们处理一般页面的模式是在binding文件中使用lazyPut,绑定controller,lazyPut 是singleton单例模式的。

Get.lazyPut(() => MainController());

然后再view相关页面需要使用controller逻辑的时候

GetBuilder<MainController>(

id: "xxxx",

builder: (ctl) {

return Container();

})

这样就实现了基本的mvc模式。


二.多页面场景分析

举一个多页面场景的例子:比如说一个书架app,我们看一个流程:

0ef623195bef118274abd31ad6e7f575.jpeg

我们可以看到从A书籍详情到B书籍详情,栈中出现了两次书籍详情,我们实现页面过程中逻辑都是一致的,只是参数不同(书籍id不同)。


如果依然使用lazyPut绑定controller的话,由于A书籍页面详情 已经初始化一次controller,那么B书籍详情调用的时候,只会拿到A书籍的数据,导致页面无法刷新,这就是controller单例导致的错误。那么我么探讨一下如何解决单页面多例的问题。

三。使用controller 的create实现多例

1.首先肯定要在bingding中放弃lazyPut 的形式,采用create

Get.create<MainController>(() => MainControllerController(),permanent: false);

2.取消GetBuilder的全局模式,将controller传值到GetBuilder中的init。

GetBuilder<MainController>(

id: "xxxx",

init: controller,

global: false,

builder: (ctl) {

return Container();

})

使用这样的模式,就可以简单实现了多例,麻烦的是,controller需要从主页传入到页面的各个组件中,如果页面组件比较多也是比较麻烦的(大部分页面的组件不会涉及过多)


四。使用tag模式实现多例

细心的同学可能在使用的时候会发现,lazyPut有可选参数tag

void lazyPut<S>(InstanceBuilderCallback<S> builder,
{String? tag, bool fenix = false}) {
GetInstance().lazyPut<S>(builder, tag: tag, fenix: fenix);
}

然后再Get.find方法中也有通过tag查找controller的方法。所以我们也有思路,比如上面的例子,在A书籍详情可以初始化tag为”A“的controller,待到B书籍详情的时候我们的tag为”B“。

不幸的是我们依然需要在GetBuilder中修改

GetBuilder<MainController>(

id: "xxxx",

tag: “A”

builder: (ctl) {

return Container();

})


综合考虑使用复杂度,使用controller的create模式相比tag模式更简单一些,也是我自己项目里一直在用的模式。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
很高兴为您解答问题!关于Flutter实战视频-移动电商-48.详细页_详情和评论的切换,我可以提供以下解答: 在Flutter实战视频-移动电商-48中,详细页的详情和评论的切换是通过一个TabBar实现的。具体来说,通过在AppBar中添加一个TabBar来实现不同页面之间的切换。在这个TabBar中,我们可以添加两个Tab,分别为“详情”和“评论”,并分别对应两个页面。当用户点击不同的Tab时,就可以切换到不同的页面。 在Flutter中,TabBar可以使用DefaultTabController和TabBarView来实现。DefaultTabController是一个Widget,它可以管理TabBar和TabBarView之间的关系。TabBarView则是一个Widget,它可以显示不同的页面。 具体实现方法如下: ```dart class DetailPage extends StatefulWidget { @override _DetailPageState createState() => _DetailPageState(); } class _DetailPageState extends State<DetailPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('商品详情'), bottom: TabBar( tabs: <Widget>[ Tab( text: '详情', ), Tab( text: '评论', ), ], ), ), body: DefaultTabController( length: 2, child: TabBarView( children: <Widget>[ // 详情页面 DetailWidget(), // 评论页面 CommentWidget(), ], ), ), ); } } ``` 在上面的代码中,我们首先创建了一个AppBar,并在其中添加了一个TabBar。然后,在Scaffold的body中,我们创建了一个DefaultTabController,并将其length设为2,即有两个页面。最后,我们在TabBarView中添加了两个Widget,即DetailWidget和CommentWidget,分别对应详情页面和评论页面。 希望这个解答能够对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值