好租客-03-主页tab实现

1、UI效果：

2、注意点：

1、底部使用 BottomNavigationBar

如果 BottomNavigationBarItem 大于等于四个，type自动改为shifting。 需要手动设置为 “type: BottomNavigationBarType.fixed”。

 # initState 函数中实现的部分barItemList = [BottomNavigationBarItem(icon: Icon(Icons.home), label: indexTitle),BottomNavigationBarItem(icon: Icon(Icons.search), label: searchTitle),BottomNavigationBarItem(icon: Icon(Icons.info), label: newsTitle),BottomNavigationBarItem(icon: Icon(Icons.person), label: userTitle),];# bottomNavigationBar点击事件响应_bottomBarOnTap(int index) {setState(() {curPageIndex = index;//pageView以动画形式跳转页面。pageController.animateToPage(index,duration: Duration(milliseconds: 300), curve: Curves.ease);});}# build 函数中实现的部分bottomNavigationBar: BottomNavigationBar(currentIndex: curPageIndex,onTap: _bottomBarOnTap,type: BottomNavigationBarType.fixed,items: barItemList),

2、body部分使用 PageView

PageController pageController;void initState() {super.initState();pageController = PageController(initialPage: curPageIndex, keepPage: true);tabViewList = [IndexPage(title: indexTitle),SearchPage(title: searchTitle),NewsPage(title: newsTitle),UserPage(title: userTitle)];
}# build 函数中实现
body: PageView(controller: pageController,children: tabViewList,onPageChanged: (value) {setState(() {curPageIndex = value;});},
),

3、代码实现：

home-page.dart文件内容：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hook_up_rent/application.dart';
import 'package:flutter_hook_up_rent/pages/home/index-page.dart';
import 'package:flutter_hook_up_rent/pages/home/news-page.dart';
import 'package:flutter_hook_up_rent/pages/home/search-page.dart';
import 'package:flutter_hook_up_rent/pages/home/user-page.dart';class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState();
}class _HomePageState extends State {String indexTitle = "首页";String searchTitle = "搜索";String newsTitle = "资讯";String userTitle = "我的";int curPageIndex = 0;List tabViewList;List barItemList;PageController pageController;@overridevoid initState() {super.initState();pageController = PageController(initialPage: curPageIndex, keepPage: true);tabViewList = [IndexPage(title: indexTitle),SearchPage(title: searchTitle),NewsPage(title: newsTitle),UserPage(title: userTitle)];barItemList = [BottomNavigationBarItem(icon: Icon(Icons.home), label: indexTitle),BottomNavigationBarItem(icon: Icon(Icons.search), label: searchTitle),BottomNavigationBarItem(icon: Icon(Icons.info), label: newsTitle),BottomNavigationBarItem(icon: Icon(Icons.person), label: userTitle),];}_bottomBarOnTap(int index) {setState(() {curPageIndex = index;pageController.animateToPage(index,duration: Duration(milliseconds: 300), curve: Curves.ease);});}@overrideWidget build(BuildContext context) {return Scaffold(body: PageView(controller: pageController,children: tabViewList,onPageChanged: (value) {setState(() {curPageIndex = value;});},),bottomNavigationBar: BottomNavigationBar(currentIndex: curPageIndex,onTap: _bottomBarOnTap,type: BottomNavigationBarType.fixed,items: barItemList),);}
}

index-page.dart文件内容：

import 'package:flutter/material.dart';class IndexPage extends StatefulWidget {final String title;IndexPage({this.title});@override_IndexPageState createState() => _IndexPageState();
}class _IndexPageState extends State {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),centerTitle: true,),body: Center(child: Text(widget.title),),);}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！