行匹配父宽度

Posted 2023-02-23

【中文标题】行匹配父宽度

【英文标题】：Row match parent width

【发布时间】：2020-11-15 04:47:00

【问题描述】：

我正在尝试将包含“短标签”的Row 设为其下方的Row。

放置mainAxisSize: MainAxisSize.max 是不够的，因为它应该匹配父宽度，基于这个答案： The equivalent of wrap_content and match_parent in flutter?

尝试在行外使用Expanded，但它会导致错误，使用SizedBox.expand 相同。 不能使用像width: double.infinity 这样的约束，因为左边的行（代码中的// Left part）必须只占用它需要的空间，其余的必须从黄色容器中取出。

截图和代码如下：

import 'package:flutter/material.dart';

void main() 
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Row(
              children: [
                // Left part
                Row(
                  children: [
                    Column(children: [
                      // Error using Expanded ...
                      //Expanded(
                      //child:
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Text('Short label:'),
                          Container(width: 20, height: 20, color: Colors.red),
                        ],
                      ),
                      //),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Text('Long text label:'),
                          Container(width: 20, height: 20, color: Colors.red),
                        ],
                      ),
                    ]),
                  ],
                ),
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                    height: 100,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  );

编辑（旧的，检查下面的最终编辑）

IntrinsicWidth 是使行具有相同宽度的正确方法，正如@mohandes 所建议的那样。

但是，如果我在下面添加另一行（下图中包含复选框的行），将行包装在两个 IntrinsicWidth 小部件中，则它不起作用。 复选框行应与上一行一样宽，以便与左侧的复选框对齐。

在第一行中，我在右侧添加了一个橙色容器作为类似块的占位符。

截图和代码如下：

import 'package:flutter/material.dart';

void main() 
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Row(children: [
              Column(
                children: [
                  IntrinsicWidth(
                    child: Row(children: [
                      IntrinsicWidth(
                        child: Column(children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Text('Short label 1:'),
                              Container(width: 20, height: 20, color: Colors.red),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Text('Short label 123456:'),
                              Container(width: 20, height: 20, color: Colors.red),
                            ],
                          ),
                        ]),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          width: 40,
                          height: 40,
                          color: Colors.orange,
                        ),
                      )
                    ]),
                  ),
                  IntrinsicWidth(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Checkbox(value: true, onChanged: null),
                        Text('Checkbox'),
                      ],
                    ),
                  ),
                ],
              ),
              Expanded(
                child: Container(
                  color: Colors.yellow,
                  height: 100,
                ),
              ),
            ]),
          ],
        ),
      ),
    ),
  );

编辑 2

IntrinsicWidth 工作正常，第一次编辑中上面代码的问题是我使用IntrinsicWidth 作为子小部件（行）而不是父小部件（外列）的包装。

【问题讨论】：

如果你想覆盖整个宽度，为什么要使用Row？如果你不使用行，它会自动占满宽度

@HardikKumar：你的意思是包含文本和容器的行（应该成为文本字段）？哪个小部件更适合将更多小部件连续放置？

我无法理解您真正想要实现的目标是什么？它是一个文本字段吗？请正确解释您的问题，以便我提供帮助。

【参考方案1】：

尝试在内部宽度小部件中添加包含行（长行和短行）的列。 固有宽度使所有子宽度为最长子宽度。

【讨论】：

这似乎一目了然，我稍后再做一个测试并接受你的答案！

您的策略适用于我旧代码中的那两行，请检查我的编辑，我添加了一个示例，其中多行似乎失败了

我在第一次编辑时更正了我的代码，IntrinsicWidth 工作正常，谢谢！

【参考方案2】：

通过将布局更改为Row [ Column Column Container ]，我们得到

代码：

Widget alternateLayout() 
  return Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            color: Colors.blue[100],
            child: Text('Short label:'),
          ),
          Container(
            color: Colors.green[100],
            child: Text('Long text label:'),
          ),
        ],
      ),
      Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 20,
            width: 20,
            color: Colors.red,
          ),
          Container(
            height: 20,
            width: 20,
            color: Colors.red,
          ),
        ],
      ),
      Expanded(
        child: Container(
          color: Colors.yellow,
          height: 100,
        ),
      ),
    ],
  );

【讨论】：

感谢您的回答，但使用两列布局会因行高而失败。标签和容器（它是复杂小部件的占位符）必须在同一行，以便它们可以正确垂直对齐。我用IntrinsicWidth 小部件编辑了我的问题

好的，是的。 @Ansharja 仅供参考，根据IntrinsicWidth docs 的说法，它可能会在计算上变得昂贵（对于桌面应用程序来说，成本可能并不重要）。