flutter 实现底部tabBar 页面跳转效果
效果图如下: 点击底部tabBar切换页面代码如下://主页面底部tabbarimport 'package:app_ftr/pages/DyPage.dart';import 'package:flutter/material.dart';import 'package:flutter_screenutil/screenutil.dart';//动态组件class IndexPage exten
·
效果图如下: 点击底部tabBar切换页面
代码如下:
//主页面底部tabbar
import 'package:app_ftr/pages/DyPage.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';
//动态组件
class IndexPage extends StatefulWidget {
IndexPage({Key key}) : super(key: key);
@override
_IndexPageState createState() => _IndexPageState();
}
class _IndexPageState extends State<IndexPage> {
//初始化控制器
PageController _pageController = PageController();
int _currentIndex = 0; //底部tap高亮下标
void initState() {
super.initState();
//监听控制器滑动变化,改变底部tap
_pageController.addListener(() {
setState(() {
_currentIndex = (_pageController.page).round();
});
});
}
@override
Widget build(BuildContext context) {
ScreenUtil.init(context, width: 750, allowFontScaling: false);
return Scaffold(
body: _currentPage(),
//底部导航Bar
bottomNavigationBar: BottomNavigationBar(
onTap: (int index) {
setState(() {
_currentIndex = index;
});
//控制器跳转页面
_pageController.jumpToPage(index);
},
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.white,
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.grey,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('电影')),
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('图书')),
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('个人'))
]
),
);
}
//底部对应 页面
Widget _currentPage() {
List _pages = [
DyPage(), //首页组件渲染页面
Text('电影'), //下面可自定义页面组件
Text('图书'),
Text('个人'),
];
return PageView.builder(
// physics: NeverScrollableScrollPhysics(), //禁用左右滑动
itemCount: _pages.length,
controller: _pageController, //控制器
itemBuilder: (context, index) => _pages[index] //构建一个页面实例
);
}
}
更多推荐


所有评论(0)