Flutter学习记录（三、Flutter项目学习navBar的使用）

首先写好几个子页面

count.dart

import 'package:flutter/material.dart';
class Count extends StatefulWidget{
  @override
  State createState() {
    return new CountState();
  }
}
class CountState extends State{

  @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 createState() {
    return new CustomState();
  }
}
class CustomState extends State{
  @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 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: [
            new Order(),
            new Custom(),
            new Goods(),
            new Count(),
            new Setting(),
          ],
      ),
      bottomNavigationBar: new Material(
        color: Colors.orangeAccent,
        child: new TabBar(
            controller: controller,
            tabs: [
              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)),
            ]
        ),
      ),
    );
  }
}

最后运行：