Flutter：不展开行

Question

这是我的源代码：

Scaffold(
  body: Center(
    child: Container(
      color: Colors.green,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Flexible(
              fit: FlexFit.loose, child: Image.asset('images/demo.png')),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                child: Container(
                  color: Colors.yellow,
                  child: Text('Cancel'),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.red,
                  child: Text('Okay'),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),
);

这是结果：

我希望它是这样的：

不使用固定尺寸，因为图片尺寸可能会有所不同。

我已经尝试在行子项上使用灵活。该解决方案的问题是绿色容器正在像这样展开：

我不想发生这种情况。

Answer 1

也许这会有所帮助。你可以使用 Spacer();在两个文本 Cancel 和 Okay 之间。 Spacer() 会将第二个文本放在行尾。

Row(
  children[
     Container(child: Text('Cancel', style...)),
     Spacer(),
     Container(Text('Okay', style...)),
]
);

Answer 2

也许你可以获取图像的宽度并将其传递给包装列的容器：

import 'dart:io';

File image = new File('image.png'); // Or any other way to get a File instance.
var decodedImage = await decodeImageFromList(image.readAsBytesSync());
final width = decodedImage.width;

Answer 3

编辑，进行了更多搜索并找到了您似乎正在寻找的内容：

IntrinsicWidth 小部件确保子元素具有统一的宽度，这将是最宽元素的宽度（没有像基于 Stack 小部件的解决方案中那样的重叠问题）。所以这段代码完成了你想要做的事情：

Scaffold(
      body: Center(
        child: IntrinsicWidth(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Flexible(
                flex: 1,
                fit: FlexFit.tight,
                child: Image.asset('images/demo.png'),
              ),
              Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.yellow,
                      child: Text('Cancel'),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.red,
                      child: Text('Okay'),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );

截图：

旧答案：

如果您不介意将图像底部的一点点与按钮重叠，堆栈 class 会根据其未定位的子项调整自身大小，因此这对您有用：

Scaffold(
      body: Center(
        child: Stack(
          fit: StackFit.loose,
          children: [
            Image.asset('images/demo.png'),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.yellow,
                      child: Text('Cancel'),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.red,
                      child: Text('Okay'),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

截图：

Flutter：不展开行

Flutter: Do not expand row

row

image

flutter