Flutter（一）：用BottomNavigationBar实现底部导航栏架构
发布时间
阅读量：
阅读量
效果图（左ios右Android）：
涉及的主要文件包括main.dart负责程序启动以及四个辅助功能模块： MainPage.dart主要用于显示主界面（类似于Android中的MainActivity），HomePge.dart用于显示首页, FindPage TFT用于展示发现页面, MinePge dart则用于呈现我的页面
首先看Main.dart代码：
import 'package:flutter/material.dart';
import 'package:flutter_app/MainPage.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: MainPage(),//启动MainPage
);
}
}
AI写代码MainPage.dart代码：
import 'package:flutter/material.dart';
import 'package:flutter_app/FindPage.dart';
import 'package:flutter_app/HomePage.dart';
import 'package:flutter_app/MinePage.dart';
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false, home: new MainPageWidget());
}
}
class MainPageWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new MainPageState();
}
}
class MainPageState extends State<MainPageWidget> {
int _tabIndex = 0;
var tabImages;
var appBarTitles = ['首页', '发现', '我的'];
/* * 存放三个页面，跟fragmentList一样
*/
var _pageList;
/* * 根据选择获得对应的normal或是press的icon
*/
Image getTabIcon(int curIndex) {
if (curIndex == _tabIndex) {
return tabImages[curIndex][1];
}
return tabImages[curIndex][0];
}
/* * 获取bottomTab的颜色和文字
*/
Text getTabTitle(int curIndex) {
if (curIndex == _tabIndex) {
return new Text(appBarTitles[curIndex],
style: new TextStyle(fontSize: 14.0, color: const Color(0xff1296db)));
} else {
return new Text(appBarTitles[curIndex],
style: new TextStyle(fontSize: 14.0, color: const Color(0xff515151)));
}
}
/* * 根据image路径获取图片
*/
Image getTabImage(path) {
return new Image.asset(path, width: 24.0, height: 24.0);
}
void initData() {
/* * 初始化选中和未选中的icon
*/
tabImages = [
[getTabImage('images/home.png'), getTabImage('images/home_selected.png')],
[getTabImage('images/find.png'), getTabImage('images/find_selected.png')],
[getTabImage('images/mine.png'), getTabImage('images/mine_selected.png')]
];
/* * 三个子界面
*/
_pageList = [
new HomePage(),
new FindPage(),
new MinePage(),
];
}
@override
Widget build(BuildContext context) {
//初始化数据
initData();
return Scaffold(
body: _pageList[_tabIndex],
bottomNavigationBar: new BottomNavigationBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: getTabIcon(0), title: getTabTitle(0)),
new BottomNavigationBarItem(
icon: getTabIcon(1), title: getTabTitle(1)),
new BottomNavigationBarItem(
icon: getTabIcon(2), title: getTabTitle(2)),
],
type: BottomNavigationBarType.fixed,
//默认选中首页
currentIndex: _tabIndex,
iconSize: 24.0,
//点击事件
onTap: (index) {
setState(() {
_tabIndex = index;
});
},
));
}
}
AI写代码项目所需资源文件，我在项目目录下新建一个images文件夹
然后所有资源必须得在pubspec.yaml（项目根目录下）文件里声明（如下图）
以下代码是三个子界面中的首页（HomePage.dart）：
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new Page();
}
}
class Page extends State<HomePage> {
@override
Widget build(BuildContext context) {
return layout(context);
}
Widget layout(BuildContext context) {
return new Scaffold(
appBar: buildAppBar(context),
body: new ListView(
children: <Widget>[
header(context),
header(context),
header(context),
header(context),
header(context),
],
),
);
}
Widget buildAppBar(BuildContext context) {
return new AppBar(title: const Text('首页'));
}
Widget header(BuildContext context) {
return new Image.network(
'http://i2.yeyou.itc.cn/2014/huoying/hd_20140925/hyimage06.jpg',
);
}
}
AI写代码其实详细说明一下吧，在开发这个导航栏的功能时与Android的做法不谋而合。我们采用将界面存储在 __pageList 的方式进行处理，并用于存储 _tabImages 文件夹内的图标。文字部分则存放在 appBarTitles 变量中。为了实现这一功能我们借助了 Scaffold 组件中的 bottomNavigationBar 控件，并通过定义点击事件的方法 onTap: (index)\{\} 来更新 tabIndex 变量之后再设置整个 Scaffold 组件的body布局以完成页面切换的操作。
全部评论 (0)
还没有任何评论哟~