如何用Flutter实现屏幕四分且元素可自适应缩放的布局？

要让4个按钮自动扩展填充GridView的所有可用空间，只需对ElevatedButton的样式做针对性修改即可实现你的期望效果。

修改后的完整代码 #

GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 20,
  crossAxisSpacing: 20,
  padding: const EdgeInsets.all(20),
  physics: const NeverScrollableScrollPhysics(),
  childAspectRatio: 1.25, // 可根据需求调整按钮宽高比
  children: [
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.yellow,
        minimumSize: const Size(double.infinity, double.infinity),
      ),
      onPressed: () {},
      child: const Text('Switch camera'),
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
        minimumSize: const Size(double.infinity, double.infinity),
      ),
      onPressed: () {},
      child: const Text('Change video quality'),
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.green,
        minimumSize: const Size(double.infinity, double.infinity),
      ),
      onPressed: () {},
      child: const Text('Take a picture'),
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.red,
        minimumSize: const Size(double.infinity, double.infinity),
      ),
      onPressed: () {},
      child: const Text('End call'),
    ),
  ],
),

关键修改点 #

• 强制按钮填充单元格：通过minimumSize: const Size(double.infinity, double.infinity)设置按钮的最小尺寸为父容器（GridView单元格）的最大可用空间，这样按钮会自动随屏幕尺寸变化缩放，填满整个单元格。
• 补充按钮回调：ElevatedButton未设置onPressed时会默认处于禁用状态，样式会变灰，因此必须添加该回调（即使是空实现）。

可选调整 #

如果需要更灵活的高度适配，可以移除childAspectRatio参数，添加shrinkWrap: true，并结合MediaQuery动态计算单元格高度，但上述方案已能满足你展示的期望效果。

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