Flutter实现Card居中、Button置于屏幕底部的布局方案咨询

下面给你两种可行的实现方案，直接替换现有布局即可：

方案一：Column + Expanded + Center #

利用Expanded占据屏幕除按钮外的所有剩余空间，再用Center让Card在该区域居中，按钮自然落在屏幕底部：

Scaffold(
  body: Column(
    children: [
      Expanded(
        child: Center(
          child: Card(
            child: SizedBox(
              width: 200,
              height: 200,
              child: Center(child: Text('居中Card')),
            ),
          ),
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: ElevatedButton(
          onPressed: () {},
          child: Text('底部按钮'),
        ),
      ),
    ],
  ),
)

方案二：Stack + Positioned #

用Stack实现层叠布局，Center包裹Card实现居中，Positioned固定按钮在底部：

Scaffold(
  body: Stack(
    children: [
      Center(
        child: Card(
          child: SizedBox(
            width: 200,
            height: 200,
            child: Center(child: Text('居中Card')),
          ),
        ),
      ),
      Positioned(
        bottom: 16,
        left: 16,
        right: 16,
        child: ElevatedButton(
          onPressed: () {},
          child: Text('底部按钮'),
        ),
      ),
    ],
  ),
)

这两种方案都能精准实现你的需求，方案一更贴合线性布局的逻辑，方案二更灵活适合复杂层叠场景。

内容的提问来源于stack exchange，提问作者Manish Paul