Question

是否可以自定义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,
    ),
  ),
);

}

Answer 1

您可以通过SizedBox包装bottomNavigationBar，

bottomNavigationBar: SizedBox(height: 58, child: //some widget )

Answer 2

您可以创建自己的小部件

 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,
    ),
  ),
);
}

Answer 3

是否可以自定义BottomNavigationBar的高度？

否

为什么？

因为该小部件的开发人员没有给我们任何控件来使用它。

但是我如何实现呢？

Read this article

此外，如果您要准备自定义BottomNavBar，则必须自己照顾听众。不仅仅是创建Container为Row的{{1}}。

Answer 4

我遇到了同样的问题，无法覆盖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),))

mi BottomNavigationBar在两个平台上都具有标准尺寸：）

Answer 5

使用selectedfontsize和unselectedfont size属性播放。我将我的都设置为1.0，这似乎减少了导航栏顶部和底部的多余填充，从而减小了其高度

BottomNavigationBar（ iconSize：kIconSize20， selectedFontSize：1.0， unselectedFontSize：1.0， ...

颤振/飞镖：自定义底部导航栏高度

5 个答案: