Flutter - 最も詳細なスタック (スタック レイアウト) チュートリアル

複数のコンポーネントを収容でき、サブコンポーネントが上に重ねて配置されます。Alignmentプロパティを使用すると、 Positionedコンポーネントと組み合わせて使用​​して、正確かつ効果的に配置できます。Android側のFramLayoutレイアウトに似ています。

属性	効果
アライメント	サブコンポーネントが配置される場所
クリップ動作	ウィジェットのコンテンツをクリップする

• 使用するシーン:

たとえば、開発中にユーザーのアバターに特別なロゴを追加する必要がある場合は、積み上げレイアウトを使用する必要があります。

class CustomStack extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    var yellowBox = Container(
      color: Colors.yellow,
      height: 100,
      width: 100,
    );

    var redBox = Container(
      color: Colors.red,
      height: 90,
      width: 90,
    );

    var greenBox = Container(
      color: Colors.green,
      height: 80,
      width: 80,
    );

    return Container(
      width: 200,
      height: 120,
      color: Colors.grey.withAlpha(33),
      child: Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.topRight,
        children: <Widget>[yellowBox, redBox, greenBox],
      ),
    );
  }
}

内部レイアウト、サブコンポーネントの位置と配置を正確に積み重ねます。

属性	効果
左	左距離
上	アップ距離
右	適切な距離
下	ダウン距離

Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.bottomLeft,
        children: <Widget>[
          yellowBox,
          redBox,
          Positioned(
            bottom: 10,
            right: -30,
            child: greenBox,
          )
        ],
      )

見られます緑ClipBehavior属性が使用されていないため、コンポーネントの一部が切り取られて調整されています。次に、 Clip.none属性の効果を見てみましょう

Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.bottomLeft,
        clipBehavior: Clip.none,
        children: <Widget>[
          yellowBox,
          redBox,
          Positioned(
            bottom: 10,
            right: -30,
            child: greenBox,
          )
        ],
      ),

この属性を追加すると、次のことがわかります。緑成分の過剰分も表示されます。この属性の意味も一目瞭然です。

Positionedと同様に、サブコンポーネントの位置を正確に制御します。

Align コンポーネントを使用してスタイルを作成する

Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.bottomLeft,
        clipBehavior: Clip.none,
        children: <Widget>[
          Align(
            alignment: const Alignment(0, 0),
            child: redBox,
          ),
        ],
      )

真ん中にレイアウトが表示されているのがわかりますが、アライメント(0, 0)この属性は次のように分類されます。バツアクスルヒールy軸、範囲の値は-1到着1間;

「Alignment(0, 1)」を参照してください。

y が 1 の場合、赤色のコンポーネントが一番下に配置されることがわかります。

「アライメント(-0.5、-0.5)」を参照してください。

x が-0.5に等しい場合、コンポーネントが水平軸 -1 ～ 0 の中央にあることは明らかであり、 y が-0.5
に等しい場合、コンポーネントが主軸 - の中央にあることは明らかです。 1 ～ 0; x 値の合計は横軸に従って配置され、y 値のサイズは主軸に従って配置されます。

AttributeAlignment(1, 4)

x と y が 1 より大きい場合、サブコンポーネントはクリップされません。Alignプロパティの使用は、clipBehavior: Clip.noneの影響を受けないことを説明します。