)
其中items是一个List<BottomNavigationBarItem>对象，currentIndex表示当前选中的Tab的索引值，onTap是TabItem点击事件，上面的代码中，getBottomNavItems()方法代码如下：
List getBottomNavItems() {
List list = new List();
for (int i = 0; i < 4; i++) {
list.add(new BottomNavigationBarIt 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》开源 em(
icon: getTabIcon(i),
title: getTabTitle(i)
));
}
return list;
}
// 根据索引值确定Tab是选中状态的样式还是非选中状态的样式
TextStyle getTabTextStyle(int curIndex) {
if (curIndex == _tabIndex) {
return tabTextStyleSelected;
}
return tabTextStyleNormal;
}
// 根据索引值确定TabItem的icon是选中还是非选中
Image getTabIcon(int curIndex) {
if (curIndex == _tabIndex) {
return tabImages[curIndex][1];
}
return tabImages[curIndex][0];
}
// 根据索引值返回页面顶部标题
Text getTabTitle(int curIndex) {
return new Text(
appBarTitles[curIndex],
style: getTabTextStyle(curIndex)
);
}
由于TabItem是由一个图标和一个文本组件构成，所以这里还需要在MyOSCClientState类中定义两个变量tabImages和appBarTitles。tabImages是一个二维数组，表示TabItem中的图标（包括选中和未选中状态的图标），appBarTitles是一个字符串数组，表示每个TabItem对应的页面标题，这两个变量的赋值代码如下：
// 页面底部TabItem上的图标数组
var tabImages;
// 页面顶部的大标题（也是TabItem上的文本）
var appBarTitles = [‘资讯’, ‘动弹’, ‘发现’, ‘我的’];
// 数据初始化，包括TabIcon数据和页面内容数据
void initData() {
if (tabImages == null) {
tabImages = [
[
getTabImage(‘images/ic_nav_news_normal.png’),
getTabImage(‘images/ic_nav_news_actived.png’)
],
[
getTabImage(‘images/ic_nav_tweet_normal.png’),
getTabImage(‘images/ic_nav_tweet_actived.png’)
],
[
getTabImage(‘images/ic_nav_discover_normal.png’),
getTabImage(‘images/ic_nav_discover_actived.png’)
],
[
getTabImage(‘images/ic_nav_my_normal.png’),
getTabImage(‘images/ic_nav_my_pressed.png’)
]
];
}
}
// 传入图片路径，返回一个Image组件
Image getTabImage(path) {
return new Image.asset(path, width: 20.0, height: 20.0);
}
上面的代码中需要注意的是Image组件，要使用image/目录下的图片，必须确保项目根目录下的pubspec.yaml文件中已经添加了图片的路径，如下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OsBpLmGs-1650173651816)(https://user-gold-cdn.xitu.io/2018/7/26/164d45e1526d263b?imageView2/0/w/1280/h/960/ignore-error/1)]
如果没有上面的assets配置，直接加载图片是会报错的。
为了达到点击Tab切换不同的页面的功能，我们需要给CupertinoTabBar组件的onTap参数配置一个方法，该方法有一个index参数，我们将这个index赋值给前面定义的_tabIndex即可，并将这个赋值操作放到setState中执行，如下代码：
onTap: (index) {
// 底部TabItem的点击事件处理，点击时改变当前选择的Tab的索引值，则页面会自动刷新
setState((){
_tabIndex = index;
});
},
最后放上MyOSCClientState类的build方法代码：
@override
Widget build(BuildContext context) {
initData();
return new MaterialApp(
theme: new ThemeData(
// 设置页面的主题色
primaryColor: const Color(0xFF63CA6C)
),
home: new Scaffold(
appBar: new AppBar(
// 设置AppBar标题
title: new Text(appBarTitles[_tabIndex],
// 设置AppBar上文本的样式
style: new TextStyle(color: Colors.white)),
// 设置AppBar上图标的样式
iconTheme: new IconThemeData(color: Colors.white)
),
body: _body,
// bottomNavigationBar属性为页面底部添加导航的Tab，CupertinoTabBar是Flutter提供的一个iOS风格的底部导航栏组件
bottomNavigationBar: new CupertinoTabBar(
items: getBottomNavItems(),
currentIndex: _tabIndex,
onTap: (index) {
// 底部TabItem的点击事件处理，点击时改变当前选择的Tab的索引值，则页面会自动刷新
setState((){
_tabIndex = index;
});
},
)
),
);
}
在上面的代码中，body属性是_body变量，而_body变量是个IndexedStack对象，IndexedStack对象的index值是_tabIndex，所以当我们在setState中改变了_tabIndex后，IndexedStack就会自动切换显示子组件了，也就达到了切换页面的目的。
上面的代码运行在模拟器中如下图所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RPLPyOl0-1650173651817)(https://user-gold-cdn.xitu.io/2018/7/26/164d56155bbf6a81?imageView2/0/w/1280/h/960/ignore-error/1)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p9gchdPX-1650173651817)(https://user-gold-cdn.xitu.io/2018/7/26/164d56174bb9374a?imageView2/0/w/1280/h/960/ignore-error/1)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-waeCWhO5-1650173651817)(https://user-gold-cdn.xitu.io/2018/7/26/164d561c73274934?imageView2/0/w/1280/h/960/ignore-error/1)]
给首页加上侧滑菜单
侧滑菜单在Flutter中已有相关组件，所以为首页加上侧滑菜单的方法很简单：给Scaffold组件传个drawer参数即可，代码如下：
new Scaffold(
appBar: new AppBar(
// 设置AppBar标题
title: new Text(appBarTitles[_tabIndex],
// 设置AppBar上文本的样式
style: new TextStyle(color: Colors.white)),
// 设置AppBar上图标的样式
iconTheme: new IconThemeData(color: Colors.white)
),
body: _body,
// bottomNavigationBar属性为页面底部添加导航的Tab，CupertinoTabBar是Flutter提供的一个iOS风格的底部导航栏组件
bottomNavigationBar: new CupertinoTabBar(
items: getBottomNavItems(),
currentIndex: _tabIndex,
onTap: (index) {
// 底部TabItem的点击事件处理，点击时改变当前选择的Tab的索引值，则页面会自动刷新
setState((){
_tabIndex = index;
});
},
),
// drawer属性用于为当前页面添加一个侧滑菜单
drawer: new Drawer(
child: new Center(
child: new Text(“this is a drawer”)
),
),
)
有了drawer之后的app运行效果如下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3dUenSsi-1650173651818)(https://user-gold-cdn.xitu.io/2018/7/26/164d5656eb8c6886?imageView2/0/w/1280/h/960/ignore-error/1)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KZV1gMFm-1650173651818)(https://user-gold-cdn.xitu.io/2018/7/26/164d56587f9c3bba?imageView2/0/w/1280/h/960/ignore-error/1)]
实现页面跳转逻辑
在Flutter中实现页面的跳转非常简单，使用Navigator的相关API即可，下面我们改造一下NewsListPage页面，在页面中间加入一个按钮，点击按钮跳转到详情页。
首先我们在pages/目录下新建一个NewsDetailPage代表资讯详情页，并添加如下代码：
import ‘package:flutter/material.dart’;
class NewsDetailPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(“资讯详情”, style: new TextStyle(color: Colors.white)),
iconTheme: new IconThemeData(color: Colors.white)
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Text(“News Detail Page.”),
new RaisedButton(
child: new Text(“Back”),
onPressed: () {
Navigator.of(context).pop();
},
)
],
)
),
);
}
}
上面的代码中有如下几点需要注意：
- 在
build方法中我们返回的是一个Scaffold组件，而不是像main.dart中那样返回一个MaterialApp组件，这是因为我们在使用Navigator从资讯列表页跳转 Android开源项目《ali1024.coding.net/public/P7/Android/git》 到详情页时，会自动为详情页的AppBar左边添加返回按钮，如果你在详情页还是使用MaterialApp对象，则页面左上角不会自动添加返回按钮。
最后
在这里小编整理了一份Android大厂常见面试题，和一些Android架构视频解析，都已整理成文档，全部都已打包好了，希望能够对大家有所帮助，在面试中能顺利通过。
动添加返回按钮。
最后
在这里小编整理了一份Android大厂常见面试题，和一些Android架构视频解析，都已整理成文档，全部都已打包好了，希望能够对大家有所帮助，在面试中能顺利通过。
[外链图片转存中…(img-3xmQliOa-1650173651819)]
[外链图片转存中…(img-GR2xp3Vf-1650173651819)]
