Question

我想要达到的东西是这样的：

这些是我想要达到的主要限制：

“text”-s 位于下方“button”-s 上方的中央，而“thing2”能够在屏幕足够短时介于“texts”-s 之间。
我希望“按钮”-s 始终具有相同的高度/宽度（这可以通过 SizedBox 之类的工具轻松完成）并且与顶部/底部的距离相同。
我希望“thing1”最大为 x 高度，并在需要时向下缩放屏幕（通过缩小文本或使其可滚动，我还没有决定，这不是主要的问题）。
我希望“thing2”始终随屏幕缩放。
当屏幕足够大时，我希望“thing1”和“thing2”均匀地共享它们之间的空间，并且每个都位于自己空间的中心。

现在我的布局如下：

Column: MainAxisAlignment.SpaceBetween, height fixed
  Container: height fixed
    Row: MainAxisAlignment.SpaceBetween
      Button
      Button
  Container: height fixed
    thing1
  Container: height calculated based on screen height and other Containers' height
    thing2
  Container: height fixed
    Row: MainAxisAlignment.SpaceBetween
      Button
      Button

这当然不是全部，我试图包含有关我的布局的所有相关信息，而不是毫无意义地提供太多信息。

如何在“按钮”-s 上方添加“文本”-s？（我尝试过 Stack，但后来我不知道如何让它们出现在“button”-s 上方，同时让“thing2”也出现在它们上方。

Answer 1

我设法用这段代码实现了这些东西（其中 MyBox 是一个简单的小部件，带有一个带有宽度和高度的彩色容器）：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const double buttonHeight = 35;
    const double buttonWidth = 100;
    const double textHeight = 40;
    const double textWidth = 30;
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Stack(
        children: [
          Align(
            alignment: Alignment.topLeft,
            child: SizedBox(
              width: buttonWidth,
              height: buttonHeight,
              child: MyBox(Colors.red),
            ),
          ),
          Align(
            alignment: Alignment.topRight,
            child: SizedBox(
              width: buttonWidth,
              height: buttonHeight,
              child: MyBox(Colors.yellow),
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: SizedBox(
                    width: textWidth,
                    height: textHeight,
                    child: MyBox(Colors.green),
                  ),
                ),
                SizedBox(
                  width: buttonWidth,
                  height: buttonHeight,
                  child: MyBox(Colors.cyan),
                ),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: SizedBox(
                    width: textWidth,
                    height: textHeight,
                    child: MyBox(Colors.indigo),
                  ),
                ),
                SizedBox(
                  width: buttonWidth,
                  height: buttonHeight,
                  child: MyBox(Colors.blue),
                ),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: SizedBox(
              width: buttonWidth,
              height: buttonHeight,
              child: MyBox(Colors.orange),
            ),
          ),
          Positioned(
            left: 0,
            top: 0,
            right: 0,
            bottom: buttonHeight,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Flexible(
                  fit: FlexFit.loose,
                  child: MyBox(Colors.purple),
                ),
                Flexible(
                  fit: FlexFit.loose,
                  child: MyBox(Colors.brown),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

TLDR：我使用 Stack 小部件来保存我的其他小部件，并使用 Align 小部件在 Stack 中对齐（废话）我的小部件。
我使用了一个 Column 将我的文本居中放置在我下方的按钮上方。 “mainAxisAlignment: MainAxisAlignment.end”很重要，因此该列位于底部而不是顶部。
最后，我将 Stack 包裹在 Padding 中。

如何在颤振中实现以下布局？

1 个答案: