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

Posted 2023-02-23

【中文标题】如何在颤振中实现以下布局？

【英文标题】：How can I achieve the following layout in flutter?

【发布时间】：2021-09-21 22:42:22

【问题描述】：

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

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

“text”-s 在下方“button”-s 上方居中，并且当屏幕足够短时，“thing2”能够进入“texts”-s 之间。

我希望“按钮”-s 始终保持相同的高度/宽度（这可以通过 SizedBox 之类的工具轻松完成）并且与顶部/底部的距离相同。

我希望“thing1”最大为 x 高度，并在需要时向下缩放屏幕（通过缩小文本或使其可滚动，我还没有决定，这不是主要问题）。

我希望“thing2”始终随屏幕缩放。

当屏幕足够大时，我希望“thing1”和“thing2”平均分配它们之间的空间，并且每个都在自己空间的中心。

现在我的布局如下：

列：MainAxisAlignment.SpaceBetween，高度固定 容器：高度固定 行：MainAxisAlignment.SpaceBetween 按钮 按钮 容器：高度固定 东西1 Container：根据屏幕高度和其他Container的高度计算的高度 东西2 容器：高度固定 行：MainAxisAlignment.SpaceBetween 按钮 按钮

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

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

【参考方案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 小部件来对齐（duh）我在 Stack 中的小部件。 我使用 Column 将我的文本置于下方按钮上方。 “mainAxisAlignment: MainAxisAlignment.end”很重要，因此该列位于底部而不是顶部。 最后，我将 Stack 包裹在 Padding 中。