Flutter組件學習（21）實現app首頁

Step 1：新建工程，添加導航欄

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return AppWidget();
  }
}
class AppWidget extends State{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text(
            '首頁',
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
            ),
          ),
        ),
      ),
    );
  }
}

 Step 2：添加懸浮按鈕FloatingActionButton

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
  backgroundColor: Colors.blue,
),

 Step 3：添加底部導航BottomNavigationBar

items	BottomNavigationBarItem類型的List    底部導航欄的顯示項
onTap	ValueChanged < int >    點擊導航欄子項時的回調
currentIndex	當前顯示項的下標
fixedColor	底部導航欄type爲fixed時導航欄的顏色，如果爲空的話默認使用ThemeData.primaryColor
iconSize	BottomNavigationBarItem icon的大小
type	有fixed和shifting兩個類型，顯示效果不一樣 BottomNavigationBarType.shifting BottomNavigationBarType.fixed

bottomNavigationBar: BottomNavigationBar(
  fixedColor: Colors.blue,
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon:Icon(Icons.home,color: Colors.black,),
      title: Text('首頁',style: TextStyle(color: Colors.black),)
    ),

    BottomNavigationBarItem(
        icon:Icon(Icons.search,color: Colors.black,),
        title: Text('探索',style: TextStyle(color: Colors.black),)
    ),

    BottomNavigationBarItem(
        icon:Icon(Icons.message,color: Colors.black,),
        title: Text('消息',style: TextStyle(color: Colors.black),)
    ),

    BottomNavigationBarItem(
        icon:Icon(Icons.people,color: Colors.black,),
        title: Text('個人中心',style: TextStyle(color: Colors.black),)
    ),
  ],
)

Step4：創建4個Tab頁

 

class TabOne extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Center(
      child: Text(
        '首頁',
        style: TextStyle(
          fontSize: 40,
          color: Colors.blue
        ),
      ),
    );
  }
}

全部代碼

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return AppWidget();
  }
}

class AppWidget extends State{

  var pages = [TabOne(),TabTwo(),TabThree(),TabFour()];

  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text(
            '首頁',
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          backgroundColor: Colors.blue,
        ),

        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.blue,
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon:Icon(Icons.home,color: Colors.black,),
              title: Text('首頁',style: TextStyle(color: Colors.black),)
            ),

            BottomNavigationBarItem(
                icon:Icon(Icons.search,color: Colors.black,),
                title: Text('探索',style: TextStyle(color: Colors.black),)
            ),

            BottomNavigationBarItem(
                icon:Icon(Icons.message,color: Colors.black,),
                title: Text('消息',style: TextStyle(color: Colors.black),)
            ),

            BottomNavigationBarItem(
                icon:Icon(Icons.people,color: Colors.black,),
                title: Text('個人中心',style: TextStyle(color: Colors.black),)
            ),
          ],
        ),

        body: pages[_selectedIndex],
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

}

class TabOne extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Center(
      child: Text(
        '首頁',
        style: TextStyle(
          fontSize: 40,
          color: Colors.blue
        ),
      ),
    );
  }
}

class TabTwo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Center(
      child: Text(
        '探索',
        style: TextStyle(
            fontSize: 40,
            color: Colors.blue
        ),
      ),
    );
  }
}

class TabThree extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Center(
      child: Text(
        '消息',
        style: TextStyle(
            fontSize: 40,
            color: Colors.blue
        ),
      ),
    );
  }
}

class TabFour extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Center(
      child: Text(
        '我的',
        style: TextStyle(
            fontSize: 40,
            color: Colors.blue
        ),
      ),
    );
  }
}