Flutter如何知道页面/组件可见？

最新推荐文章于 2024-02-28 08:59:15 发布
VIP文章 最新推荐文章于 2024-02-28 08:59:15 发布
阅读量1.6k 收藏
点赞数
文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwe25878/article/details/132323951
版权

在以前项目中，onPageShow和onPageHide由开源框架flutter_boost提供，在此次项目中，创新性的采用了fusion框架，fusion框架同样提供了类似的方法，但在实践中发现，当flutter页面相互replace或者多次pop页面后，onPageShow不会调用，这就导致了诸多bug，于是，需要探索如何了解一个widget/page是否可见。

首先试验了flutter官方提供的WidgetBindingsObserver，发现其AppLifecycleState有四种状态：

  • resumed 接受用户响应并在前台
  • inactive 不能接受用户响应，失去焦点
  • paused 不可见，运行在后台
  • detached 应用程序仍然由 Flutter 引擎托管，但已从任何宿主视图中分离

经过测试发现，在用户回到桌面或者锁屏，可以监听到paused事件，但是push到新的flutter页面，或者从其他flutter页面pop到本页面，没有生命周期变化，因此，此方案不可行。

观察发现，flutter的动画，在应用退到后台/push到其他页面等情况，动画时间仍在流逝，但动画绘制会停止（节约性能），这就代表着，flutter引擎是能知道某个widget是否可见的，在flutter中使用动画，通常需要使用with关键字混入SingleTickerProviderStateMixin，那么看来答案，就在此类中了。
查看源码：

最低0.47元/天 解锁文章
mafanwei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter页面布局之Stack层叠组件
01-08
Stack表示堆的意思，我们可以使用Stack或者结合Align或Positond实现定位布局 Stack常用属性： 属性 说明 alignment 配置所有子元素的显示位置 children 子元素 结合Positioned组件来控制每个子元素的显示位置 属性 说明 top 子元素距离顶部的距离 bottom 子元素距离底部的距离 left 子元素距离左侧的距离 right 子元素距离右侧的距离 child 子组件 结合Align组件来控制每个子元素的显示位置 属性 说明 alignment 配置子元素显示的位置
Flutter 内嵌原生组件 for android
06-22
Flutter 内嵌原生组件 for android Flutter 内嵌原生组件 for android 文档地址 https://blog.csdn.net/nicepainkiller/article/details/125403744 文档地址 https://blog.csdn.net/nicepainkiller/article/details/125403744 文档地址 https://blog.csdn.net/nicepainkiller/article/details/125403744
Flutter 如何检查一个小部件是否可见? visbility_detector 来帮你实现
最新发布
代码小疯子
02-28 464
简单的应用场景就是在A页面中点击一个按钮打开B页面，A页面失去焦点，然后B页面关闭消失，A页面重新获取得了焦点，同时回调onResum事件。在本文中，我们将学习一个重要的Flutter小部件。很多时候，在应用程序中，我们必须知道一个小部件是否可见。类似Android的onResum事件，在Flutter中，需要使用一些额外的方法来实现这个事件检测。现我也可以使用 visibilityDetector 在页面中做统一的处理。如果你有兴趣，可以关注一下微信公众号 biglead 程序员知识架构。
Flutter 实现虎牙/斗鱼 弹幕功能
01-03
用Flutter实现弹幕功能，轻松实现虎牙、斗鱼的弹幕效果。 先来一张效果图： 实现原理 弹幕的实现原理非常简单，即将一条弹幕从左侧平移到右侧，当然我们要计算弹幕垂直方向上的偏移，不然所有的弹幕都会在一条直线上，相互覆盖。平移代码如下： @override void initState() { _animationController = AnimationController(duration: widget.duration, vsync: this) ..addStatusListener((status){ if(status == AnimationStatus.com
Flutter路由返回/替换/返回根路由
01-07
再来分享一篇关于路由的姿势，前面两篇说的是由一个页面跳转另一个页面，这篇说说跳转页面之后如何往回跳（当然了，一般跳转页面后页面标题左面都会有一个箭头可以返回上一页，这个就不做讨论了），前面两篇文章已经附上了管理路由的代码，这里就简写了，只贴实现功能的部分代码 先把入口文件和管理路由配置好，后面直接往上面添加就可以 //main.dart import 'package:flutter/material.dart'; import 'routes/Routes.dart'; void main() => runApp(MyApp()); class MyApp extends Stateles
Flutter 页面布局 Wrap组件
01-07
Wrap组件实现流布局 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fluter中一切都是组件 //使用MaterialApp和Scaffold 两个组件装饰App //MaterialApp一般作为根组件----home、title、color、theme、routes等 cl
Flutter 学习
cmwly的博客
10-08 2717
Flutter 初始基础学习（进行中）
判断当前应用是否在前台
a34927341的博客
12-04 563
从网上找到一个取巧的方法、但很好用： public class MyLifecycleHandler implements Application.ActivityLifecycleCallbacks { private static int resumed; private static int paused; private static int started;
Flutter 新一代混合栈管理框架—— Fusion 让混合开发如此简单
嘴巴吃糖了
01-30 968
Fusion 是新一代的混合栈管理框架，用于 Flutter 与 Native 页面统一管理，并支持页面通信、页面生命周期监听等功能。Fusion 即融合，我们的设计初衷就是帮助开发者在使用 Flutter 与 Native 进行混合开发时尽量感受不到两者的隔阂，提升开发体验。Fusion 采用引擎复用方案，在 Flutter 与 Native 页面多次跳转情况下，APP 始终仅有一份 FlutterEngine 实例，因此拥有更好的性能和更低的内存占用。
Flutter由其他页面回到当前页面时监听并刷新当前页面的内容
neuHenry
03-23 6429
项目中经常遇到这样的场景，比如很多App都有的收藏、点赞列表等，当我们从收藏列表点击一个item项进入到详情页时，用户点击了取消收藏，那么当我们点击返回到收藏列表页时，App需要主动刷新收藏列表的数据。 在原生开发时，我们可以在收藏列表页的 onResume( ) 方法中重新请求数据并刷新列表。也可以做事件监听，不过没必要哈，事件监听比较适合那种跨页面的。 那么，Flutter 开发中，我们该如何实现该需求呢？ 答案：Flutter 监听路由返回 push( ).then( )：在 then 的函数体内重
Flutter控制widget可见性
qq_34240569的博客
06-28 1044
###Offstage 通过设置offstage来控制控件当显示和隐藏，隐藏后的控件不占据空间 属性名 类型 说明 offstage bool true:隐藏控件，false:展示控件 class _VisibilityViewState extends BaseState<VisibilityView> { bool _visible = true; @override Widget buildView(BuildContext context) {
Flutter 如何监听页面在前台还是后台
weixin_43096782的博客
05-17 1601
@override void initState() { super.initState(); // 添加观察者监听 WidgetsBinding.instance?.addObserver(this); } @override void didChangeAppLifecycleState(AppLifecycleState state) { super.didChangeAppLifecycleState(state); .
Flutter 查看当前页面甚至到每一个细节的weight
丿灬安之若死
12-15 2159
Some Times 我们想知道运行程序的页面是那个页面 这有利于我们定位控件 首先运行程序 比如我们想定位IT技术556在代码里面的那个位置 点击这里 然后点击It技术556 他会在侧边栏定位后。然后再在代码中定位。 非常的智能 感谢同事郁xx提供的教程 如果不需要定位需要再次点击关闭 ...
Flutter中的状态管理-GetX插件的使用
夏夏的博客
04-24 1602
GetX是基于ReactiveX思想的一款响应式状态管理框架，相比于BLoC，它有如下优势： 相比于BLoC，GetX的工程结构更简单，需要维护的文件更少； BLoC无法实现真正的跨页面数据状态管理（全局BLoC可部分实现，但维护起来较麻烦）； 内部实现了路由管理，简单易用；
Flutter Offstage、Visibility隐藏/可见
大灰狼的小绵羊哥哥的博客
06-16 1932
Offstage是控制组件隐藏/可见的组件，如果感觉有些单调功能不全，我们可以使用Visibility，Visibility也是控制子组件隐藏/可见的组件。不同是的Visibility有隐藏状态是否留有空间、隐藏状态下是否可调用等功能。 参数详解 属性 说明 Offstage offstage 子组件是否可见，默认true（隐藏） child 子组件 Visibility child 子组件 replacement 不可见时显示的组件（当maintainState = false）...
flutter中如何判断一个网页是否存在
weixin_35752233的博客
01-08 254
在 Flutter 中，你可以使用 http 库来发送 HTTP 请求并获取响应。如果你想判断一个网页是否存在，可以使用 http 库发送一个 HEAD 请求，然后检查响应状态码是否为 200 OK。如果是，则表示网页存在；如果不是，则表示网页不存在。 具体的代码实现如下： import 'package:http/http.dart' as http; // 异步函数，用于判断网页是否存在 F...
Flutter控件的显示与隐藏
adojayfan的博客
05-21 5149
在Android中，使用visibility属性控制View是否显示。 同样地，Flutter也使用Visibility来控制Widget是否显示。 同时也可以使用Offstage或Opacity来控制。 Visibility( visible: true, //是否保持占位 maintainState: false, child: Text("显示"), ), //能控件隐藏或显示，但是隐藏时不会占位。 Offstage( offstage: true, chi
打开APP，判断是否是原生页面的方法（含flutter判断）
他说他是个木偶的博客
03-22 3926
区分 APP 内的页面构成
flutter切换页面后隐藏组件
06-02
在Flutter中，可以通过使用`Visibility`小部件来隐藏或显示组件。`Visibility`小部件可以控制其子组件是否可见，可以使用`visible`属性来设置是否显示子组件。 以下是一个简单的例子，展示如何在切换页面后隐藏一个组件： ```dart import 'package:flutter/material.dart'; class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { bool _showText = true; void _toggleVisibility() { setState(() { _showText = !_showText; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Visibility( visible: _showText, child: Text( 'Hello World!', style: Theme.of(context).textTheme.headline4, ), ), RaisedButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (BuildContext context) => SecondPage())); }, child: Text('Go to Second Page'), ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: _toggleVisibility, tooltip: 'Toggle Visibility', child: Icon(Icons.visibility), ), ); } } class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Second Page'), ), body: Center( child: RaisedButton( onPressed: () { Navigator.pop(context); }, child: Text('Go back to Home Page'), ), ), ); } } ``` 在这个例子中，我们使用`Visibility`小部件来隐藏或显示文本组件。我们还添加了一个浮动操作按钮来切换文本组件的可见性。当我们切换到第二个页面时，文本组件将被隐藏，当我们返回到主页面时，文本组件将再次显示。 注意，我们在`_toggleVisibility`方法中使用`setState`来通知Flutter框架重新构建小部件树，以更新组件的状态。这是因为`Visibility`小部件的`visible`属性是一个可变状态，需要使用`setState`来更新。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值