Question

我正在尝试创建具有固定宽度和高度的彩色盒子。怎么做到这一点？

Answer 1

将SizedBox中的任何小部件包裹起来以强制它与固定大小匹配。

对于背景颜色或边框，请使用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),
        )
    ),
),

如何在颤动中创建具有固定宽度和高度的彩盒？

3 个答案: