flutter上滑显示导航栏的简单介绍

Flutter CustomScrollView 自定义滑动效果

基本和AppBar一样,只是他只能在CustomScrollView中使用,应该很常见,滑动的时候固定appbar,就需要用到他.

大部分和appbar一样,主要说下重要的几个:

是否将导航栏部分固定在appbar的位置.这个需求在实际中很常用. 看看效果图.

当 pinned = false:

可以看到appbar并没有固定在最上面,而是根据内容划出了界面.

当 pinned = true :

这个应该是需求中经常用到的效果了.

当floating = false :

当floating = true:

仔细看 ，区别是在列表整体向下滑动时,appbar开始显示的位置不同.

当为false时 ,向下滑动时,会先降列表内容滑动顶部,然后appbar会跟着列表滑动显示出来.如上图

当为true时, 向下滑动时,appbar会先跟着列表滑动显示出来. 然后继续列表的滑动. 如上图

不能单独使用要配合 ****floating 和 ****pinned

具体效果看官网地址

是否展开,默认false,直接看值为true的效果图,就明白了.

可以再里面添加扩展的内容:

通过测试发现 **后面不是 FlexibleSpaceBar 的话, stretch = true 无效. **

和Padding一样.子控件是 sliver 类型...

上图中在padding中添加了一个背景色为青色的容器widget

里面可以设置不是 sliver 类型的widget。如上图中的 padding中添加的 container

就两个协议,一个是布局协议一个展示协议.基本和GridView一样.也有count和extext... 不设置个数默认无数个

SliverChildListDelegate 这种方式前提是知道cell个数，比较少，好搭建

SliverChildBuilderDelegate 这种方式，可以根据数组去创建，不知道cell个数

和listview差不多.也是协议 不设置个数默认无数个

相关问答

Q1: Flutter开发：对于状态栏、导航栏的沉浸式处理

方案需要使用到插件 device_info_plus: ^latest_version ，在 pubspec.yaml 内添加此插件

Q2: （Flutter 十六）自定义导航栏效果

自定义导航栏实现的效果如下图所示，点击搜索按钮，进入搜索页面。下面显示默认搜索内容，点击左侧的返回按钮可以返回到上一级页面。输入的内容如果有匹配，被匹配的字母会加粗显示。

1、main.dart

2、asset.dart

里面有两个数组，searchList存放的是搜索的内容，recentList里是最近搜索过的内容。在实际应用中这两个数据应该自己获取。

3、

Q3: Flutter AppBar（顶端栏）

AppBar是一个顶端栏，对应着 Android 的 Toolbar。

AppBar 有以下常用属性：

Q4: Flutter布局全解

由上面的架构图可以看出来，flutter最上层是google 的纸墨设计Material Design（MaterialApp）组件，关于Material Design设计理念大家可以去官网安利一下啊 material.io

在MaterialApp下面是所有组件的基类Widget，而在Widget的上层是statelessWdiget（无状态组件）、statefulWidget（有状态组件）和InheritedWidget(可以向子类View树种传递信息)，包括我们在上篇文章中用到的Scaffold、Center、Text都是statelessWdiget、statefulWidget的子类。

开始之前，我们需要知道一些名词的含义和作用，在这里不懂的也没有关系，逐渐往后面看，往后面使用后，会有越来越清晰的理解。

是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget。

StatelessWidget是非动态的，它不依赖于除了传入数据以外的任何其他数据，这意味着改变其显示的唯一方式，就是改变传入其构造函数的参数。比如Text，Button，Icon这些控件。

StatefulWidget是动态的，他们允许我们创建一个能动随时间改变内容的widget，并且不依赖于其初始化时被传入的静态状态，可以随着用户的输入，各种形式的异步回包或其他形式的状态变化而变化。比如Image，CheckBox，Form这些控件。

Scaffold 翻译过来就是脚手架的意思，它实现了基本的 Material Design 可视化布局结构。简单的说，Scaffold就是一个提供 Material Design 设计中基本布局的 widget。

一个 MaterialApp 由多个 Scalfold 页面组成，每个 Scalfold 的主要结构如下：

AppBar：顶部导航栏

body：中间内容体

BottomNavigationBar：底部导航栏

它是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。

alignment:控制child的对齐方式

decoration:绘制在child后面的装饰

控件加入内/外边距。属性如下：

Row和Column分别是Flutter中的水平和垂直布局，对应Android里面的LinearLayout的水平垂直方向布局。

MainAxisAlignment (主轴)属性：

CrossAxisAlignment（交叉轴）属性：

配合Expanded使用，使Expanded中的child充满空白区域。Expanded组件必须用在Row、Column、Flex内。

属性：

效果：

Stack 这个是Flutter中布局用到的组件，跟Android中FrameLayout或RelativeLayout很像。是一个在布局中使用相当频繁的布局组件，相当重要的一个布局，这里当然要着重讲解。

Q5: Flutter 侧边栏的使用,打开和关闭

在网上好多方法 但是有些点没有讲到

简单的说就是在 Scaffold 添加 Drawer

这个AppBarUtil.getAppBar 是我自己创建的方法 当初因为自定义的按钮所以找了一些时间怎么打开和关闭

不过如果不是自定义 的appBar 应该直接就会显示不会出现需要调用打开方法的情况

flutter上滑显示导航栏的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、flutter上滑显示导航栏的信息别忘了在本站进行查找喔。