Flutter - 最も詳細な (位置指定された) チュートリアル

ポジショニングの概要

[Stack] の子の位置を制御するウィジェットを作成します。

使用するシーン:

コントロールの位置は座標の形式で配置でき、レイアウトを積み重ねるときに使用できます。

属性	効果
幅	幅
身長	高い
上	上
下	終わり
左	左
右	右

予防：

1. 幅と高さが設定されている場合、左と右、および上と下は同時に存在できません; 2.
幅と高さが設定されていない場合は、上を設定する必要があります。 Bottom、Left、Right 属性
3. top、bottom、左と右の両方を 0 に設定すると、全画面がカバーされます。

属性がすべて 0 の場合、全画面がカバーされます。

          Positioned(
             top: 0,
             bottom: 0,
             left: 0,
             right: 0,
            child: Container(
              color: ColorsUtils.randomColor(),
              child: Text("1"),
            ),
          )

上下左右ともに50間隔の場合

Stack(
        alignment: Alignment.topLeft,
        children: [
          Positioned(
            width: 150,
            height: 150,
            // top: 10,
            // bottom: 10,
            // left: 10,
            // right: 10,
            child: Container(
              color: ColorsUtils.randomColor(),
              child: Text("1"),
            ),
          ),
          Positioned(
            width: 150,
            height: 150,
            top: 50,
            // bottom: 10,
            left: 50,
            // right: 10,
            child: Container(
              color: ColorsUtils.randomColor(),
              child: Text("2"),
            ),
          ),
        ],
      )