使用Flutter怎么實現底部導航欄

這期內容當中小編將會給大家帶來有關使用Flutter怎么實現底部導航欄，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

程序主結構如下：

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.創建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('這是聯系人'),
   ),
  );
 }
}

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('這是發現'),
   ),
  );
 }
}

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.創建動態組件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('聯系',style: TextStyle(color: Colors.blue))
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.find_in_page,color: Colors.blue,),
        title: Text('發現',style: TextStyle(color: Colors.blue))
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.menu,color: Colors.blue,),
        title: Text('我的',style: TextStyle(color: Colors.blue))
      ),

     ]
   ),
  );
 }
}

上述就是小編為大家分享的使用Flutter怎么實現底部導航欄了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。