如何增加flutter中bottomAppbar的高度

vpfxa7rd  于 2022-12-05  发布在  Flutter
关注(0)|答案(4)|浏览(252)

我在我的应用程序中有一个BottomAppBar,但高度似乎只是包围了其中的图标。我想给予bottomAppBar一些更高的高度,我该如何实现这一点?

bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
                Icon(Icons.category),
                Icon(Icons.account_circle),
                Icon(Icons.message),
                Icon(Icons.access_alarm)
            ],
          ),
    elevation: 9.0,
    shape: CircularNotchedRectangle(),
    color: Colors.white,
    notchMargin: 8.0,
  ),
h43kikqp

h43kikqp1#

我通过在图标中间添加一个容器小部件来解决这个问题。对我来说应该有一个更好的方法,如果有人能建议的话,下面是我解决这个问题的方法

bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[

                Icon(Icons.category, color: HexColor('#00A591'),),
                Icon(Icons.account_circle,color: HexColor('#00A591'),),
                Container(height: 55.0,width: 1.0,),
                Icon(Icons.message, color: HexColor('#00A591'),),
                Icon(Icons.access_alarm, color: HexColor('#00A591'),),

            ],
          ),
    shape: CircularNotchedRectangle(),
    color: Colors.white,
    notchMargin: 8.0,
  ),
b4wnujal

b4wnujal2#

您可以为图标添加填充:

BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: Icon(Icons.category),
            ),
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: Icon(Icons.account_circle),
            ),
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: Icon(Icons.message),
            ),
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: Icon(Icons.access_alarm),
            )
          ],
        ),
        elevation: 9.0,
        shape: CircularNotchedRectangle(),
        color: Colors.white,
        notchMargin: 8.0,
      )

另一种解决方案:Im使用BottomNavigatorBar并且它具有属性iconSize

BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        iconSize: 35,

        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.explore), title: Text('Explore')),
          BottomNavigationBarItem(
              icon: Icon(Icons.card_travel), title: Text('Adventure')),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Text('Search')),
          BottomNavigationBarItem(
              icon: Icon(Icons.collections_bookmark), title: Text('Bookmarks')),
          BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('Profile')),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.deepPurple,
        onTap: _onItemTapped,
      )
3wabscal

3wabscal3#

实际上,您可以通过指定高度来尝试使用Container Package Row小部件。

bottomNavigationBar: BottomAppBar(
  child: Container(
    height: 100.0,
    color: Colors.yellow,
    child: YourRowWidget(),
  ),
),
2izufjch

2izufjch4#

SizedBox对我很有效。

bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[

                Icon(Icons.category, color: HexColor('#00A591'),),
                Icon(Icons.account_circle,color: HexColor('#00A591'),),
                const SizedBox(height: 55.0, width: 1.0),
                Icon(Icons.message, color: HexColor('#00A591'),),
                Icon(Icons.access_alarm, color: HexColor('#00A591'),),

            ],
          ),
    shape: CircularNotchedRectangle(),
    color: Colors.white,
    notchMargin: 8.0,
  ),

`

相关问题