方法一:tabbarview
参考github开源项目:https://github.com/alibaba/flutter-go
代码如下:
/**
* @Author: czy
* @Description:
* @Date: 2019-05-27
*/
import 'package:flutter/material.dart';
import 'child_page.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State with SingleTickerProviderStateMixin {
TabController controller;
static List tabData = [
{'text': '业界动态', 'icon': new Icon(Icons.language)},
{'text': 'WIDGET', 'icon': new Icon(Icons.extension)},
{'text': '组件收藏', 'icon': new Icon(Icons.favorite)},
{'text': '关于手册', 'icon': new Icon(Icons.import_contacts)}
];
List myTabs = [];
@override
void initState() {
super.initState();
controller = TabController(length: tabData.length, vsync: this, initialIndex: 0);
print('tabData ${tabData.length.toString()}');
for (int i = 0; i < tabData.length; i++) {
print(tabData[i]['text']);
myTabs.add(Tab(text: tabData[i]['text'], icon: tabData[i]['icon']));
print(myTabs.length.toString());
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('xxxx'),
elevation: 0,
),
body: TabBarView(
children: [
ChildPage(Colors.lightGreen),
ChildPage(Colors.black45),
ChildPage(Colors.cyan),
ChildPage(Colors.deepPurpleAccent)
],
controller: controller,
),
bottomNavigationBar: Material(
color: const Color(0xFFF0EEEF), //底部导航栏主题颜色
child: SafeArea(
child: Container(
height: 65.0,
decoration: BoxDecoration(
color: const Color(0xFFF0F0F0),
boxShadow: [
BoxShadow(
color: const Color(0xFFd0d0d0),
blurRadius: 3.0,
spreadRadius: 2.0,
offset: Offset(-1.0, -1.0),
),
],
),
child: TabBar(
controller: controller,
labelColor: Theme.of(context).primaryColor,
unselectedLabelColor: const Color(0xFF8E8E8E),
tabs: myTabs
),
),
),
),
);
}
}
效果如下:
运行效果.gif
方式二:IndexedStack
参考github开源项目:https://github.com/Mayandev/morec
代码如下:
/**
* @Author: czy
* @Description:
* @Date: 2019-05-28
*/
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'child_page.dart';
class Home2Page extends StatefulWidget {
@override
_Home2PageState createState() => _Home2PageState();
}
class _Home2PageState extends State {
int _tabIndex = 0;
static List tabData = [
{'text': '业界动态', 'icon': new Icon(Icons.language)},
{'text': 'WIDGET', 'icon': new Icon(Icons.extension)},
{'text': '组件收藏', 'icon': new Icon(Icons.favorite)},
{'text': '关于手册', 'icon': new Icon(Icons.import_contacts)}
];
List myTabs = [];
@override
void initState() {
super.initState();
for (int i = 0; i < tabData.length; i++) {
myTabs.add(BottomNavigationBarItem(icon: tabData[i]['icon'], title: Text(tabData[i]['text'])));
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('xxxxx')),
body: IndexedStack(
children: [
ChildPage(Colors.lightGreen),
ChildPage(Colors.black45),
ChildPage(Colors.cyan),
ChildPage(Colors.deepPurpleAccent)
],
index: _tabIndex,
),
bottomNavigationBar: CupertinoTabBar(
backgroundColor: Colors.white,
activeColor: Theme.of(context).primaryColor,
currentIndex: _tabIndex,
items: myTabs,
onTap: (index) {
setState(() {
_tabIndex = index;
});
},
),
);
}
}
方式三:PageView
代码:
/**
* @Author: czy
* @Description:
* @Date: 2019-05-28
*/
import 'package:flutter/material.dart';
import 'child_page.dart';
class Home3Page extends StatefulWidget {
@override
_Home3PageState createState() => _Home3PageState();
}
class _Home3PageState extends State with SingleTickerProviderStateMixin {
TabController tabController;
PageController pageController;
static List tabData = [
{'text': '业界动态', 'icon': new Icon(Icons.language)},
{'text': 'WIDGET', 'icon': new Icon(Icons.extension)},
{'text': '组件收藏', 'icon': new Icon(Icons.favorite)},
{'text': '关于手册', 'icon': new Icon(Icons.import_contacts)}
];
List myTabs = [];
@override
void initState() {
super.initState();
pageController = PageController();
tabController = TabController(length: tabData.length, vsync: this, initialIndex: 0);
for (int i = 0; i < tabData.length; i++) {
myTabs.add(Tab(text: tabData[i]['text'], icon: tabData[i]['icon']));
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('xxxx'),
elevation: 0,
),
body: new PageView(
controller: pageController,
onPageChanged: (index) {
tabController.animateTo(index);
},
children: [
ChildPage(Colors.lightGreen),
ChildPage(Colors.black45),
ChildPage(Colors.cyan),
ChildPage(Colors.deepPurpleAccent)
],
),
bottomNavigationBar: Material(
color: const Color(0xFFF0EEEF), //底部导航栏主题颜色
child: SafeArea(
child: Container(
height: 65.0,
decoration: BoxDecoration(
color: const Color(0xFFF0F0F0),
boxShadow: [
BoxShadow(
color: const Color(0xFFd0d0d0),
blurRadius: 3.0,
spreadRadius: 2.0,
offset: Offset(-1.0, -1.0),
),
],
),
child: TabBar(
controller: tabController,
labelColor: Theme.of(context).primaryColor,
unselectedLabelColor: const Color(0xFF8E8E8E),
tabs: myTabs,
onTap: (index) {
pageController.jumpTo(MediaQuery.of(context).size.width * index);
},
),
),
),
),
);
}
}