0
0

Flutter 项目实战 底部导航 六

/ 生活中常部分app底部导航样式 /

  1.     从智能手机的普及我们的生活 , 手机已经为我们生活提供了方便 . 购买手机后系统默认安装了很多款app , 随便点开一款手机app 进入应用首页映入眼帘的就是底部导航 . 可以说手机app为我们生活提供了方便 , 同时app里面的底部导航为我们更好的使用应用 . 市面上的app底部导航切换样式都差不多 (分底部Tab 导航栏 和 舵式导航栏) .  点击底部导航选项可以切换到不同功能模块的 , 让用户在使用的时候更加清楚要导航的功能 .


底部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

  1. class StartPage extends StatefulWidget {
  2.   StartPage({Key? key, this.title}) : super(key: key);
  4.   final String? title;
  6.   @override
  7.   _StartPageState createState() => _StartPageState();
  8. }
  10. class _StartPageState extends State<StartPage> {
  11.   GlobalKey<StackWState> _stackGk = GlobalKey<StackWState>();
  13.   @override
  14.   Widget build(BuildContext context) {
  15.     return Scaffold(
  16.         bottomNavigationBar: BotNavBar(
  17.           stackValue: (int currentIndex, List<int> tabInt) {
  18.             _stackGk.currentState!.changeStack(currentIndex, tabInt);
  19.           },
  20.         ),
  21.         body: StackWidget(
  22.           key: _stackGk,
  23.         ));
  24.   }
  25. }
  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter_bottom_navigator/base/presenter/IPresenter.dart';
  3. import 'package:flutter_bottom_navigator/base/view/BaseView.dart';
  4. import 'package:flutter_bottom_navigator/base/view/IView.dart';
  6. class StackWidget extends BaseView {
  7.   final int? currentIndex;
  8.   final List<int>? tabInt;
  10.   StackWidget({this.currentIndex, this.tabInt, Key? key}) : super(key: key);
  12.   @override
  13.   BaseViewState<IPresenter<IView>, BaseView> getState() {
  14.     return StackWState();
  15.   }
  16. }
  18. class StackWState extends BaseViewState<IPresenter, StackWidget> {
  19.   int _currentIndex = 0;
  20.   List<int>? _tabInt;
  22.   final List<Widget> _children = [
  23.     Center(
  24.       child: Text('Page1'),
  25.     ),
  26.     Center(
  27.       child: Text('Page2'),
  28.     ),
  29.   ];
  31.   @override
  32.   void initState() {
  33.     // TODO: implement initState
  34.     super.initState();
  35.     _tabInt = widget.tabInt == null ? [0] : widget.tabInt;
  36.   }
  38.   void changeStack(int currentIndex, List<int> tabInt) {
  39.     setState(() {});
  40.     _currentIndex = currentIndex;
  41.     _tabInt = tabInt;
  42.   }
  44.   //Page的显示和隐藏
  45.   _child(int _index) {
  46.     return Offstage(
  47.       offstage: !(_currentIndex == _index),
  48.       child: _tabInt!.contains(_index) ? _children[_index] : Container(),
  49.     );
  50.   }
  52.   @override
  53.   buildWidget() {
  54.     // TODO: implement buildWidget
  55.     return Stack(
  56.       children: <Widget>[
  57.         _child(0),
  58.         _child(1),
  59.       ],
  60.     );
  61.   }
  62. }
  1. import 'package:flutter/material.dart';
  3. class BotNavBar extends StatefulWidget {
  4.   final ValueChanged? stackValue;
  6.   BotNavBar({Key? key, this.stackValue}) : super(key: key);
  8.   @override
  9.   _BotNavBarState createState() => _BotNavBarState();
  10. }
  12. class _BotNavBarState extends State<BotNavBar> {
  13.   List<int> tabInt = [0];
  14.   int _currentIndex = 0;
  16.   late var _tabImages;
  18.   @override
  19.   void initState() {
  20.     // TODO: implement initState
  21.     super.initState();
  22.     _tabImages = [
  23.       _singleTabImage('home'),
  24.       _singleTabImage('type'),
  25.       _singleTabImage('mine'),
  26.     ];
  27.   }
  29.   BottomNavigationBarItem _singleBotNavItem(_index) {
  30.     return BottomNavigationBarItem(
  31.         icon: _getTabIcon(
  32.           _index,
  33.         ),
  34.         backgroundColor: Colors.red,
  35.         tooltip: '$_index tooltips',
  36.         //title: Text('$_index title'),
  37.         label: '$_index label');
  38.   }
  40.   _singleTabImage(_labelPng) {
  41.     return [
  42.       Icon(Icons.message),
  43.       Icon(Icons.message),
  44.     ];
  45.   }
  47.   Widget _getTabIcon(int curIndex) {
  48.     if (curIndex == _currentIndex) {
  49.       return _tabImages[curIndex][0];
  50.     }
  51.     return _tabImages[curIndex][1];
  52.   }
  54.   @override
  55.   Widget build(BuildContext context) {
  56.     return BottomNavigationBar(
  57.       type: BottomNavigationBarType.fixed,
  58.       onTap: _onTabTapped,
  59.       currentIndex: _currentIndex,
  60.       backgroundColor: Colors.white,
  61.       selectedItemColor: Colors.blue,
  62.       unselectedItemColor: Color(0xffAFB1BD),
  63.       elevation: 6.0,
  64.       selectedIconTheme: IconThemeData(color: Colors.green),
  65.       unselectedIconTheme: IconThemeData(color: Colors.red),
  66.       selectedLabelStyle: TextStyle(inherit: true),
  67.       //fixedColor: Colors.blue,
  68.       showUnselectedLabels: true,
  69.       showSelectedLabels: true,
  70.       mouseCursor: SystemMouseCursors.move,
  71.       enableFeedback: false,
  72.       items: [
  73.         _singleBotNavItem(0),
  74.         _singleBotNavItem(1),
  75.       ],
  76.     );
  77.   }
  79.   _onTabTapped(int index) {
  80.     setState(() {});
  81.     _currentIndex = index;
  82.     if (!tabInt.contains(index)) {
  83.       tabInt.add(index);
  84.     }
  85.     if (widget.stackValue != null) {
  86.       widget.stackValue!(_currentIndex, tabInt);
  87.     }
  88.   }
  89. }
  91. typedef ValueChanged = void Function(
  92.   int currentIndex,
  93.   List<int> tabInt,
  94. );

自定义Icon

创建assets 文件夹来存储要读取的自定义图标

在 pubspec.yaml 文件里面配置图片的依赖

  1.   _singleTabImage(_labelPng) {
  2.     return [
  3.       Image.asset(
  4.         'assets/${_labelPng}_b_select.png',
  5.         width: 40.0,
  6.         height: 40.0,
  7.       ),
  8.       Image.asset(
  9.         'assets/${_labelPng}_b_normal.png',
  10.         width: 40.0,
  11.         height: 40.0,
  12.       )
  13.     ];
  14.   }

elevation / 导航栏阴影Z坐标

selectedLabelStyle / unselectedLabelStyle

导航栏选中文本的样式 (字体颜色、背景颜色、字体权重、字体阴影 、…...)

导航栏选中文本的样式 (字体颜色、背景颜色、字体权重、字体阴影 、……)

showSelectedLabels / showUnselectedLabels

是否显示选中时的文本 / 是否显示未选中时的文本

GlobalKey 实现导航局部刷新

StartPage 包含了 内容区域 (StackWidget) 和底部导航 (BotNavBar) . 当首次进入应用时 , 会渲染内容容区域和底部导航 . 当我们需要切换其它导航时 , 要做到切换导航重新渲染内容区域和底部导航而不执行内容区域和底部导航的父控件StartPage的build函数,需要用到GlobalKey来实现点击导航刷新内容区域而不执行StartPage的build函数 .

  1. class _StartPageState extends State<StartPage> {
  2.   GlobalKey<StackWState> _stackGk = GlobalKey<StackWState>();
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     print('StartPage _build');
  7.     return Scaffold(
  8.         bottomNavigationBar: BotNavBar(
  9.           stackValue: (int currentIndex, List<int> tabInt) {
  10.             _stackGk.currentState!.changeStack(currentIndex, tabInt);
  11.           },
  12.         ),
  13.         body: StackWidget(
  14.           key: _stackGk,
  15.         ));
  16.   }
  17. }

flutter_bottom_navigator 案例下载

标签： flutter
本文转载自: https://blog.csdn.net/u013491829/article/details/122271485
版权归原作者 xmiaoshen 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Flutter 项目实战 底部导航 六”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。