扑动/ dart :自定义底部导航栏高度

qgzx9mmu  于 2023-03-27  发布在  其他
关注(0)|答案(7)|浏览(242)

有没有自定义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,
    ),
  ),
 );
}
kkih6yb8

kkih6yb81#

你可以用SizedBox Package bottomNavigationBar,

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

4sup72z82#

我遇到了同样的问题,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在两个平台上都有一个大小标准。

xuo3flqw

xuo3flqw3#

我设置了BottomNavigationBar( selectedFontSize: 0.0, unselectedFontSize: 0.0)。然后我用SizedBox( height: 50) Package 了BottomNavigationBar小部件。它对我有用。希望它对你们也有用...🙂

jum4pzuy

jum4pzuy4#

您可以创建自己的小部件

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

kiayqfof5#

有没有办法自定义BottomNavigationBar的高度?
不想
为什么?
因为那个小部件的开发者没有给予我们任何控制来玩它。
但我怎样才能做到呢?
Read this article
另外,如果你准备了自定义的BottomNavBar,你必须自己处理监听器,这不仅仅是用IconButtonsRow创建一个Container
[更新]我说的“不”是指BottomNavigationBar class
可以有变通办法,如公认答案中所述。

4sup72z8

4sup72z86#

使用selectedfontsize和unselectedfontsize属性,我把我的两个属性都设置为1.0,它似乎减少了导航栏顶部和底部的额外填充,从而降低了导航栏的高度
底部导航栏(图标大小:kIconSize20,selectedFontSize:1.0,unselectedFontSize:1.0,...

llew8vvj

llew8vvj7#

Flutter 3.7.8

记住有两个底部导航栏:材料&库比蒂诺。
对于库比蒂诺,只需使用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,
 ),

对于材质底部导航条高度:这就是它的计算方式:

constraints: BoxConstraints(minHeight: kBottomNavigationBarHeight + additionalBottomPadding)

底部导航栏的高度。

double kBottomNavigationBarHeight = 56.0;
additionalBottomPadding = MediaQuery.of(context).viewPadding.bottom = 0;

但如果使用底部的SafeArea,则不会为0。
例如,使用SizedBox Package 它

bottomNavigationBar: SizedBox(
        height: 66,
        child: BottomNavigationBar(
          xxx
          xxx
          xxx
            ),
          ),

相关问题