首先寫好幾個子頁面

count.dart

import 'package:flutter/material.dart'; class Count extends StatefulWidget{@overrideState<StatefulWidget> createState() {return new CountState();} } class CountState extends State<Count>{@overrideWidget 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{@overrideState<StatefulWidget> createState() {return new CustomState();} } class CustomState extends State<Custom>{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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{@overrideState<StatefulWidget> createState() {return new HomeState();} } class HomeState extends State with SingleTickerProviderStateMixin{TabController controller;@overridevoid initState() {controller=new TabController(length: 5, vsync: this);}@overridevoid dispose() {controller.dispose();super.dispose();}@overrideWidget 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)),]),),);} }

最后運行：

總結

以上是生活随笔為你收集整理的Flutter学习记录（三、Flutter项目学习navBar的使用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。