html ios导航栏下拉菜单,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 @override10 Widget build(BuildContext context) {11 // TODO: implement build12 return new MaterialApp(13 title: ‘练习tabbar‘,14 theme: ThemeData.light(),15 home: MyPage(),16 );17 }18 }19

20 class MyPage extends StatefulWidget{21 @override22 _MyPageState createState() => _MyPageState();23 }24

25

26 class _MyPageState extends State{27 @override28 Widget build(BuildContext context) {29 // TODO: implement build30 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 @override76 Widget build(BuildContext context) {77 // TODO: implement build78 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 @override95 Widget build(BuildContext context) {96 // TODO: implement build97 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 }