【移動(dòng)應(yīng)用開發(fā)技術(shù)】使用Flutter怎么實(shí)現(xiàn)底部導(dǎo)航欄效果

【移動(dòng)應(yīng)用開發(fā)技術(shù)】使用Flutter怎么實(shí)現(xiàn)底部導(dǎo)航欄效果

這篇文章將為大家詳細(xì)講解有關(guān)使用Flutter怎么實(shí)現(xiàn)底部導(dǎo)航欄效果，文章內(nèi)容質(zhì)量較高，因此在下分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。一.在main.dart文件中定義APP的基本信息class

MyApp

extends

StatelessWidget

{

//

This

widget

is

the

root

of

your

application.

@override

Widget

build(BuildContext

context)

{

return

new

MaterialApp(

title:

'Flutter

Demo',

theme:

new

ThemeData(

primarySwatch:

themeColor(),

),

home:

new

MyHomePage(title:

'Flutter

Demo

Home

Page'),

);

}

}其中主要代碼部分class

_MyHomePageState

extends

State<MyHomePage>

{

PageController

pageController;

int

page

=

0;

@override

Widget

build(BuildContext

context)

{

return

new

Scaffold(

backgroundColor:

Colors.grey,

body:

new

PageView(

children:

[

new

Index(),

new

Classify(),

new

Shopping(),

new

Myself()

],

controller:

pageController,

onPageChanged:

onPageChanged

),

bottomNavigationBar:

new

BottomNavigationBar(items:

[

new

BottomNavigationBarItem(

icon:

new

Icon(Icons.laptop_chromebook),

title:

new

Text("主頁(yè)"),

backgroundColor:

Colors.grey

),

new

BottomNavigationBarItem(

icon:

new

Icon(Icons.list),

title:

new

Text("分類"),backgroundColor:

Colors.grey),

new

BottomNavigationBarItem(

icon:

new

Icon(Icons.local_grocery_store),

title:

new

Text("購(gòu)物車")),

new

BottomNavigationBarItem(icon:

new

Icon(Icons.person),

title:

new

Text("我的"))

],

onTap:

onTap,

currentIndex:

page

),

);

}

@override

void

initState()

{

super.initState();

pageController

=

new

PageController(initialPage:

this.page);

}

void

onTap(int

index)

{

pageController.animateToPage(

index,

duration:

const

Duration(milliseconds:

300),

curve:

Curves.ease);

}

void

onPageChanged(int

page)

{

setState(()

{

this.page

=

page;

});

}

}其中，各個(gè)頁(yè)面的主要聲明底部導(dǎo)航欄的內(nèi)容填充二.其他四個(gè)頁(yè)面的主要代碼import

'package:flutter/material.dart';

class

Classify

extends

StatelessWidget

{

@override

Widget

build(BuildContext

context)

{

//

TODO:

implement

build

return

new

Scaffold(

body:

new

Center(

child:

new

T