☰

Flutterで2つの要素の行の1つの要素のみを中央に配置する方法 質問する

tag-icon • tag-icon flutter flutter-layout
Flutterで2つの要素の行の1つの要素のみを中央に配置する方法 質問する

私のレイアウトでは、テキストとアイコンの 2 つのウィジェットが一列に並んでいます。

以下に示すように、* はアイコンを指し、"-" を使用して行を表すものとします。

----------------------------
           Text          *  
----------------------------

テキストを行全体の中央に配置し、アイコンを右端に配置するにはどうすればよいでしょうか?

ベストアンサー1

注目すべき主な点は、使用したくない場合は、Stack左右両方に同じ幅を占めるウィジェットを用意する必要があるということです。

私はどちらでもこれを行うでしょExpandedうPadding

Row(
  children: <Widget>[
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(left: 32.0),
        child: Text(
          "Text",
          textAlign: TextAlign.center,
        ),
      ),
    ),
    Icon(Icons.add, size: 32.0,)
  ],
)

またはRow'smainAxisAlignmentとaでSizedBox

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    const SizedBox(width: 32.0),
    Text("Text"),
    Icon(Icons.add, size: 32.0)
  ],
)

または、パディングの代わりに左側にExpandedと を置きますSizedBox:)。左側のパディングまたは追加のコンテナーは、アイコンが占めるスペースを考慮して、textAlign が行内のテキストを中央に配置するようにするためのものです。

おすすめ記事