Flutter 项目实战 底部导航 六
Posted xmiaoshen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter 项目实战 底部导航 六相关的知识，希望对你有一定的参考价值。
/ 生活中常部分app底部导航样式 /
从智能手机的普及我们的生活 , 手机已经为我们生活提供了方便 . 购买手机后系统默认安装了很多款app , 随便点开一款手机app 进入应用首页映入眼帘的就是底部导航 . 可以说手机app为我们生活提供了方便 , 同时app里面的底部导航为我们更好的使用应用 . 市面上的app底部导航切换样式都差不多 (分底部Tab 导航栏 和 舵式导航栏) . 点击底部导航选项可以切换到不同功能模块的 , 让用户在使用的时候更加清楚要导航的功能 .
/ app底部导航构造 /
导航选项纯图标
导航纯文本
导航图文混排
/ Flutter 实现底部导航 /
BottomNavigationBarItem
服务于 BottomNavigationBar . 包括属性icon (选项图标)、title (选项包括文本的widget被弃用)、label (导航栏文本值)、backgroundColor、tooltip (长按时选项顶部弹出提示 , 长按选项时选项样式不会发生改变)
在flutter sdk 大于1.19.0的版本上使用该参数 , 抛出如下异常 :
backgroundColor 选项有渐变和移动效果状态下的背景颜色
BottomNavigationBar 参数 BottomNavigationBarType 是 BottomNavigationBarType.shifting 生效. 会覆盖导航栏BottomNavigationBar背景颜色 . 访问B站查看效果
tooltip 长按选项弹出提示 访问B站查看效果
BottomNavigationBar
底部导航 可以自定义 选项文本、图标样式 . 长按点击弹出提示 . 可以使用flutter自带的icon 切换图标的样式 .
items / BottomNavigationBarItem 集合
flutter自带的Icon
class StartPage extends StatefulWidget
StartPage(Key? key, this.title) : super(key: key);
final String? title;
@override
_StartPageState createState() => _StartPageState();
class _StartPageState extends State<StartPage>
GlobalKey<StackWState> _stackGk = GlobalKey<StackWState>();
@override
Widget build(BuildContext context)
return Scaffold(
bottomNavigationBar: BotNavBar(
stackValue: (int currentIndex, List<int> tabInt)
_stackGk.currentState!.changeStack(currentIndex, tabInt);
,
),
body: StackWidget(
key: _stackGk,
));
import 'package:flutter/cupertino.dart';
import 'package:flutter_bottom_navigator/base/presenter/IPresenter.dart';
import 'package:flutter_bottom_navigator/base/view/BaseView.dart';
import 'package:flutter_bottom_navigator/base/view/IView.dart';
class StackWidget extends BaseView
final int? currentIndex;
final List<int>? tabInt;
StackWidget(this.currentIndex, this.tabInt, Key? key) : super(key: key);
@override
BaseViewState<IPresenter<IView>, BaseView> getState()
return StackWState();
class StackWState extends BaseViewState<IPresenter, StackWidget>
int _currentIndex = 0;
List<int>? _tabInt;
final List<Widget> _children = [
Center(
child: Text('Page1'),
),
Center(
child: Text('Page2'),
),
];
@override
void initState()
// TODO: implement initState
super.initState();
_tabInt = widget.tabInt == null ? [0] : widget.tabInt;
void changeStack(int currentIndex, List<int> tabInt)
setState(() );
_currentIndex = currentIndex;
_tabInt = tabInt;
//Page的显示和隐藏
_child(int _index)
return Offstage(
offstage: !(_currentIndex == _index),
child: _tabInt!.contains(_index) ? _children[_index] : Container(),
);
@override
buildWidget()
// TODO: implement buildWidget
return Stack(
children: <Widget>[
_child(0),
_child(1),
],
);
import 'package:flutter/material.dart';
class BotNavBar extends StatefulWidget
final ValueChanged? stackValue;
BotNavBar(Key? key, this.stackValue) : super(key: key);
@override
_BotNavBarState createState() => _BotNavBarState();
class _BotNavBarState extends State<BotNavBar>
List<int> tabInt = [0];
int _currentIndex = 0;
late var _tabImages;
@override
void initState()
// TODO: implement initState
super.initState();
_tabImages = [
_singleTabImage('home'),
_singleTabImage('type'),
_singleTabImage('mine'),
];
BottomNavigationBarItem _singleBotNavItem(_index)
return BottomNavigationBarItem(
icon: _getTabIcon(
_index,
),
backgroundColor: Colors.red,
tooltip: '$_index tooltips',
//title: Text('$_index title'),
label: '$_index label');
_singleTabImage(_labelPng)
return [
Icon(Icons.message),
Icon(Icons.message),
];
Widget _getTabIcon(int curIndex)
if (curIndex == _currentIndex)
return _tabImages[curIndex][0];
return _tabImages[curIndex][1];
@override
Widget build(BuildContext context)
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: _onTabTapped,
currentIndex: _currentIndex,
backgroundColor: Colors.white,
selectedItemColor: Colors.blue,
unselectedItemColor: Color(0xffAFB1BD),
elevation: 6.0,
selectedIconTheme: IconThemeData(color: Colors.green),
unselectedIconTheme: IconThemeData(color: Colors.red),
selectedLabelStyle: TextStyle(inherit: true),
//fixedColor: Colors.blue,
showUnselectedLabels: true,
showSelectedLabels: true,
mouseCursor: SystemMouseCursors.move,
enableFeedback: false,
items: [
_singleBotNavItem(0),
_singleBotNavItem(1),
],
);
_onTabTapped(int index)
setState(() );
_currentIndex = index;
if (!tabInt.contains(index))
tabInt.add(index);
if (widget.stackValue != null)
widget.stackValue!(_currentIndex, tabInt);
typedef ValueChanged = void Function(
int currentIndex,
List<int> tabInt,
);
自定义Icon
创建assets 文件夹来存储要读取的自定义图标
在 pubspec.yaml 文件里面配置图片的依赖
_singleTabImage(_labelPng)
return [
Image.asset(
'assets/$_labelPng_b_select.png',
width: 40.0,
height: 40.0,
),
Image.asset(
'assets/$_labelPng_b_normal.png',
width: 40.0,
height: 40.0,
)
];
elevation / 导航栏阴影Z坐标
selectedLabelStyle / unselectedLabelStyle
导航栏选中文本的样式 (字体颜色、背景颜色、字体权重、字体阴影 、…...)
导航栏选中文本的样式 (字体颜色、背景颜色、字体权重、字体阴影 、……)
showSelectedLabels / showUnselectedLabels
是否显示选中时的文本 / 是否显示未选中时的文本
GlobalKey 实现导航局部刷新
StartPage 包含了 内容区域 (StackWidget) 和底部导航 (BotNavBar) . 当首次进入应用时 , 会渲染内容容区域和底部导航 . 当我们需要切换其它导航时 , 要做到切换导航重新渲染内容区域和底部导航而不执行内容区域和底部导航的父控件StartPage的build函数,需要用到GlobalKey来实现点击导航刷新内容区域而不执行StartPage的build函数 .
class _StartPageState extends State<StartPage>
GlobalKey<StackWState> _stackGk = GlobalKey<StackWState>();
@override
Widget build(BuildContext context)
print('StartPage _build');
return Scaffold(
bottomNavigationBar: BotNavBar(
stackValue: (int currentIndex, List<int> tabInt)
_stackGk.currentState!.changeStack(currentIndex, tabInt);
,
),
body: StackWidget(
key: _stackGk,
));
以上是关于Flutter 项目实战 底部导航 六的主要内容，如果未能解决你的问题，请参考以下文章