Flutter Android中ElevatedButton无法占满Row父组件高度问题

在Flutter Android项目开发时，遇到ElevatedButton无法占满所在Row组件全部高度的问题。用蓝色背景Container包裹按钮可直观查看容器尺寸，尝试过Expanded、SizedBox、SizedBox.expand等布局方式均未解决，问题根源在于ElevatedButton的默认特性及Row的布局属性。

原问题代码 #

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
            padding: EdgeInsets.all(16),
            // color: Colors.redAccent,
            child: Container(
              // color: Colors.indigo,
              child: Column(
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.symmetric(
                                horizontal: 8, vertical: 0),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(10),
                            ),
                            hintText: 'Enter Match ID',
                          ),
                        ),
                      ),
                      Container(
                        // color: Colors.blue,
                        padding: EdgeInsets.all(0),
                        margin: EdgeInsets.all(0),
                        child: ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              // backgroundColor: Colors.greenAccent,
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10)),
                            ),
                            onPressed: () => {},
                            child: Text("Scan Code")),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

解决步骤及修改后代码 #

要让ElevatedButton占满Row高度，需调整两个核心点：

• 修改Row的交叉轴对齐方式：将Row的crossAxisAlignment设为CrossAxisAlignment.stretch，让子组件拉伸至Row的高度
• 移除ElevatedButton默认内边距：通过styleFrom设置padding: EdgeInsets.zero，消除按钮自带的内边距
• 控制按钮宽度：给包裹按钮的容器设置固定宽度（或按需调整），避免按钮过度拉伸

修改后的代码：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                Row(
                  // 关键：设置交叉轴拉伸对齐
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.symmetric(
                              horizontal: 8, vertical: 0),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                          hintText: 'Enter Match ID',
                        ),
                      ),
                    ),
                    // 按钮与输入框的间距
                    SizedBox(width: 12),
                    Container(
                      width: 120,
                      // 让容器占满Row高度
                      height: double.infinity,
                      child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            // 关键：移除按钮默认内边距
                            padding: EdgeInsets.zero,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10)),
                          ),
                          onPressed: () => {},
                          child: Text("Scan Code")),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

原因说明 #

• ElevatedButton默认带有minSize和内置padding，即使父容器有足够空间，按钮也不会自动填充满高度
• Row组件默认的crossAxisAlignment为CrossAxisAlignment.center，子组件只会在垂直方向居中，不会拉伸至Row的高度

内容的提问来源于stack exchange，提问作者Bùi Thế Anh