首先写好几个子页面
count.dart
import 'package:flutter/material.dart'; class Count extends StatefulWidget{ @override State<StatefulWidget> createState() { return new CountState(); } } class CountState extends State<Count>{ @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( backgroundColor: Colors.orangeAccent, title:new Center( child: new Text("统计"), ) ), body: new Center( child: new Text("这是统计页面"), ), ); } }
custom.dart
import 'package:flutter/material.dart'; class Custom extends StatefulWidget{ @override State<StatefulWidget> createState() { return new CustomState(); } } class CustomState extends State<Custom>{ @override Widget build(BuildContext context) { // TODO: implement build return new Scaffold( appBar: new AppBar( backgroundColor: Colors.orangeAccent, title:new Center( child: new Text("客户"), ) ), body: new Center( child: new Text("这是客户页面"), ), ); } }
然后我们把父页面写好(tabBar在这里设置)
import 'package:flutter/material.dart'; import './count/count.dart'; import './custom/custom.dart'; import './goods/goods.dart'; import './order/order.dart'; import './setting/setting.dart'; void main() => runApp(new MaterialApp( title: 'Flutter Tutorial', home: new HomeStateFullPage(), )); class HomeStateFullPage extends StatefulWidget{ @override State<StatefulWidget> createState() { return new HomeState(); } } class HomeState extends State with SingleTickerProviderStateMixin{ TabController controller; @override void initState() { controller=new TabController(length: 5, vsync: this); } @override void dispose() { controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return new Scaffold( body: new TabBarView( controller: controller, children: <Widget>[ new Order(), new Custom(), new Goods(), new Count(), new Setting(), ], ), bottomNavigationBar: new Material( color: Colors.orangeAccent, child: new TabBar( controller: controller, tabs: <Tab>[ new Tab(text: "订单",icon:new Icon(Icons.assignment)), new Tab(text: "客户",icon:new Icon(Icons.assignment_ind)), new Tab(text: "商品",icon:new Icon(Icons.shopping_basket)), new Tab(text: "统计",icon:new Icon(Icons.assessment)), new Tab(text: "设置",icon:new Icon(Icons.settings)), ] ), ), ); } }
最后运行: