Flutter：如何让固定宽高比组件在Row中最大化，同时保留另一组件最小空间

核心需求回顾 #

• 两个组件水平并排（可根据屏幕尺寸切换为垂直布局）
• 第一个组件保持1/1.2的固定宽高比，优先占满可用空间，直到第二个组件达到预设的最小尺寸限制
• 屏幕宽度增加时：列表组件自动填充剩余空间
• 屏幕宽度减小时：列表组件先缩小至最小宽度，之后固定宽高比组件才开始缩小

问题分析 #

之前使用Flex+Flexible/Expanded的组合无法满足需求，核心原因是Flex的权重分配逻辑会强制按比例划分空间，既无法优先保证固定宽高比组件的最大可用尺寸，也无法为列表组件设置硬性的最小显示限制。

内置组件实现方案 #

可以通过Flex结合ConstrainedBox、Flexible和AspectRatio实现需求，无需自定义复杂的LayoutBuilder计算：

关键实现要点 #

1. 为列表组件设置最小宽度（示例设为200px，可根据需求调整）
2. 用Flexible(fit: FlexFit.loose)包裹固定宽高比组件，允许其在空间不足时缩小
3. 用Expanded包裹列表组件，使其在空间充足时自动填充剩余宽度

完整代码实现 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: BothWidgets());
  }
}

// 根据屏幕宽度自动切换布局方向
Axis getDirection(BuildContext context) {
  return MediaQuery.of(context).size.width > 600 ? Axis.horizontal : Axis.vertical;
}

class BothWidgets extends StatelessWidget {
  const BothWidgets({super.key});

  // 列表组件的最小宽度（水平布局时生效）
  static const double _listMinWidth = 200;
  // 列表组件的最小高度（垂直布局时生效）
  static const double _listMinHeight = 100;

  @override
  Widget build(BuildContext context) {
    final direction = getDirection(context);
    return Flex(
      direction: direction,
      children: [
        // 固定宽高比组件
        Flexible(
          fit: FlexFit.loose,
          child: AspectRatio(
            aspectRatio: 1 / 1.2,
            child: ColoredBox(color: Colors.red),
          ),
        ),
        // 带最小尺寸限制的列表组件
        Expanded(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: direction == Axis.horizontal ? _listMinWidth : double.infinity,
              minHeight: direction == Axis.vertical ? _listMinHeight : double.infinity,
            ),
            child: ColoredBox(
              color: Colors.blue,
              child: ListView(
                children: const [
                  Row(
                    children: [
                      Expanded(child: Center(child: Text("small"))),
                      Expanded(child: Center(child: Text("text"))),
                    ],
                  ),
                  Row(
                    children: [
                      Expanded(child: Center(child: Text("will"))),
                      Expanded(child: Center(child: Text("be"))),
                    ],
                  ),
                  Row(
                    children: [
                      Expanded(child: Center(child: Text("here"))),
                      Expanded(child: Center(child: Text(""))),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

方案说明 #

• 固定宽高比组件：Flexible(fit: FlexFit.loose)允许组件在列表达到最小宽度后，自动缩小以适应剩余空间，同时始终保持1/1.2的宽高比
• 列表组件：ConstrainedBox确保组件不会被压缩到无法正常显示；Expanded让组件在屏幕宽度充足时，自动填充剩余空间
• 布局方向切换：通过MediaQuery判断屏幕宽度，自动切换水平/垂直布局，垂直布局时为列表设置最小高度，避免无约束高度导致的异常

旧方案失效原因 #

• 单纯的Flex权重分配会强制按比例划分空间，无法优先保证固定宽高比组件的最大可用尺寸，也无法为列表设置硬性最小限制
• 直接将ListView放入Expanded会抛出异常，是因为垂直布局中ListView需要明确的高度约束，本方案通过设置minHeight解决了该问题

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