Flutter 项目实战 底部导航 六

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 {

GlobalKey _stackGk = GlobalKey();

@override

Widget build(BuildContext context) {

return Scaffold(

bottomNavigationBar: BotNavBar(

stackValue: (int currentIndex, List 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? tabInt;

StackWidget({this.currentIndex, this.tabInt, Key? key}) : super(key: key);

@override

BaseViewState<IPresenter, BaseView> getState() {

return StackWState();

}

}

class StackWState extends BaseViewState<IPresenter, StackWidget> {

int _currentIndex = 0;

List? _tabInt;

final List _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 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: [

_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 {

List 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 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’,

最后我还整理了很多Android中高级的PDF技术文档。以及一些大厂面试真题解析文档。

Android高级架构师之路很漫长，一起共勉吧！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
1pYW9zaGVu,size_20,color_FFFFFF,t_70,g_se,x_16)

_singleTabImage(_labelPng) {

return [

Image.asset(

‘assets/${_labelPng}_b_select.png’,

width: 40.0,

height: 40.0,

),

Image.asset(

‘assets/${_labelPng}_b_normal.png’,

最后我还整理了很多Android中高级的PDF技术文档。以及一些大厂面试真题解析文档。

[外链图片转存中…(img-kJPjxE2c-1714704465292)]

Android高级架构师之路很漫长，一起共勉吧！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！