Flutter熟悉布局（二）底部导航栏

运行效果

b1.jpg b2.jpg

文件

a1.png

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_app/home.dart';
import 'package:flutter_app/supply_info.dart';
import 'package:flutter_app/purchase_info.dart';
import 'package:flutter_app/mine.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new MyMainPage();
  }
}

class MyMainPage extends State<MyApp> {

  //页面当前的位置  默认为0
  int currentPosition = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'My app',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        body: _getBody(currentPosition),
        bottomNavigationBar: new CupertinoTabBar(

          currentIndex: currentPosition,
          items: _getBottomTabs(currentPosition),
          activeColor: Color.fromARGB(255, 248, 147, 33),
          inactiveColor: Colors.grey,
          backgroundColor: Colors.white,
          onTap: (index) {
            //重新加载状态
            setState(() {
              currentPosition = index;
            });
          },
        ),
      ),
    );
  }
}

List<BottomNavigationBarItem> _getBottomTabs(int currentPosition) {

  List<BottomNavigationBarItem> list = new List();

  if (currentPosition == 0) {
    list.add(_set('首页', 'images/main_home_selected.png'));
  } else {
    list.add(_set('首页', 'images/main_home.png'));
  }

  if (currentPosition == 1) {
    list.add(_set('供应信息', 'images/main_supply_selected.png'));

  } else {
    list.add(_set('供应信息', 'images/main_supply.png'));
  }

  if (currentPosition == 2) {
    list.add(_set('采购信息', 'images/main_purchase_selected.png'));

  } else {
    list.add(_set('采购信息', 'images/main_purchase.png'));

  }

  if (currentPosition == 3) {
    list.add(_set('我的', 'images/main_mine_selected.png'));

  } else {
    list.add(_set('我的', 'images/main_mine.png'));
  }

  return list;

}

BottomNavigationBarItem _set(String name,String path){
  return new BottomNavigationBarItem(icon: Image.asset(path,height: 24.0,width: 24.0,),
    title: Text(name,style: TextStyle(fontSize: 12.0))
  );
}


Widget _getBody(int i) {

  switch (i) {
    case 0:
      return new HomePage();
    case 1:
      return new SupplyInfoPage();
    case 2:
      return new PurchaseInfoPage();
    case 3:
      return new MinePage();
  }
  return new HomePage();
}

其中一个页面 home.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child:
            Text('我是首页', style: TextStyle(fontSize: 20.0, color: Colors.red)),
      ),
    );
  }
}