一文搞定Flutter所有类型导航栏设计
Posted 小天梦语
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一文搞定Flutter所有类型导航栏设计相关的知识，希望对你有一定的参考价值。
1
const Scaffold({
Key key,
this.appBar, // 应用栏，显示在顶部，包括其中的搜索框
this.body, // 页面的主题显示内容
this.floatingActionButton, // 设置显示在上层区域的按钮，默认位置位于右下角
this.floatingActionButtonLocation, // 设置floatingActionButton的位置
this.floatingActionButtonAnimator, // floatingActionButton动画
this.persistentFooterButtons, // 在底部导航栏之上的一组操作按钮
this.drawer, // 左侧导航栏
this.endDrawer, // 右侧导航栏
this.bottomNavigationBar, // 底部导航栏
this.bottomSheet, // 底部可隐藏导航栏
this.backgroundColor, // 内容区域颜色
this.resizeToAvoidBottomPadding, // 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。
this.resizeToAvoidBottomInset, //键盘弹出时是否重新绘制，以避免输入框被遮挡
this.primary = true, // 是否计算手机顶部状态栏的高度
this.drawerDragStartBehavior = DragStartBehavior.start, // 拖动的处理
this.extendBody = false, // 是否延伸body至底部
this.extendBodyBehindAppBar = false, // 是否延伸body至顶部
this.drawerScrimColor, // 抽屉遮罩层背景色
this.drawerEdgeDragWidth, // 滑动拉出抽屉的生效距离
this.drawerEnableOpenDragGesture = true, // 确定是否可以通过拖动手势打开Scaffold.drawer, 默认情况下，拖动手势处于启用状态
this.endDrawerEnableOpenDragGesture = true, // 确定是否可以使用拖动手势打开Scaffold.endDrawer，默认情况下，拖动手势处于启用状态。
})
2
BottomNavigationBar({
Key key,
@required this.items, // 数组，对应于BottomNavigationBarItem这个组件为菜单栏的每一项，其中包含四个属性icon、title、activeIcon和backgroundColor
this.onTap, // 点击触发逻辑，一般用来触发页面的跳转更新
this.currentIndex = 0, // 当前所在的 items 数组中的位置
this.elevation = 8.0, // 设置阴影效果值
BottomNavigationBarType type, // fixed(固定位置)和shifting(浮动效果)
Color fixedColor, // 代表选中时候的颜色，不能和selectedItemColor一起使用
this.backgroundColor, // 背景颜色
this.iconSize = 24.0, // icon 大小
Color selectedItemColor, // 代表选中的颜色，不能和selectedItemColor一起使用
this.unselectedItemColor, // 未选中时颜色
this.selectedIconTheme = const IconThemeData(), // 当前选中的BottomNavigationBarItem.icon中图标的大小，不透明度和颜色
this.unselectedIconTheme = const IconThemeData(), // 当前未选中的BottomNavigationBarItem.icon中图标的大小，不透明度和颜色
this.selectedFontSize = 14.0, // 选中的字体大小
this.unselectedFontSize = 12.0, // 未选中字体大小
this.selectedLabelStyle, // 选中字体样式
this.unselectedLabelStyle, // 未选中字体样式
this.showSelectedLabels = true, // 是否开启选中的样式
bool showUnselectedLabels, // 是否开启未选中的样式
})
return Scaffold(
appBar: AppBar(
title: Text('MORTAL'), // 页面名字
),
body: Stack(
children: <Widget>[
_getPagesWidget(0),
_getPagesWidget(1),
_getPagesWidget(2)
],
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.people),
title: Text('首页'),
activeIcon: Icon(Icons.people_outline),
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text('发现'),
activeIcon: Icon(Icons.favorite_border),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('我'),
activeIcon: Icon(Icons.person_outline),
),
],
iconSize: 24,
currentIndex: _indexNum,
/// 选中后，底部BottomNavigationBar内容的颜色(选中时，默认为主题色)
/// （仅当type: BottomNavigationBarType.fixed,时生效）
fixedColor: Colors.lightBlueAccent,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
///这里根据点击的index来显示，非index的page均隐藏
if(_indexNum != index){
setState(() {
_indexNum = index;
});
}
},
),
);
/// 获取页面组件
Widget _getPagesWidget(int index) {
List<Widget> widgetList = [
router.getPageByRouter('homepage'),
Icon(Icons.directions_transit),
router.getPageByRouter('userpage')
];
return Offstage(
offstage: _indexNum != index,
child: TickerMode(
enabled: _indexNum == index,
child: widgetList[index],
),
);
}
3
return Scaffold(
appBar: AppBar(
title: Text('MORTAL'), // 页面名字
bottom: TabBar(
controller: _controller,
tabs: <Widget>[
Tab(
icon: Icon(Icons.view_list),
text: '首页',
),
Tab(
icon: Icon(Icons.favorite),
text: '发现',
),
Tab(
icon: Icon(Icons.person),
text: '我',
),
],
),
),
body: TabBarView(
controller: _controller,
children: [
router.getPageByRouter('homepage'),
Icon(Icons.directions_transit),
router.getPageByRouter('userpage')
],
),
);
/// 跳转页面
void redirect(String link) {
if (link == null) {
return;
}
int indexNum = router.open(context, link);
if (indexNum > -1 && _controller.index != indexNum) {
_controller.animateTo(indexNum);
}
}
4
import 'package:flutter/material.dart';
import 'package:MORTAL/router.dart';
/// 左侧菜单
class MenuDraw extends StatelessWidget {
/// 外部跳转
final Function redirect;
/// 默认构造函数
const MenuDraw(this.redirect);
@override
Widget build(BuildContext context) {
return Drawer(
child: MediaQuery.removePadding(
context: context,
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.view_list),
title: Text('首页'),
onTap: () {
Navigator.pop(context);
redirect('tyfapp://homepage');
},
),
ListTile(
leading: Icon(Icons.favorite),
title: Text('发现'),
onTap: () {
Navigator.pop(context);
Router().open(context, 'http://www.baidu.com');
},
),
ListTile(
leading: Icon(Icons.person),
title: Text('我'),
onTap: () {
Navigator.pop(context);
redirect('tyfapp://mypage');
},
),
],
),
),
);
}
}
return Scaffold(
appBar: AppBar(
title: Text('MORTAL App'), // 页面名字
),
drawer: MenuDraw(redirect),
...
);
5
AppBar(
title: Text('MORTAL'), // 页面名字
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
showSearch(
context: context,
delegate: SearchPageCustomDelegate()
);
},
),
],
)
import 'package:flutter/material.dart';
/// 搜索框
class SearchPageDelegate extends SearchDelegate {
@override
List<Widget> buildActions(BuildContext context) {
}
@override
Widget buildLeading(BuildContext context) {
}
@override
Widget buildResults(BuildContext context) {
}
@override
Widget buildSuggestions(BuildContext context) {
}
}
return [
IconButton(
tooltip: 'Clear',
icon: const Icon(Icons.clear),
onPressed: () {
query = '';
showSuggestions(context);
},
)
];
@override
Widget buildLeading(BuildContext context) {
return IconButton(
tooltip: 'Back',
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: transitionAnimation,
),
onPressed: () {
close(context, null);
},
);
}
/// 修改提示框内容
String get searchFieldLabel => '用户、帖子';
@override
ThemeData appBarTheme(BuildContext context) {
final ThemeData theme = Theme.of(context);
return theme.copyWith(
inputDecorationTheme: InputDecorationTheme(),
primaryColor: theme.primaryColor,
primaryIconTheme: theme.primaryIconTheme,
primaryColorBrightness: theme.primaryColorBrightness,
primaryTextTheme: theme.primaryTextTheme
);
}
End
以上是关于一文搞定Flutter所有类型导航栏设计的主要内容，如果未能解决你的问题，请参考以下文章