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

Posted 2023-02-23

【中文标题】如何在颤动中创建具有固定宽度和高度的颜色框？

【英文标题】：How to create colour box with fixed width and height in flutter?

【发布时间】：2018-07-29 04:44:44

【问题描述】：

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

【参考方案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' 构造函数。但两者都有效且效果相同。

【讨论】：

不工作...，它总是占用屏幕的高度和宽度

【参考方案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。

【讨论】：

约束规范太反直觉了，我仍然没有解决方案。我只想要一个不会收缩或拉伸的小部件......为什么颤动在这方面与我作斗争。如果屏幕不能容纳一个大容器（而不是调整它的大小），我有什么地方可以将我的容器指定为宽度和高度并且滚动条出现？我试过中心，对齐..没有任何效果。剩下要做的就是对树上的每个小部件进行微管理，这太痛苦了。

【参考方案3】：

您可以使用以下内容：

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