有没有自定义BottomNavigationBar
高度的方法?
我目前有一个BottomNavigationBar
与标签点击/滑动导航,但默认高度(即使在减少文本和图标)太高。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text( 'RefLog', style: Styles.headerLarge ),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.list),
onPressed: () {},
)
],
),
body: DefaultTabController(
length: 3,
child: Scaffold(
body: TabBarView(
children: _children,
),
bottomNavigationBar: TabBar(
tabs: [
Tab( text: 'One', icon: Icon(Icons.import_contacts, size: 20.0) ),
Tab( text: 'Two', icon: Icon(Icons.restaurant, size: 20.0) ),
Tab( text: 'Three', icon: Icon(Icons.record_voice_over, size: 20.0) ),
],
labelStyle: TextStyle(fontSize: 12.0),
labelColor: Colors.white,
unselectedLabelColor: Colors.white30,
indicatorSize: TabBarIndicatorSize.label,
indicatorColor: Colors.white,
),
backgroundColor: Colors.blue,
),
),
);
}
7条答案
按热度按时间kkih6yb81#
你可以用SizedBox Package bottomNavigationBar,
4sup72z82#
我遇到了同样的问题,
BottomNavigationBar
的高度不能被覆盖,我的解决方案是使用**SizedBox
**调整图标大小,它确实降低了高度,其他最终解决方案是更新标题属性的字体大小,这是我的例子:我的
BottomNavigationBar
在两个平台上都有一个大小标准。xuo3flqw3#
我设置了
BottomNavigationBar( selectedFontSize: 0.0, unselectedFontSize: 0.0)
。然后我用SizedBox( height: 50)
Package 了BottomNavigationBar
小部件。它对我有用。希望它对你们也有用...🙂jum4pzuy4#
您可以创建自己的小部件
kiayqfof5#
有没有办法自定义BottomNavigationBar的高度?
不想
为什么?
因为那个小部件的开发者没有给予我们任何控制来玩它。
但我怎样才能做到呢?
Read this article
另外,如果你准备了自定义的
BottomNavBar
,你必须自己处理监听器,这不仅仅是用IconButtons
的Row
创建一个Container
。[更新]我说的“不”是指BottomNavigationBar class
可以有变通办法,如公认答案中所述。
4sup72z86#
使用selectedfontsize和unselectedfontsize属性,我把我的两个属性都设置为1.0,它似乎减少了导航栏顶部和底部的额外填充,从而降低了导航栏的高度
底部导航栏(图标大小:kIconSize20,selectedFontSize:1.0,unselectedFontSize:1.0,...
llew8vvj7#
Flutter 3.7.8
记住有两个底部导航栏:材料&库比蒂诺。
对于库比蒂诺,只需使用height属性
示例
对于材质底部导航条高度:这就是它的计算方式:
底部导航栏的高度。
但如果使用底部的SafeArea,则不会为0。
例如,使用SizedBox Package 它