Flutter-快速使用BottomNavigationBar(底部导航栏组件)
发布时间
阅读量:
阅读量
用于实现底部导航条的功能的是BottomNavigationBar组件,在使用时能够快速切换并浏览顶级视图。这一组件常见于许多App的主页设计中。
下面先来看看效果

实现流程主要包含三个阶段:
第一阶段.导入图片至项目并设置其存储位置
1.1

1.2这里注意前面必须加空格

第二步.自定义BottomNavigationBarItem
import 'package:flutter/material.dart';
//自定义底部导航栏itme
class NavigationIconView {
final BottomNavigationBarItem item;
//标题
final String title;
//图标
final String icon;
//选中图标路径
final String activedIconPath;
NavigationIconView(
{@required this.title,
@required this.icon,
@required this.activedIconPath})
: item = BottomNavigationBarItem(
//默认图标
icon: Image.asset(
icon,
width: 20,
height: 20,
),
//选中状态
activeIcon: Image.asset(
activedIconPath,
width: 22,
height: 22,
),
title: Text(title));
}
AI写代码
第三步.
import 'package:ejar/widgets/navigation_icon_view.dart';
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var _currentIndex = 0;
List<NavigationIconView> _navigationIconView;
List bottom_titles = ['首页', "分类", "消息", "购物车", "我的"];
List bottom_icons = [
'assets/images/home.png',
"assets/images/all.png",
"assets/images/message.png",
"assets/images/cart_empty.png",
"assets/images/my.png"
];
List bottom_select_icons = [
'assets/images/home_fill.png',
"assets/images/all_fill.png",
"assets/images/message_fill.png",
"assets/images/cart_empty_fill.png",
"assets/images/my_fill.png"
];
// TODO: 初始化
@override
void initState() {
super.initState();
_navigationIconView = [
for (var i = _currentIndex; i < bottom_titles.length; i++)
NavigationIconView(
title: bottom_titles[i],
icon: bottom_icons[i],
activedIconPath: bottom_select_icons[i])
];
}
@override
Widget build(BuildContext context) {
return Scaffold(
//顶部应用按钮
appBar: AppBar(
title: Text("艺家"),
),
body: Center(
child: Container(
child: Text(bottom_titles[_currentIndex]),
),
),
bottomNavigationBar: BottomNavigationBar(
//设置默认选中第一个图标
currentIndex: _currentIndex,
items: _navigationIconView.map((view) => view.item).toList(),
type: BottomNavigationBarType.fixed,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
AI写代码
下面是BottomNavigationBar常见属性表

全部评论 (0)
还没有任何评论哟~
