Flutter — スタイルウィジェット。 テーマを管理するためのスタイリング ウィジェット… | ハイメ アルベルト テレス ボホルケスほか | 2011/11/1 2024 年 2 月

パディングは、ウィジェットの周囲にスペースを作成できるウィジェットです child 背景色で塗りつぶされます。

パディングのプロパティ

パラメーターとして受け取る 2 つの必須プロパティを処理します。

• padding これは、端から子ウィジェットまでのピクセル単位のマージンを決定するものです。 このプロパティはオブジェクトを受け取ります エッジインセット これは 4 つの基本的な方向を指します: 左 (左）、 その上 （上）、 右（右) と下 (底）。

開始点に応じてマージンを生成するインスタンス メソッドがいくつかあります。

// all
// coloca el mismo tamaño de margen en todos los lados
const EdgeInsets.all(8.0)
// symmetric
// vertical: coloca el mismo tamaño arriba y abajo
// horizontal: coloca el mismo tamaño izquierda y derecha
const EdgeInsets.symmetric(vertical: 8.0)
// only
// tiene los 4 lados left, right, top, bottom
const EdgeInsets.only(left: 40.0)

• child これは、設定されたパディングが適用される子ウィジェットです。

カード内にテキストを追加する例

MediaQuery は、ウィジェットで画面サイズを正しく使用するのに役立ちます。 現在の画面のサイズを知るには、次のコマンドを使用できます。 MediaQuery.sizeOf(context) を使用して現在のパディングを取得することもできます。 MediaQuery.paddingOf(context) 。 他にも使用できるプロパティは多数ありますが、上記が最も一般的なものです。詳細については、こちらを参照してください。 メディアクエリデータ。

final currentSize = MediaQuery.sizeOf(context);
print(currentSize);
// flutter: Size(430.0, 932.0)
final currentPadding = MediaQuery.paddingOf(context);
print(currentPadding);
// aquí imprime en el orden: left, top, right, bottom
// flutter: EdgeInsets(0.0, 59.0, 0.0, 34.0)

使用したいコンテキスト内に MediaQuery がない場合、次のようなメソッドを使用すると例外が生成される可能性があります。 MediaQuery.sizeOf ああ MediaQuery.paddingOf このために、次のメソッドを使用できます。 maybe 。

final currentSize = MediaQuery.maybeSizeOf(context);
final currentPadding = MediaQuery.maybePaddingOf(context);

として使用できる MediaQuery プロパティは他にもたくさんあります。 MediaQuery.orientationOf 特に、詳細については、次の URL で相談できます。 メディアクエリ。

にあるさまざまなカテゴリのウィジェットの確認を開始します。 ウィジェットカタログ、最初はスタイル ウィジェットで、さまざまな使用方法が見られました。

この記事を読んでいただきありがとうございます!!!