PS:网上找了很多教程,发现大部分源码都是有缺陷的,所以自己动手撸了一个 废话少说,上源码
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart'; //如果报错那么证明大概可能你没有引入这个插件
import './page/cart.dart';
import './page/classify.dart';
import './page/home.dart';
import './page/mine.dart';
//这里就是传说中的四个页面
void main() => runApp(MaterialApp(
home: BottomNavBar(),
));
class BottomNavBar extends StatefulWidget {
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
PageController controller;
int _page = 0;
GlobalKey _bottomNavigationKey = GlobalKey();
@override
void initState() {
super.initState();
controller = PageController(
//初始化一下
initialPage: _page, //默认在第几个
viewportFraction: 1, // 占屏幕多少,1为占满整个屏幕
keepPage: true, //是否保持当前页面状态
);
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: this._page,
height: 50.0,
items: <Widget>[
Icon(
Icons.home,
size: 30,
color: Colors.white,
),
Icon(
Icons.list,
size: 30,
color: Colors.white,
),
Icon(
Icons.add_shopping_cart,
size: 30,
color: Colors.white,
),
Icon(
Icons.supervised_user_circle,
size: 30,
color: Colors.white,
),
],
color: Color.fromRGBO(234, 81, 127, 1),
buttonBackgroundColor: Color.fromRGBO(238, 63, 77, 1),
backgroundColor: Color.fromRGBO(233, 215, 223, 0),
animationCurve: Curves.fastOutSlowIn,
animationDuration: Duration(milliseconds: 300),
onTap: (index) {
setState(() {
_page = index;
this.controller.animateToPage(
_page, //跳转到的位置
duration: Duration(milliseconds: 2), //跳转的间隔时间
curve: Curves.fastOutSlowIn, //跳转动画
);
});
},
),
body: PageView(
controller: this.controller,
onPageChanged: (index) {
//这里注意下
setState(() {
_page = index;
});
},
children: <Widget>[Home(), Classify(), Cart(), Mine()],
));
}
}