使容器增长到适合列中同级的宽度

Question

我在Column 中有两个Container 小部件，每个都包含一个Text 小部件。我希望具有最短文本的 Container 扩展以匹配包含较长文本的另一个容器的宽度。文本较长的容器应包裹 Text 小部件及其填充。

如果不使用容器上的固定宽度，我无法让它工作：

return Column(
    mainAxisSize: MainAxisSize.min,
    children: [
        // This container has a shorter text than its sibling, so it should expand 
        // its width to match its sibling/parent
        Container(
            alignment: Alignment.center,
            width: 50, // I don't want this fixed width
            decoration: BoxDecoration(color: Colors.orange, borderRadius: BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))),
            child: Padding(
                padding: const EdgeInsets.fromLTRB(8,4,8,4),
                child: Text('short'),
            )
        ),

        // This container has a longer text, so it should decide the width of the 
        // other container (and of the parent Column)
        Container(
            alignment: Alignment.center,
            width: 50, // I don't want this fixed width
            decoration: BoxDecoration(color: Colors.orange, borderRadius: BorderRadius.only(bottomLeft: Radius.circular(4), bottomRight: Radius.circular(4))),
            child: Padding(
                padding: const EdgeInsets.fromLTRB(8,4,8,4),
                child: Text('long text here'),
            )
        ),
    ]
);

我尝试了几种涉及Expanded 和Flexible 的方法来解决它，但它们都会导致“红屏死机”（或至少是“烦恼”）。

编辑

明确一点 - 我希望 Column 仅包装其内容，即将其宽度调整为容器的宽度。总之 - 一切都应该尽可能窄，除了文本最短的容器，它应该与其兄弟（文本较长的容器）一样宽。

Answer 1

我在评论中看到了你的小提琴。你需要的是IntrinsicWidth。

  IntrinsicWidth(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // This container has a shorter text than its sibling, so it should expand
        // its width to match its sibling/parent
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 1.0),
          child: Container(
            color: Colors.orange,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
              child: Text(
                'short',
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ),

        // This container has a longer text, so it should decide the width of the
        // other container (and of the parent Column)
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 1.0),
          child: Container(
            color: Colors.orange,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
              child: Text(
                'long text here',
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ),
      ],
    ),
  ),

Answer 2

您可以使用类似这样的方法来获取 Widget 的整个宽度（确保位于 MaterialApp 和 Scaffold/Material 子级（home）中：

Wrap(
   children: <Widget>[
      Container(
           color: Colors.red,
           child: IntrinsicWidth(
                child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                   Container(
                     color: Colors.black,
                     height: 200,
                     child: Align(
                       alignment: Alignment.bottomRight,
                       child: Text(
                            "Hello World",
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                   Container(
                     color: Colors.blue,
                     height: 100,
                     child: Align(
                     alignment: Alignment.topRight,
                          child: Text(
                            "Bottom Text Longer Text",
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          )

对齐不是必需的，只是为了展示宽度实际上如何与“double.infinity”一起使用并将文本移动到它的右下角或右上角。