flutter去顶部,flutter 底层

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Flutter TabBar吸顶效果

做过安卓的知道，安卓里CoordinatorLayout+ AppBarLayout控件再加app:layout_behavior="@string/appbar_scrolling_view_behavior"属性可以做到这个效果。

在flutter中goole也提供了同样效果的控件NestedScrollView+Sliver系列的东西，

NestedScrollView没多少可选参数，这边主要SliverAppBar。

相关问答

Q1: Flutter 仿抖音效果 (二) 界面布局

Flutter 仿抖音效果 (一) 全屏点爱星

Flutter 仿抖音效果 (二) 界面布局

[Flutter 仿抖音效果 (三) 视频播放列表] ( )

项目地址: 持续效果更新

1.基本的布局是简单的,外层通过Stack作为根

2.左边点赞的控件组通过Align进行统一布局

3.顶部控件组通过Positioned进行布局,设置顶部距离,其实也可以用align,我们多使用几种来习惯flutter的布局

4.底部同样使用Positioned,设置底部距离

5.子页面的左右滑动使用PageView,一开始我们要从推荐开始左滑到关注,可以使用reverse属性,不需要更多额外的操作

1.pageController监听

刷新顶部的下划线时,我们一样使用StreamController刷新,这样效率比setstate高很多

2.歌曲名走马灯效果

这个效果看起来挺麻烦的其实实现起来超级的简单用最普通的ListView就能快速的实现

首页listview里面套入的是最简单的container+text

listview添加一个ScrollController做为滑动的控制

使用一个定时器,把listview滑到最大的位置之后,在滑回去

先通过scroController.position.maxScrollExtent获取最大位置,

然后通过scroController.animateTo进行滑动,因为我设置一次循环的时间是3000毫秒,所以滑过去和滑回来的时间各占一般 new Duration(milliseconds: (time * 0.5).toInt()),还有就是歌名没有大于最大宽度时候其实我们不需要进行滑动,所以判断maxScrollExtent是否大于0来确定是否进行滑动动画

Q2: Flutter获取的OverlayState来自哪里？

当在flutter中做一个全局的Toast,loading,Alert的时候，会使用到OverlayEntry,只要通过OverlayState.insert()就能展示在界面上。如此好用那OverlayState又是从哪来的呢？

首先,获取OverlayState可以直接调用OverlayState overlayState = Overlay.of(context);直接就拿context去找了：OverlayState result = context.findAncestorStateOfTypeOverlayState();

能找到？怎么就找到了呢

那看下Overlay的注释：

尽管您可以直接创建一个[Overlay]，但最常见的是使用[WidgetsApp]或[MaterialApp]中的[Navigator]创建的。导航器使用其overlay来管理路由的视觉外观。

其中很关键的点在Navigator,那去找Navigator,顺便还找到了Route。

Navigator中一层结构就是Overlay。那看下Flutter中导航到底是怎么做的。

许多应用程序在其小部件层次结构的顶部附近都有一个导航器，以便使用[Overlay]来显示它们的逻辑历史，其中最近访问的页面可视化地位于较旧页面的顶部。通过使用此模式，导航器可以通过在覆盖图中移动小部件从一个页面可视地过渡到另一个页面。

既然Overlay从导航而来，那App中怎么就有导航呢？

Flutter创建的的时候,main里面的入口runApp(),在视图的最底层会写一个MaterialApp().

找到MaterialApp。

那就找在哪创建了Navigator。没找到，但是在return时用的是WidgetsApp，看下介绍。

WidgetsApp定义了基本的应用程序元素，但不依赖于Material库,也就是MaterialApp是对WidgetsApp的上层封装，为我们集成了Material元素。继续找WidgetsApp。

在build里面创建了Navigator。