Flutter -- iOS导航栏TabBar

  1 import 'package:flutter/cupertino.dart';
  2 import 'package:flutter/material.dart';
  3 
  4 void main(){
  5   runApp(new MyApp());
  6 }
  7 
  8 class MyApp extends StatelessWidget{
  9   @override
 10   Widget build(BuildContext context) {
 11     // TODO: implement build
 12     return new MaterialApp(
 13       title: '练习tabbar',
 14       theme: ThemeData.light(),
 15       home: MyPage(),
 16     );
 17   }
 18 }
 19 
 20 class MyPage extends StatefulWidget{
 21   @override
 22   _MyPageState createState() => _MyPageState();
 23 }
 24 
 25 
 26 class _MyPageState extends State<MyPage>{
 27   @override
 28   Widget build(BuildContext context) {
 29     // TODO: implement build
 30     return CupertinoTabScaffold(
 31       tabBar: CupertinoTabBar(
 32         backgroundColor: CupertinoColors.extraLightBackgroundGray,
 33         items: [
 34           BottomNavigationBarItem(
 35             icon: Icon(CupertinoIcons.home),
 36             title: Text('主页'),
 37           ),
 38           BottomNavigationBarItem(
 39             icon: Icon(CupertinoIcons.conversation_bubble),
 40             title: Text('聊天'),
 41           ),
 42           BottomNavigationBarItem(
 43             icon: Icon(CupertinoIcons.conversation_bubble),
 44             title: Text('ZLJ'),
 45           )
 46         ],
 47       ),
 48       tabBuilder: (context,index){
 49         return CupertinoTabView(
 50           builder: (context){
 51             switch(index){
 52               case 0 :
 53                 return HomePage();
 54                 break;
 55               case 1 :
 56                 return ChatPage();
 57                 break;
 58               case 2 :
 59                 return HomePage();
 60                 break;
 61               default:
 62                 return Container();
 63             }
 64 
 65           },
 66         );
 67       },
 68     );
 69 
 70   }
 71 }
 72 
 73 
 74 class HomePage extends StatelessWidget{
 75   @override
 76   Widget build(BuildContext context) {
 77     // TODO: implement build
 78     return CupertinoPageScaffold(
 79       navigationBar: CupertinoNavigationBar(
 80         middle: Text('主页'),
 81       ),
 82       child: Center(
 83         child: Text(
 84           '主页',
 85           style:Theme.of(context).textTheme.button,
 86         ),
 87       ),
 88     );
 89   }
 90 }
 91 
 92 
 93 class ChatPage extends StatelessWidget{
 94   @override
 95   Widget build(BuildContext context) {
 96     // TODO: implement build
 97     return CupertinoPageScaffold(
 98       navigationBar: CupertinoNavigationBar(
 99         middle: Text("聊天面板"),
100         trailing: Icon(CupertinoIcons.add),
101         leading: Icon(CupertinoIcons.back),
102       ),
103       child: Center(
104         child: Text(
105           '聊天面板',
106           style: Theme.of(context).textTheme.button,
107         ),
108       ),
109     );
110   }
111 }