flutter - 如何在颤动中创建具有固定宽度和高度的颜色框？

Question

我正在尝试创建一个具有固定宽度和高度的颜色框。如何做到这一点？

Answer 1

将任何小部件包装在 aSizedBox中以强制它匹配固定大小。

至于背景颜色或边框，使用DecoratedBox.

然后，您可以将两者结合起来，这会导致

const SizedBox(
  width: 42.0,
  height: 42.0,
  child: const DecoratedBox(
    decoration: const BoxDecoration(
      color: Colors.red
    ),
  ),
),

您也可以使用Container它是许多小部件的组合，包括上面的两个小部件。这导致 ：

new Container(
  height: 42.0,
  width: 42.0,
  color: Colors.red,
)

我倾向于选择第一个选项。因为Container阻止使用'const'构造函数。但两者都有效并且做同样的事情。

Answer 2

提出@Rémi Rousselet 回答中出现的问题

Flutter 的布局引擎有几个重要的限制：

• 小部件只能在其父级赋予它的约束范围内决定自己的大小。这意味着一个小部件通常不能有它想要的任何大小。

• 小部件不知道也不决定自己在屏幕中的位置，因为决定小部件位置的是小部件的父级。

• 由于父级的大小和位置反过来也取决于它自己的父级，因此如果不考虑整个树，就不可能精确地定义任何小部件的大小和位置。

• 如果孩子想要与其父母不同的尺寸，而父母没有足够的信息来对齐它，那么孩子的尺寸可能会被忽略。在定义对齐时要具体。

这些示例将在以下部分中进行解释。

Container(width: 100, height: 100, color: Colors.red)

红色Container想要 100 × 100，但它做不到，因为屏幕强制它与屏幕大小完全相同。

所以Container填满了屏幕。

解决方案

用Center

Center(
   child: Container(width: 100, height: 100, color: Colors.red)
)

屏幕强制 与屏幕Center的大小完全相同，因此Center填充屏幕。

中心告诉Container它它可以是任何它想要的大小，但不能大于屏幕。现在Container确实可以是 100 × 100。

Answer 3

您可以使用以下内容：

FractionalTranslation(
    translation: Offset(0, 0),
        child: Container(
        width: 100,
        height: 100,
        child: SizedBox(
            height:  1,
            width: 1,
            child: const ColoredBox(color: Colors.amber),
        )
    ),
),