flutter导航栏怎么切换，flutter自定义导航栏

Flutter 在body中设置TabBar和TabBarView

最近在开发中想实现一个AppBar下面有选项卡，来回切换的页面功能，百度了很多没有和自己需求符合的，网上大都是返回的Scaffold，使用系统的Appbar，添加至.bottom中，但是现在项目中用的是自定义的Appbar,不想破坏系统的统一封装。

所以在body 中实现TabBar 和 TabBarView，开始使用Column一直不行，只能显示一个，但是在body里面同时放置 TabBar 和 TabBarView需要注意

TabBarView 的父 Widget 必须知道宽高才能布局，否则，会报错：BoxConstraints forces an infinite height.

使用 Column + Expanded 即可：

注：还有设置tabbar的tab背景颜色，tabbar中的tab的背景颜色取的实际是AppBar的主题色，所以我们将tabbar放在Material中来重置了主题色，变成我们想要的背景色.

buildTabBar为创建TabBar的方法：

buildBodyView创建视图方法：

Flutter（二）StatefulWidget基础组件

MaterialApp 是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget。MaterialApp这个组件里面的参数比较多，而且一般在应用入口会用到，所以这里把它内部的所有参数都列出来了

基本用法：

可以看到我们在 App 的最外层直接使用了 MaterialApp ，可以指定App的名称（ title ），App的主题样式（ theme ），首页的组件（ home ），路由跳转配置）（ routes ），关于路由跳转我们在后面的章节中会介绍

Scaffold 实现了基本的 Material Design 布局结构， Scaffold 在英文中的解释为角手架，我们可以理解为楼体中的钢架结构，通过它可以构建一个页面

在Flutter应用开发中，我们可以将 Scaffold 理解为一个布局的容器。可以在这个容器中绘制我们的用户界面

下面是 MaterialApp + Scaffold 的组合的基本用法

AppBar 就是顶部的导航栏组件，支持自定义标题，左右两侧的工具栏按钮等

BottomNavigationBar 是底部的菜单栏组件

使用方法：

一般我们会定义一个全局变量如 _currentIndex 用于记录当前选中的下标。然后在 onTap 属性的回调方法中调用

setState(() { _currentIndex = index;}); 更新 _currentIndex 就可以实现底部菜单的切换。 BottomNavigationBar 一般会配合 BottomNavigationBarItem 一起使用（如下所示）

RefreshIndicator 是Flutter中的下拉刷新组件，一般配合 ListView 组件一起使用

Image 就类似于android中的 ImageView ，可以自定义图片显示的宽高

从网络中加载图片

从本地（File文件）加载图片

从本地资源加载图片

可以将byte数组加载成图片

TextField 就类似于android的 EditText

PageView 就类似于android中的 ViewPager

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

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

1、main.dart

2、asset.dart

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

3、

关于flutter导航栏怎么切换和flutter自定义导航栏的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。