【移动应用开发技术】使用Flutter怎么实现底部导航栏效果

【移动应用开发技术】使用Flutter怎么实现底部导航栏效果

这篇文章将为大家详细讲解有关使用Flutter怎么实现底部导航栏效果，文章内容质量较高，因此在下分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。一.在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("主页"),

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("购物车")),

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;

});

}

}其中，各个页面的主要声明底部导航栏的内容填充二.其他四个页面的主要代码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