Flutter底部導航欄的實現(xiàn)方式

更新時間：2019年02月13日 14:23:51 作者：codekxx

這篇文章主要為大家詳細介紹了Flutter底部導航欄的實現(xiàn)方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Flutter底部導航欄的實現(xiàn)代碼，供大家參考，具體內容如下

老規(guī)格，先看圖：

程序主結構如下：

在這里插入圖片描述

1.在程序主入口文件main.dart添加如下代碼

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Flutter Demo',
   theme: ThemeData.light(),
   home: BottomNavigationWidget(),
  );
 }
}

2.創(chuàng)建4個界面，home_page.dart、constant_page.dart、find_page.dart、my_page.dart

home_page.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: Text('HomePage'),),
   body: Center(
    child: Text('這是首頁'),
   ),
  );
 }
}

constant_page.dart

import 'package:flutter/material.dart';

class ConstantPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: Text('ConstantPage'),),
   body: Center(
    child: Text('這是聯(lián)系人'),
   ),
  );
 }
}

find_page.dart

import 'package:flutter/material.dart';

class FindPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: Text('FindPage'),),
   body: Center(
    child: Text('這是發(fā)現(xiàn)'),
   ),
  );
 }
}

my_page.dart

import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: Text('MyPage'),),
   body: Center(
    child: Text('這是我的'),
   ),
  );
 }
}

3.創(chuàng)建動態(tài)組件BottomNavigationWidget，新建bottom_navigation.dart

import 'package:flutter/material.dart';
import 'pages/home_page.dart';
import 'pages/constant_page.dart';
import 'pages/find_page.dart';
import 'pages/my_page.dart';

class BottomNavigationWidget extends StatefulWidget {

 @override
 _BottomNavigationWidgetState createState() => new _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
 final List<Widget> list = List();
 int _currentIndex = 0;
 @override
 void initState() {
  list
   ..add(HomePage())
   ..add(ConstantPage())
   ..add(FindPage())
   ..add(MyPage());
  super.initState();
 }

 @override
 Widget build(BuildContext context) {
  return Scaffold(
   body: list[_currentIndex],
   bottomNavigationBar: BottomNavigationBar(
    currentIndex: _currentIndex,
     onTap: (int index){
      setState(() {
       _currentIndex = index;
      });
     },
     type: BottomNavigationBarType.fixed,
     items: [
      BottomNavigationBarItem(
       icon: Icon(Icons.home,color: Colors.blue,),
       title: Text('首頁',style: TextStyle(color: Colors.blue))
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.contacts,color: Colors.blue,),
        title: Text('聯(lián)系',style: TextStyle(color: Colors.blue))
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.find_in_page,color: Colors.blue,),
        title: Text('發(fā)現(xiàn)',style: TextStyle(color: Colors.blue))
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.menu,color: Colors.blue,),
        title: Text('我的',style: TextStyle(color: Colors.blue))
      ),

     ]
   ),
  );
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: