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 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(
        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 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(
                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
        ),
      ),
    );
  }
}