问题

I have 2 containers with width and height set to them and a background color (basically a small box). I want to put those 2 containers in the middle or a parent container, on the same row divided to 2 columns in the middle of each column.

这两个容器的宽度和高度已经设置好了，并且有背景颜色（基本上是一个小方块）。我想把这两个容器放在父容器的中间，放在同一行分成2列，每列都在中间。

I know it sounds confusing. It really isn't. This is what I want to achieve:

我知道听起来有点混乱。但实际上并不是。这是我想要实现的效果：

Having the 2 yellow containers in the middle of an imaginary column that takes half the width of the container.

将这两个黄色容器放在一个虚拟列的中间，这个虚拟列占据了容器一半的宽度。

This is my row containing the 2 yellow boxes:

这是包含两个黄色方块的行：

Row(
    children: [
      SwitchPreviewButton(),
      
      SwitchPreviewButton(),
    ],
);

And this is the yellow box widget:

这是黄色方块的小部件：

Widget build(BuildContext context) {
    double width = 10.22;
    double height = 17.32;

    return Container(
      constraints: BoxConstraints(maxWidth: width, maxHeight: height),
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Colors.yellow, //const Color(0xFFB0B0B0),
        borderRadius: BorderRadius.circular(1.16)
      ),
    );
}

And this is what I get:

这是我得到的效果：

If I try to use Expand and center the Yellow widget takes 100% of available space.

如果我尝试使用Expand并居中，黄色小部件会占据所有可用空间。

How can I achieve that?

如何实现这个效果？

Row(
    children: [
      SwitchPreviewButton(),
      
      SwitchPreviewButton(),
    ],
  );

Widget build(BuildContext context) {
    double width = 10.22;
    double height = 17.32;

    return Container(
      constraints: BoxConstraints(maxWidth: width, maxHeight: height),
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Colors.yellow, //const Color(0xFFB0B0B0),
        borderRadius: BorderRadius.circular(1.16)
      ),
    );
  }

答案1

得分: 1

将此添加到您的行

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,  //<---- 在此添加
  children: [
    SwitchPreviewButton(),
    SwitchPreviewButton(),
  ],
);

Row(
 mainAxisAlignment: MainAxisAlignment.spaceAround,  //<---- ADD THIS
    children: [
      SwitchPreviewButton(),
      
      SwitchPreviewButton(),
    ],
  );