Flutter中ConstrainedBox嵌套Row/Column时maxWidth不生效问题

ConstrainedBox的maxWidth约束失效，本质是因为其父容器（ListView的item容器）在水平方向提供的是无限宽约束。按照Flutter布局规则，当父组件给出无限宽的约束时，子组件会优先遵循这个无限约束——Card默认会尽可能占据所有可用水平空间，所以在窗口放大时会直接撑满宽度，完全无视ConstrainedBox的maxWidth限制。

你之前尝试把ConstrainedBox放进Row、移除ListView都没用，是因为Row、Column在各自的主轴方向同样会提供无限宽/高的约束，本质问题没解决。

方案1：用Align/Center包裹ConstrainedBox #

给ConstrainedBox套一层Align（或Center），这类组件会将子组件的宽度限制在当前窗口的可用宽度内，同时让ConstrainedBox的maxWidth规则生效：当窗口宽度超过600时，Card保持600px宽；窗口小于600时，Card自适应窗口宽度。如果需要左对齐，用Align(alignment: Alignment.centerLeft)即可，代码修改如下：

body: ListView(
  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 25),
  children: [
    Align(
      alignment: Alignment.centerLeft,
      child: ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 600),
        child: Card(
          color: Colors.yellow,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 15),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: [
                Padding(
                  padding: const EdgeInsets.only(right: 20),
                  child: Container(
                    color: Colors.red,
                    height: 50,
                    width: 50,
                  ),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: const <Widget>[
                      Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'),
                      Padding(
                        padding: EdgeInsets.only(top: 20),
                        child: Text('Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 20),
                        child: Text('Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ],
),

方案2：用SizedBox动态控制宽度 #

如果需要更直接的宽度控制，可以结合MediaQuery获取窗口宽度，用SizedBox取窗口宽度和600的最小值：

body: ListView(
  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 25),
  children: [
    SizedBox(
      width: MediaQuery.of(context).size.width > 600 
          ? 600 
          : MediaQuery.of(context).size.width,
      child: Card(
        color: Colors.yellow,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 15),
          child: Row(
            // 原Row内容不变
          ),
        ),
      ),
    ),
  ],
),

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