1.底部导航栏 (外弧样式)
实现代码:
//引入flutter的dart库
import 'package:flutter/material.dart';
//启动函数
void main() => runApp(MyApp());
//自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//MaterialApp 是flutter的页面根组件
return MaterialApp(
title: 'main根页面',
//home表示页面信息
home: BottomNavBar2()
);
}
}
//导航栏组件
class BottomNavBar2 extends StatefulWidget {
@override
_BottomNavBar2State createState() => _BottomNavBar2State();
}
class _BottomNavBar2State extends State<BottomNavBar2> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("漂浮导航栏"),
centerTitle: true,
),
//浮动按钮
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.blue,
child: Icon(Icons.add, color: Colors.white),
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(), //圆形的外弧效果
color: Colors.blue,
//自定义导航栏
child: Row(
//主轴对齐 / 两边对齐
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(icon: Icon(Icons.home, color: Colors.white), onPressed: () {}),
IconButton(icon: Icon(Icons.home, color: Colors.white), onPressed: () {}),
],
),
),
);
}
}
2.底部导航栏(标准样式)
实现代码:
//引入flutter的dart库
import 'package:flutter/material.dart';
//启动函数
void main() => runApp(MyApp());
//自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//MaterialApp 是flutter的页面根组件
return MaterialApp(
title: 'main根页面',
//home表示页面信息
home: BottomNavBar()
);
}
}
//底部导航栏组件
class BottomNavBar extends StatefulWidget {
@override
_BottomNaacBarState createState() => _BottomNaacBarState();
}
class _BottomNaacBarState extends State<BottomNavBar> {
//点击导航时显示指定内容
List<Widget> list = [Text('自行车'), Text('汽车'), Text('飞机')];
//当前点击的导航下标
int _currentController = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('底部导航栏'),
),
//页面显示的主体内容
body: list[_currentController],
bottomNavigationBar: BottomNavigationBar(
//当前选中的导航栏
currentIndex: _currentController,
//点击导航栏触发的事件
onTap: (int index) {
setState(() {
_currentController = index;
});
},
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.directions_bike), title: Text('自行车')),
BottomNavigationBarItem(
icon: Icon(Icons.directions_car), title: Text('汽车')),
BottomNavigationBarItem(
icon: Icon(Icons.airplanemode_active), title: Text('飞机')),
]),
);
}
}
3.底部导航栏(类似咸鱼样式)
实现代码:
//底部导航栏组件
class BottomNavBar extends StatefulWidget {
@override
_BottomNaacBarState createState() => _BottomNaacBarState();
}
class _BottomNaacBarState extends State<BottomNavBar> {
//点击导航时显示指定内容
List<Widget> list = [Text('自行车'), Text('汽车'), Text('飞机')];
//当前点击的导航下标
int _currentController = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('底部导航栏'),
),
//页面显示的主体内容
body: list[_currentController],
//浮动按钮代替中间导航按钮
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
width: 60,
height: 60,
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.white
),
child: FloatingActionButton(
child: Icon(Icons.directions_car),
onPressed: () {
setState(() {
_currentController = 1;
});
},
)
),
bottomNavigationBar: BottomNavigationBar(
//当前选中的导航栏
currentIndex: _currentController,
//点击导航栏触发的事件
onTap: (int index) {
setState(() {
_currentController = index;
});
},
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.directions_bike), title: Text('自行车')),
BottomNavigationBarItem(
icon: Icon(Icons.directions_car), title: Text('汽车')),
BottomNavigationBarItem(
icon: Icon(Icons.airplanemode_active), title: Text('飞机')),
]),
);
}
}