Flutter底部導(dǎo)航欄的實(shí)現(xiàn)方式

2019-10-21 21:25:30

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

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

Flutter,底部,導(dǎo)航欄

程序主結(jié)構(gòu)如下：

Flutter,底部,導(dǎo)航欄

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個(gè)界面，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)建動(dò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))      ),     ]   ),  ); }}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。

注：相關(guān)教程知識(shí)閱讀請(qǐng)移步到Android開發(fā)頻道。

上一篇：Flutter實(shí)現(xiàn)底部菜單導(dǎo)航

下一篇：Android Java調(diào)用自己C++類庫的實(shí)例講解