2020/10/21 Flutter : Understanding constraintsの訳パート2(Example3〜10)

⇦前ページ

サンプルコードは↓にあります。

this GitHub repo

Example 3

Example 3 layout

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

 

スクリーンがCenterウィジェットに対して、スクリーンと同じサイズであることを強制します。ですからCenterウィジェットはスクリーンと同じサイズを占有します。

CenterウィジェットがContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。その結果Containerのサイズは100✖️100になります。


Example 4

Example 4 layout

Align(
   alignment: Alignment.bottomRight,
   child: Container(width: 100, height: 100, color: Colors.red),
)

example3ではCenterウィジェットでラップしましたが、Example4ではAlignウィジェットでラップしています。

AlignウィジェットもContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。」と言います。

ただし、空きスペースがある場合は、Containerを中央に配置しません。 代わりに、コンテナを使用可能なスペースの右下に揃えます。

Alignウィジェットについてはこちら


Example5

Example 5 layout

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

スクリーンがCenterウィジェットに対して、スクリーンと同じサイズであることを強制します。ですからCenterウィジェットはスクリーンと同じサイズを占有します。

CenterウィジェットはContainerウィジェットに対し、CenterウィジェットがContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。

Container自身には無限のサイズ(double.infinity)が指定されていますのでそのサイズを望みますが、スクリーンを超えるサイズにはなれませんので、結果的にスクリーンと同じ領域を占有します。


Example6

Example 6 layout

Center(child: Container(color: Colors.red))

スクリーンがCenterウィジェットに対して、スクリーンと同じサイズであることを強制します。ですからCenterウィジェットはスクリーンと同じサイズを占有します。

CenterウィジェットはContainerウィジェットに対し、CenterウィジェットがContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。

Containerウィジェットは子ウィジェットを持っておらず、サイズ指定もありません。Containerウィジェットはできる限り大きいサイズを望みます。その結果Containerウィジェットはスクリーン全体を占有します。

しかし、なぜContainerはそのように決定するのでしょう? これは、Containerウィジェットを作成した人による設計上の決定だからです。 作成方法が異なる可能性があり、状況に応じて、Containerウィジェットのドキュメントを読んで、その動作を理解する必要があります。


Example7

Example 7 layout

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

スクリーンがCenterウィジェットに対して、スクリーンと同じサイズであることを強制します。ですからCenterウィジェットはスクリーンと同じサイズを占有します。

Centerウィジェットは赤いContainerウィジェットに対し、CenterウィジェットがContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。赤いContainerはサイズ指定がありませんが、子ウィジェットを持っています。ということで、赤いContainerウィジェットは、子ウィジェットと同じサイズを希望します。

赤いContainerが子ウィジェット(緑のContainerウィジェット)に対して、あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。

(赤いContainerの)子ウィジェットは緑のContainerウィジェットで、サイズ30✖️30を希望します。

赤のContainerは子ウィジェットのサイズと同じサイズであるため、30×30になります。緑Containerウィジェットが赤Containerウィジェットを完全に覆っているため、赤の色は表示されません。


Example8

Example 8 layout

Center(
   child: Container(
     color: Colors.red,
     padding: const EdgeInsets.all(20.0),
     child: Container(color: Colors.green, width: 30, height: 30),
   )
)

赤Containerウィジェット自身のサイズは子ウィジェット(緑Containerウィジェット)と同じになります。しかし、赤Container自身のpadding(パディング)を考える必要があります。

パディングがあるので、パディングの分だけ赤色が見えるようになります。緑ContainerウィジェットのサイズはExample7と同じです。


Example9

Example 9 layout

ConstrainedBox(
   constraints: BoxConstraints(
      minWidth: 70,
      minHeight: 70,
      maxWidth: 150,
      maxHeight: 150,
   ),
   child: Container(color: Colors.red, width: 10, height: 10),
)

 

Containerウィジェットは70〜150ピクセルでなければならないと思うかもしれませんが、それは間違いです。 ConstrainedBoxは、自身が親(スクリーン)から受け取った制約とは別に、追加の制約を課します。(自身が親(スクリーン)から受け取った制約が無くなる訳ではない、ということ)

ここで、スクリーンはConstrainedBoxに対して、スクリーンとまったく同じサイズにするように強制します。

ConstrainedBoxは、子であるContainerウィジェットに対してスクリーンのサイズを想定するように指示しますので、(ConstrainedBoxの)constraintsパラメーター(追加の制約)を無視します。

ConstrainedBoxウィジェットについてはこちら


Example10

Example 10 layout

Center(
   child: ConstrainedBox(
      constraints: BoxConstraints(
         minWidth: 70,
         minHeight: 70,
         maxWidth: 150,
         maxHeight: 150,
      ),
      child: Container(color: Colors.red, width: 10, height: 10),
   )
)

CenterウィジェットはConstrainedBoxウィジェットに対して、スクリーンサイズを上限とする任意のサイズを認めます。

ConstrainedBoxウィジェットは、そのconstraintsパラメーターに基づき、その子ウィジェットに追加の制約を課します。

Containerウィジェットの幅、高さは70〜150ピクセルである必要があります。 Containerウィジェット自身の幅・高さは10ピクセルなので、最終的に70ピクセル(最小)になります。


次ページ⇨

 

 

参考

https://flutter.dev/docs/development/ui/layout/constraints

コメントを残す

メールアドレスが公開されることはありません。