设置行内元素的最大宽度答案

【问题标题】：Set max width for an element inside a row设置行内元素的最大宽度
【发布时间】：2022-01-09 16:33:50
【问题描述】：

我正在尝试使行内的第一个元素具有响应性，但最大宽度为 500。结果是第一个元素的大小始终为 500。

home: Scaffold(
    body: Row(
      children: [
        Container(
          constraints: const BoxConstraints(maxWidth: 500),
          child: const Text(
              "container container container container container container container container container container container container "),
          color: Colors.red,
        ),
        SizedBox(
          width: 600,
          child: Container(color: Colors.green),
        )
      ],
    ),
  ),

【问题讨论】：

不，所有这些，但第一个响应高达 500

标签： flutter flutter-layout

【解决方案1】：

home: Scaffold(
  body:Container(
width: double.infinity,
child: Row(
    children: [
      Container(constraints: const BoxConstraints(maxWidth: 500), color: Colors.red),
      Expanded(child: Container(color: Colors.green))
    ],
  ),)
),

【讨论】：

该解决方案对我不起作用。更新了问题。

【解决方案2】：

Container的constraints适用于孩子，

要应用到子级的附加约束。

虽然您的Container 中没有孩子，但您有这种行为。在 Container 上添加一个子节点。

您可以查看更多关于 UI constraints的信息。

更新：

我更喜欢使用LayoutBuilder 来处理响应。

 Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Row(
          children: [
            Container(
              constraints: BoxConstraints(
                maxWidth:
                    constraints.maxWidth >= 500 ? 500 : constraints.maxWidth,
              ),
              child: Wrap(
                children: [
                  ...List.generate(
                    55,
                    (index) => Text("conta sner"),
                  )
                ],
              ),
              color: Colors.red,
            ),
            Expanded(child: Container(color: Colors.green))
          ],
        ),
      ),
    );

【讨论】：

我试过了，但是当放置一个带有长文本的Text子时，大小将始终为500。
更新问题
使用LayoutBuilder检查更新答案。
相同的结果（当我缩小窗口时，绿色的 SizedBox 不会推动红色的容器）
Expanded 将获得尽可能大的大小，但这里第一个容器会根据其视图占用可用空间。您可以了解更多关于Expanded here.

【解决方案3】：

请注意flex 值第一行 Item flex 值为 6，这意味着它将占用 60% 的可用空间，第二个有 4，这意味着第二个将占用 40% 的可用空间

home: Scaffold(
  body: Row(
    children: [
      Expanded(
        flex: 6,
        child: Container(

          child: const Text(
              "container container container container container container container container container container container container "),
          color: Colors.red,
        ),
      ),
      Expanded(
        flex : 4,
        child: Container(color: Colors.green),
      )
    ],
  ),
);

【讨论】：