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 }