在Flutter里是有两种内置风格的:
并非选择了一种风格,就要一直使用这种风格,事实是你可以一起使用,兼顾两个风格的特点。
我们在 index_page.dart 页面同时使用两种风格 UI ,只需要在头部分引入了 cupertino.dart、material.dart。注意这两个引入是不分先后顺序的。
index_page.dart 文件:
import ‘package:flutter/cupertino.dart‘;
import ‘package:flutter/material.dart‘;
上篇文章为了测试入口文件,我们在 index_page.dart 文件里使用了静态组件(也就是继承了StatelessWidget)。
正常情况下,底部导航栏是要根据用户操作不断变化的,所以我们改用动态组件(StatefulWidget)。
修改后的代码如下:
import ‘package:flutter/material.dart‘;
import ‘package:flutter/cupertino.dart‘;
class IndexPage extends StatefulWidget {
@override
_IndexPageState createState() => _IndexPageState();
}
class _IndexPageState extends State<IndexPage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("百姓生活+"),),
body: new Center(
child: Text("我是居中的文本内容"),
),
);
}
}
改编后的界面效果并未发生改变,不截图了。
有了动态组件,接下来可以在State部分先声明一个List变量,变量名称为boottomTabs,变量的属性为BottomNavigationBarItem。
其实这个List变量就定义了底部导航的文字和使用的图标。
代码如下:
final List<BottomNavigationBarItem> bottomTabs = [
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.home),
title:Text(‘首页‘)
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.search),
title:Text(‘分类‘)
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.shopping_cart),
title:Text(‘购物车‘)
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.profile_circled),
title:Text(‘会员中心‘)
),
];
底栏的数据有了,怎么使用呢?
修改后的 index_page.dart 文件:
import ‘package:flutter/material.dart‘;
import ‘package:flutter/cupertino.dart‘;
class IndexPage extends StatefulWidget {
@override
_IndexPageState createState() => _IndexPageState();
}
class _IndexPageState extends State<IndexPage> {
final List<BottomNavigationBarItem> bottomTabs = [
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.home),
title:Text(‘首页‘)
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.search),
title:Text(‘分类‘)
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.shopping_cart),
title:Text(‘购物车‘)
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.profile_circled),
title:Text(‘会员中心‘)
),
];
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("百姓生活+"),),
body: new Center(
child: Text("我是居中的文本内容"),
),
bottomNavigationBar: BottomNavigationBar(
type:BottomNavigationBarType.fixed,
currentIndex: 0,
items:bottomTabs,
onTap: (index){
},
),
);
}
}
效果图:
下篇将打通4非底部导航栏,关于界面切换以及底栏的实现可参考之前写的一篇文章:
Flutter实 ViewPager、bottomNavigationBar界面切换