Flutter 将列的子项水平扩展至最大子项的大小

Question

我在 Positioned 内有一列(在 Stack 内)，这意味着我无法使用任何 Expanded 小部件，因为据我所知，已定位的小部件不提供任何约束的意思。特别是，我试图将一列中的 2 个小部件向左和向右对齐。但是，如果我将一行放入一列中，它就会缩小到其中最小子项的大小，就像图像一样，而它应该扩展到最大子项的大小。

这是上图的代码:

@override
  Widget build(BuildContext context) {
    return Positioned(
      top: 20,
      left: 20,
      child: Container(
        color: Colors.blue,
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Long Widget Title"),
              const SizedBox(height: 20),
              Container(
                color: Colors.red,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: [const Text("Left Text")],
                ),
              ),
              const SizedBox(height: 20),
              Container(
                color: Colors.green,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  mainAxisSize: MainAxisSize.max,
                  children: [const Text("Right Text")],
                ),
              )
            ],
          ),
        ),
      ),
    );

这是我试图获得的布局，及其在不同情况下的行为:

我认为，如果有一种方法可以将每一行(包括标题)拉伸(stretch)到最宽子项的大小，则在当前设置下可能可以实现。这可能吗？

Answer 1

您可以使用 IntrinsicWidth https://api.flutter.dev/flutter/widgets/IntrinsicWidth-class.html 轻松实现该布局。

A widget that sizes its child to the child's maximum intrinsic width.

只需将小部件放在容器之前，如下所示:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 20,
      left: 20,
      child: IntrinsicWidth(
        child: Container(
          color: Colors.blue,
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("Long Widget Title"),
                const SizedBox(height: 20),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.red,
                        child: const Text("Left Text"),
                      ),
                    ),
                    const Expanded(child: SizedBox.shrink()),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    const Expanded(child: SizedBox.shrink()),
                    Expanded(
                      child: Container(
                        color: Colors.green,
                        child: const Text("Right Text"),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在此处检查 dartpad 版本 https://dartpad.dev/?id=2b07ca68f1897d9868400858b9ca169b