Padding class
1591 ワード
指定したpaddingに従ってchildの部品を追加します.
上の写真は少しも空間がありませんが、退屈に見えますか?
四角い間に少しスペースを残してはどうですか?
このように空間すなわちエッジが必要な場合,padding部品を用いて解決することができる.
Paddingコンポーネントを使用すると、スペースを作成して配置できます.
次はpaddingコンポーネントを使用してスペースを作成した結果です.
ではpaddingはどのように使いますか?
このように、どの部分にどれだけのスペースを残すかを決め、paddingを適用するchildを入れればよい.
パッドの方法は多種多様である.
これはEdgeInsetsのタイプによって異なります.
LTRBは、Left、Top、Right、Bottomから順番に取った最初の文字です.
EdgeInsets.fromLTRBを使用して、必要なchildの左、上、右、下の余白の大きさを決定します.
例)
すべての部分(左、右、上、下)に同じサイズのマージンを与えます.
特定の部分に指定した値のサイズを残します.
例)
これにより、左、上、下、右のうちの特定の部分にそれぞれ異なる値を余白として残すことができる.
縦と横を基準に空白の値を指定します.
水平=水平
垂直=垂直
水平方向に値を指定すると、左右の余白が決まります.
垂直に値を指定すると、上下の余白を決定できます.
STEBは、Start、Top、End、Bottomから順番に取った最初の文字です.
それを使って、左がstart、右がendです.

上の写真は少しも空間がありませんが、退屈に見えますか?
四角い間に少しスペースを残してはどうですか?
このように空間すなわちエッジが必要な場合,padding部品を用いて解決することができる.
Paddingコンポーネントを使用すると、スペースを作成して配置できます.
次はpaddingコンポーネントを使用してスペースを作成した結果です.

ではpaddingはどのように使いますか?

このように、どの部分にどれだけのスペースを残すかを決め、paddingを適用するchildを入れればよい.
パッドの方法は多種多様である.
これはEdgeInsetsのタイプによって異なります.
1. EdgeInsets.fromLTRB()
LTRBは、Left、Top、Right、Bottomから順番に取った最初の文字です.
EdgeInsets.fromLTRBを使用して、必要なchildの左、上、右、下の余白の大きさを決定します.
例)

2. EdgeInsets.all()
すべての部分(左、右、上、下)に同じサイズのマージンを与えます.
3. EdgeInsets.only()
特定の部分に指定した値のサイズを残します.
例)
EdgeInsets.only(top: 30, bottom: 20)

これにより、左、上、下、右のうちの特定の部分にそれぞれ異なる値を余白として残すことができる.
4. EdgeInsets.symmetric()
縦と横を基準に空白の値を指定します.

水平=水平
垂直=垂直
水平方向に値を指定すると、左右の余白が決まります.
垂直に値を指定すると、上下の余白を決定できます.
5. EdgeInsets.fromSTEB
STEBは、Start、Top、End、Bottomから順番に取った最初の文字です.
それを使って、左がstart、右がendです.

Reference
この問題について(Padding class), 我々は、より多くの情報をここで見つけました https://velog.io/@kimhr9889/Padding-classテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol