Question

我的应用程序中有一个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,
  ),

Answer 1

实际上，您可以尝试通过指定高度来将“行”小部件与“容器”包装起来。

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

Answer 2

我通过在该行图标中间添加一个容器小部件来解决了这个问题。对我来说，应该有更好的方法，但是如果有人可以建议这样做会更好以下是我的解决方法

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

Answer 3

您可以在图标上添加填充：

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

另一种解决方案：我正在使用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,
      )

如何在Flutter中增加bottomAppbar的高度

3 个答案: