logo标签列表

Flutter/Dart: 自定义底部导航栏高度

flutterdart
30

有没有办法自定义 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,
    ),
  ),
 );
}
2
看起来高度是硬编码的。https://github.com/flutter/flutter/blob/e6d216cca85428b6f105b1a66409c190a7e4619a/packages/flutter/lib/src/material/tabs.dart#L23 - Jordan Davies
7个回答
74

你可以使用SizedBox包装bottomNavigationBar，

bottomNavigationBar: SizedBox(height: 58, child: //some widget )
如果58英寸的高度对于小设备来说太大，对于大设备来说又太小怎么办？ - Daksh Gargas
1
使用MediaQuery获取设备的高度。尝试不同高度的底部栏，看哪个看起来比较好。将决定的大小表达为设备高度的百分比。屏幕高度 * 常数 = 底部导航栏高度。常数=您用于决定大小的设备屏幕高度/所选设备屏幕高度。 - Susmit
3
很不幸，在尝试将BottomNavigationBar包装在SizedBox中时，我遇到了溢出布局的问题。 - TheFabbius
10

我设置了 BottomNavigationBar( selectedFontSize: 0.0, unselectedFontSize: 0.0)。然后，我使用 SizedBox( height: 50) 包装了 BottomNavigationBar 组件。

这对我起作用。希望对你们也有用...

9

我也遇到了同样的问题，BottomNavigationBar的高度无法被覆盖，我的解决方案是使用SizedBox调整图标大小，以减小高度。另一个最终的解决方案是更新标题属性的字体大小，这是我的示例：

new BottomNavigationBarItem(
              icon:new SizedBox(
                child: new IconButton(
                    icon: new Image.asset("assets/images/icon_ar.png"),
                    onPressed: () {}),
                width: 38,
                height: 38,
              ),
              title: new Text("", style: new TextStyle(fontSize: 0),))

我的 BottomNavigationBar 在两个平台上都有标准大小。

6
你可以创建自己的小部件。
 Widget customBottomNavigationBar(BuildContext context){
    double myHeight =100.0;//Your height HERE
    return SizedBox(
    height: myHeight,
    width: MediaQuery.of(context).size.width,
    child: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,
          ),
    );
}

@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: customBottomNavigationBar(context),
      backgroundColor: Colors.blue,
    ),
  ),
);
}
4

有没有办法自定义BottomNavigationBar的高度？

没有。

为什么？

因为该小部件的开发人员没有提供任何控制选项。

但我该怎么做呢？

阅读这篇文章

此外，如果你要准备自定义的BottomNavBar，你必须自己处理监听器。这不仅仅是创建一个带有IconButtons行的Container。

[更新] 我的意思是指BottomNavigationBar类

可以采用解决方法，如接受的答案中所述。

文章已不存在。我学习Flutter的越多，它似乎就越糟糕。小部件复杂而且不灵活。 - Trevor
2
你好！感谢您提出这个问题。如果您觉得Flutter很困难，我建议您选择其中一个本地框架（Android或iOS），然后逐步学习Flutter。直接跳入混合框架并不会真正帮助您。 :) - Daksh Gargas
你可以使用SizedBox来包装bottomNavigationBar。 - MrSalesi
嗨@MrSalesi，请阅读答案中的“[更新]”。此答案是作为已接受答案的补充。 - Daksh Gargas
2

使用selectedFontSize和unselectedFontSize属性来调整字体大小。我将它们都设置为1.0，似乎减少了导航栏顶部和底部的额外填充，从而减小了导航栏的高度。

BottomNavigationBar( iconSize: kIconSize20, selectedFontSize: 1.0, unselectedFontSize: 1.0, ...

0

Flutter 3.7.8

记得有两个底部导航栏：Material 和 Cupertino。

对于 Cupertino，只需使用 height 属性即可。

// Standard iOS 10 tab bar height.
const double _kTabBarHeight = 50.0;

例子

CupertinoTabBar(
   activeColor: LumiantDefaultTheme.primary.shade700,
   inactiveColor: LumiantDefaultTheme.grey.shade400,
   items: bottomNavBarItems,
   currentIndex: selectedTabIndex,
   onTap: onTabSelected,
   height: 66,
 ),

对于Material底部导航栏的高度： 计算方法如下：

constraints: BoxConstraints(minHeight: kBottomNavigationBarHeight + additionalBottomPadding)

底部导航栏的高度。
double kBottomNavigationBarHeight = 56.0;
additionalBottomPadding = MediaQuery.of(context).viewPadding.bottom = 0;

但是如果底部使用了安全区域，则不会为0。因此需要进行一些数学运算。

因此，例如可以用SizedBox将其包装起来。

bottomNavigationBar: SizedBox(
        height: 66,
        child: BottomNavigationBar(
          xxx
          xxx
          xxx
            ),
          ),
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接