本博客将介绍使用 flutter 来构建一个基本的底部导航效果。
项目下载路径:
lib 目录:
源代码
///main.dart
import 'package:flutter/material.dart';
import './pages/index_page.dart';
///能套一个方便的组件的话,就套一个,方便以后修改
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: IndexPage(),
);
}
}
///cart_page.dart
import 'package:flutter/material.dart';
class CartPage extends StatelessWidget {
const CartPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(body: Text('购物车页面'),);
}
}
///catogery_page.dart
import 'package:flutter/material.dart';
class CategoryPage extends StatelessWidget {
const CategoryPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(body: Text('分类页面'),);
}
}
///home_page.dart
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(body: Text('首页页面'),);
}
}
///index_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_shop/pages/cart_page.dart';
import 'package:flutter_shop/pages/category_page.dart';
import 'package:flutter_shop/pages/home_page.dart';
import 'package:flutter_shop/pages/member_page.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('会员中心'),
),
];
final List tabBodies = [
HomePage(),
CategoryPage(),
CartPage(),
MemberPage()
];
int currentIndex = 0;
var currentPage;
@override
void initState() {
super.initState();
currentPage = tabBodies[currentIndex];
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(244, 255, 255, 1.0),
appBar: AppBar(title:Text('百姓')),
body: currentPage,
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: currentIndex,
items: bottomtabs,
onTap: (index){
setState(() {
currentIndex = index;
currentPage = tabBodies[currentIndex];
});
},
),
);
}
}
///member_page.dart
import 'package:flutter/material.dart';
class MemberPage extends StatelessWidget {
const MemberPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(body: Text('会员中心页面'),);
}
}
简要的分析
- main.dart是入口;index_page.dart放置底部导航,可以说是主体部分;其它几个部分则是要转入的页面。(flutter 基本的页面布局在这里,不再赘述)
- 最为重要的部分就是 底部导航。实现该功能是通过 Scaffold 组件的 bottomNavigationBar 属性。
- BottomNavigationBar 组件构造器:
BottomNavigationBar({
Key key,
@required this.items, ///底部导航的元素组成,由 List<BottomNavigationBarItem> 组成
this.onTap, ///点击某一个图标后,产生的动作
this.currentIndex = 0, ///底部导航的索引
this.elevation = 8.0, ///这个 [BottomNavigationBar] 的z坐标,如果为空,默认值为' 8.0 '
BottomNavigationBarType type, ///定义 [BottomNavigationBar] 的布局和行为,
Color fixedColor, ///[selectedItemColor]的值。此getter仅用于向后兼容,首选[selectedItemColor]属性。
this.backgroundColor, ///如果 [type] 是 [BottomNavigationBarType.shifting] 和[ items] 有[BottomNavigationBarItem.backgroundColor] 的设置,[item]的背景颜色会引起和覆盖这种颜色
this.iconSize = 24.0, ///设置图标大小
Color selectedItemColor, ///为被选择的 [BottomNavigationBarItem.icon] 和 [BottomNavigationBarItem.label] 设置颜色,如果为空,[ThemeData.primaryColor] 被使用
this.unselectedItemColor,/ //未被选择的 [BottomNavigationBarItem.icon] 和 [BottomNavigationBarItem.label] 设置颜色,如果为空,[TextTheme.caption] 被使用
this.selectedIconTheme = const IconThemeData(),
this.unselectedIconTheme = const IconThemeData(),
this.selectedFontSize = 14.0,
this.unselectedFontSize = 12.0,
this.selectedLabelStyle,
this.unselectedLabelStyle,
this.showSelectedLabels = true,
bool showUnselectedLabels,
})
- 了解完构造器,再回去看 index_page.dart 应该明朗很多。onTap 是点击是触发的事件(动作);这里是实现底部导航的自由切换
5.BottomNavigationBar 常用的属性有
items
type
currentIndex
onTap