Flutter模仿实现微信底部导航栏流程详解
作者:江山清风山间明月 发布时间:2023-06-21 11:46:12
前言
前面介绍了APP顶部导航栏AppBar,今天来介绍下Flutter实现APP底部导航栏。我们以仿写微信的底部导航栏来举例说明。
要实现类似微信底部的导航栏可以使用TabBar或者BottomNavigationBar来实现。下面分别介绍。
使用TabBar实现
TabBar介绍
在Flutter中,TabBar是一个用于创建选项卡式导航的常用组件。它通常与TabBarView一起使用,用于在不同的选项卡之间切换内容。
TabBar的重要属性
下面是TabBar的一些重要属性和功能:
tabs: tabs属性是一个必需的属性,用于指定选项卡的列表。您可以使用Tab小部件创建每个选项卡,并将它们放入tabs列表中。
controller: controller属性用于指定TabController,它负责管理选项卡和视图之间的联动。您可以通过创建一个TabController实例,并将其作为controller属性的值来实现联动。
isScrollable: isScrollable属性用于控制选项卡是否可滚动。当选项卡超出屏幕宽度时,如果设置为true,则可以通过水平滚动查看所有选项卡。
indicatorColor: indicatorColor属性用于设置选项卡下方的指示器的颜色。指示器是一个表示当前选中选项卡的横条。
labelColor 和 unselectedLabelColor: labelColor属性用于设置选中选项卡标签的颜色,而unselectedLabelColor属性用于设置未选中选项卡标签的颜色。
labelStyle 和 unselectedLabelStyle: labelStyle属性用于设置选中选项卡标签的文本样式,而unselectedLabelStyle属性用于设置未选中选项卡标签的文本样式。
onTap: onTap属性是一个回调函数,当用户点击选项卡时会触发该函数。您可以在该回调函数中执行特定的操作,例如更新视图或处理其他逻辑。
说明
一般通过使用TabBar和TabBarView的组合,您可以轻松创建具有选项卡切换功能的界面。TabBar提供了可定制的选项卡导航栏,而TabBarView用于展示与选项卡对应的内容。这使得在Flutter应用程序中实现选项卡式导航变得简单而灵活。
TabBarView介绍
TabBarView是一个用于显示与TabBar选项卡相对应的内容的组件。它与TabBar一起使用,以实现选项卡切换时内容的同步更新。
TabBarView的重要属性
下面是TabBarView的一些重要属性和功能:
children: children属性是一个必需的属性,用于指定与每个选项卡对应的子组件列表。您可以将不同的小部件放入children列表中,以显示不同的内容。
controller: controller属性用于指定TabController,它负责管理选项卡和视图之间的联动。确保将TabController实例作为TabBarView和TabBar的controller属性值保持一致。
physics: physics属性用于指定滚动行为。默认情况下,TabBarView的滚动行为与父级Scrollable组件一致。您可以根据需要设置不同的滚动行为,如NeverScrollableScrollPhysics禁用滚动或BouncingScrollPhysics添加弹性效果。
dragStartBehavior: dragStartBehavior属性控制滚动开始行为。默认情况下,它会根据环境决定是跟随垂直方向还是水平方向进行滚动。您可以通过设置为DragStartBehavior.start或DragStartBehavior.down来强制启动垂直滚动。
physics和dragStartBehavior属性的应用示例:
Copy code
TabBarView(
controller: _tabController,
physics: NeverScrollableScrollPhysics(), // 禁用滚动
dragStartBehavior: DragStartBehavior.down, // 垂直滚动
children: [
// 子组件列表
...
],
)
onPageChanged: onPageChanged属性是一个回调函数,当用户滑动或切换选项卡时,将触发该函数。您可以在此回调函数中执行任何与选项卡切换相关的操作。
TabBar总结
通过将TabBarView与TabBar和TabController结合使用,您可以实现选项卡之间内容的同步切换。当用户切换选项卡时,TabController将相应地更新TabBarView中显示的内容,使用户能够轻松浏览不同的内容。TabBarView为创建选项卡式导航提供了便捷的方式,并且可以根据实际需求进行进一步的定制和样式设置。
TabBar实现底部导航的例子
源码下载
链接: https://pan.baidu.com/s/1xsqMclJH8qXQHljKKxO-hQ?pwd=vg95
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyTabPage(),
);
}
}
class MyTabPage extends StatefulWidget {
@override
_MyTabPageState createState() => _MyTabPageState();
}
class _MyTabPageState extends State<MyTabPage> with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this); // 3是选项卡数量
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('微信'),
),
body: TabBarView(
controller: _tabController,
children: [
// 第一个选项卡的内容
Container(
child: Center(
child: Text('聊天'),
),
),
// 第二个选项卡的内容
Container(
child: Center(
child: Text('群组'),
),
),
// 第三个选项卡的内容
Container(
child: Center(
child: Text('个人'),
),
),
],
),
bottomNavigationBar: TabBar(
controller: _tabController,
tabs: [
Tab(icon: Icon(Icons.chat), text: '聊天'),
Tab(icon: Icon(Icons.group), text: '群组'),
Tab(icon: Icon(Icons.person), text: '个人'),
],
indicatorColor: Colors.blue, // 选中状态下的指示器颜色
labelColor: Colors.blue, // 选中状态下的文本颜色
unselectedLabelColor: Colors.grey, // 未选中状态下的文本颜色
),
);
}
}
效果图如下:
备注:
记得用TabController将TabBarView与TabBar结合起来,这样才能实现联动,TabBar选择时TabBarView才会刷新,TabBarView滑动切换时TabBar的焦点才会跟着变。
BottomNavigationBar实现
BottomNavigationBar介绍
BottomNavigationBar是Flutter提供的用于底部导航栏的小部件,它可以在应用程序的底部显示一组导航选项。下面是对BottomNavigationBar的详细介绍。
构造函数:
BottomNavigationBar({
Key? key,
required List<BottomNavigationBarItem> items, // 导航选项列表
int currentIndex = 0, // 当前选中的索引
Color? backgroundColor, // 背景颜色
Color? unselectedItemColor, // 未选中项的颜色
Color? selectedItemColor, // 选中项的颜色
double? elevation, // 阴影高度
BottomNavigationBarType type = BottomNavigationBarType.fixed, // 样式类型
ValueChanged<int>? onTap, // 点击事件回调
MouseCursor? mouseCursor, // 鼠标指针
bool enableFeedback = true, // 是否启用触觉反馈
})
属性:
items:一个包含BottomNavigationBarItem对象的列表,表示导航栏的选项。每个BottomNavigationBarItem包含一个图标和一个可选的文本标签。
currentIndex:当前选中的选项的索引。
backgroundColor:导航栏的背景颜色。
unselectedItemColor:未选中项的颜色。
selectedItemColor:选中项的颜色。
elevation:导航栏的阴影高度。
type:导航栏的样式类型。可以是BottomNavigationBarType.fixed(固定样式,所有选项占用相等的空间)或BottomNavigationBarType.shifting(移动样式,选中的选项会突出显示)。
onTap:点击导航项时的回调函数,它接受一个int类型的参数,表示选中的选项的索引。
mouseCursor:鼠标指针的样式。
enableFeedback:是否启用触觉反馈。
BottomNavigationBar实现底部导航栏的例子
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyTabPage(),
);
}
}
class MyTabPage extends StatefulWidget {
@override
_MyTabPageState createState() => _MyTabPageState();
}
class _MyTabPageState extends State<MyTabPage> with SingleTickerProviderStateMixin {
int _currentIndex = 0;
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this); // 3是选项卡数量
_tabController.addListener(_handleTabChange); // 添加 *
}
@override
void dispose() {
_tabController.removeListener(_handleTabChange); // 移除 *
_tabController.dispose();
super.dispose();
}
void _handleTabChange() {
setState(() {
_currentIndex = _tabController.index; // 更新焦点索引
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('微信'),
),
body: TabBarView(
controller: _tabController,
children: [
// 第一个选项卡的内容
Container(
child: Center(
child: Text('聊天'),
),
),
// 第二个选项卡的内容
Container(
child: Center(
child: Text('群组'),
),
),
// 第三个选项卡的内容
Container(
child: Center(
child: Text('个人'),
),
),
],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
_currentIndex = index;
_tabController.animateTo(index); // 切换TabBarView
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.chat),
label: '聊天',
),
BottomNavigationBarItem(
icon: Icon(Icons.group),
label: '群组',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: '个人',
),
],
),
);
}
}
效果如下:
我们使用了BottomNavigationBar小部件代替了TabBar。BottomNavigationBar可以放在屏幕底部,并且具有内置的标签和图标。我们将currentIndex绑定到当前选中的标签的索引,以便在用户更改标签时更新底部导航栏。我们还使用onTap回调,以便在用户点击标签时切换TabBarView中的标签页。
请注意,在此示例中,我们仍然使用了TabBarView来显示选项卡内容。我们通过将TabController传递给TabBarView来将其与BottomNavigationBar同步。这样,当用户更改底部导航栏的标签时,TabBarView也会切换到相应的标签页。我们添加了一个_handleTabChange方法来处理选项卡的变化。在initState方法中,我们将此方法添加为TabController的 * 。当TabController的索引发生变化时,_handleTabChange方法会被调用,然后我们更新底部导航栏的焦点索引_currentIndex,从而实现底部导航栏焦点随着TabBarView的滑动而更新。
在_handleTabChange方法中,我们使用了setState来触发重新构建界面,以便更新底部导航栏焦点。
这些都是必要的,不然TabBarView和BottomNavigationBar不会联动。
来源:https://blog.csdn.net/yikezhuixun/article/details/130725705
猜你喜欢
- 前言最近看插件库上少有的取色器大都是圆形的或者奇奇怪的的亚子,所以今天做两个矩形的颜色取色器提示:以下是本篇文章正文内容,下面案例可供参考一
- 这篇会深化View拖拽实例,利用Flutter Animation、插值器以及AnimatedBuilder教大家实现带动画的抽屉效果。先来
- 目标效果: 点击动画按钮之后每张牌各自旋转 散开到屏幕上半部分的任意位置之后回到初始位置 比较像LOL男刀的技能动画 : )1: 创建卡牌对
- 上一篇Flutter页面路由及404路由拦截实现介绍了使用路由来实现页面的跳转,从而简化页面之间的耦合,并可以实现路由拦截。在实际开发中,我
- 本文实例为大家分享了flutter实现appbar下选项卡切换的具体代码,供大家参考,具体内容如下TabBar 、Tab、TabBarVie
- 前言开发中,免不了会用到多边形、多角星等图案,比较常用的多边形比如雷达图、多角星比如评价星级的五角星等,本篇文章就使用Flutter绘制封装
- 目录前言使用自写代码预览完整代码使用第三个插件编码结论前言本文将带您了解在 Flutter 中制作翻转卡片动画的两个完整示例。第一个示例从头
- 开发环境win10Android Studio效果用于多级菜单展示,或选择。如 每个省,市,县;如 树木的病虫害;关键代码 @overrid
- flutter material widget组件之信息展示组件,供大家参考,具体内容如下widget分为两类:widgets librar
- 目录为什么要使用路由Flutter路由介绍页面结构与逻辑实现关键代码页面路由跳转为什么要使用路由在之前我们的代码中,页面跳转使用的代码如下所
- 废话开篇:iOS与android在实现列表界面的时候是有重用机制的,目的就是减少内存开销,用时间换空间。个人感觉flutter并没有特别强调
- 概述:App几乎都离不开与服务器的交互,本文主要讲解了flutter网络请求三种方式 flutter自带的HttpClient、 第三方库h
- 您已经看到很多包含视频内容的应用程序,比如带有视频教程的食谱应用程序、电影应用程序和体育相关的应用程序。您是否想知道如何将视频内容添加到您的
- 本文介绍了Flutter 通过Clipper实现各种自定义形状的示例代码,分享给大家,具体如下:ClipOval 圆形裁剪ClipOval(
- 一、Flutter代码的启动起点我们在多数的业务场景下,使用的都是FlutterActivity、FlutterFragment。在在背后,
- 前言之前我们提到了 CustomPaint er 的 Paint 可以使用渐变(GradientShader)来填充绘制的图形,本篇我们来介
- 目录效果展示剪裁 WidgetClipRRect(圆角矩形剪裁)其他属性其他形状剪裁ClipOval(椭圆剪裁)其他属性ClipRect(矩
- 1.map遍历快速实现边距,文字自适应改变大小Container( // padding: EdgeI
- 前言本文的记录如何用CustomPaint、GestureDetector实现一个进度条控件。首先需要说明的是 flutter Materi
- 简介对于一个APP来说,肯定会有一个AppBar,这个AppBar一般包含了APP的导航信息等。虽然我们可以用一个固定的组件来做为AppBa