Flutter中如何设置AppBar内Actions组件的自定义高度

AppBar的Actions区域默认会强制子组件占满自身高度，哪怕给子组件设置了固定height也不会生效——就像你提供的代码里，红色Container设置height:20后还是会被拉伸至和AppBar同高。

可以通过以下几种方式实现自定义高度的Actions组件：

• 使用Align组件包裹：通过指定对齐方式，让子组件保持自身高度并居中显示

  class HomeScreen extends StatelessWidget{
  const HomeScreen({Key key}) : super(key: key);
  @override
      Widget build(BuildContext context) {
          return Scaffold(
              appBar:AppBar(
              title:Text('Home'),
              actions:[
                  Align(
                    alignment: Alignment.center,
                    child: Container(color:Colors.red,height:20,child:Text('HI')),
                  )
              ]
              ),
          );
      }
  }
  

• 使用Padding控制显示高度：通过给子组件添加上下内边距，间接压缩子组件的视觉高度

  actions:[
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 10), // 上下各留10px空白，子组件高度为AppBar高度-20
        child: Container(color:Colors.red,child:Text('HI')),
      )
  ]
  

• 使用ConstrainedBox限制高度：通过约束条件强制限制子组件的最大高度，避免被拉伸

  actions:[
      ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 20),
        child: Container(color:Colors.red,child:Text('HI')),
      )
  ]
  

内容的提问来源于stack exchange，提问作者Abdi mussa