Flutter 将列的 children 水平展开到最大的 children 的大小

Question

我在Positioned内有一列（在Stack内），这意味着我不能使用任何Expanded widget，因为据我所知，positioned不提供任何约束意义。特别是，我试图将列中的 2 个小部件向左和向右对齐。但是，如果我将一行放在一列中，它会缩小到其中最小的 children 的大小，就像图像一样，同时它应该扩展到最大的 children 的大小。

这是上图的代码：

@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")],
                ),
              )
            ],
          ),
        ),
      ),
    );

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

我认为如果有一种方法可以将每一行（包括标题）拉伸到最宽的大小 child，则可以通过当前设置获得。这可能吗？

Answer 1

*Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        children: [
                          Text("Left Text"),
                        ],
                      ),
                      Column(
                        children: [
                          Text("right Text"),
                        ],
                      ),
                    ],
                  ),*

Answer 2

试试这个

@override
  Widget build(BuildContext context) {
    return Positioned(
      top: 20,
      left: 20,
      child: Container(
       width:MediaQuery.of(context).size.width,
        color: Colors.blue,
        child: Padding(
          padding: const EdgeInsets.all(20.0),
      child: Column(
        children: [
          Text("Long Widget Title"),
          const SizedBox(height: 20),
          Row(
           mainAxisAlignment : MainAxisAlignment.start,
            children:[
              Container(color: Colors.red, child: Text("title 1 - left text")),
            ]
          ),
          const SizedBox(height: 20),
          Row(
           mainAxisAlignment : MainAxisAlignment.end,
            children:[
              Container(color: Colors.red, child: Text("title 2 - right text")),
            ]
          ),
        ],
      ),
    ),
  ),
);

Answer 3

您可以使用 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"),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

Flutter 将列的 children 水平展开到最大的 children 的大小

Flutter Expand Column's children horizontally to the size of the largest children

layout

flutter