FlutterのColumnの子の間のスペース

子としてColumn2つのTextFieldウィジェットを持つウィジェットがあり、両方の間にスペースを確保したいと考えています。

私はすでに試しましたmainAxisAlignment: MainAxisAlignment.spaceAroundが、結果は私が望んでいたものではありませんでした。

Paddingこれら2つのウィジェットの間にウィジェットを使用することも、ウィジェットでそれらのウィジェットをラップすることもできPaddingます。

更新

SizedBoxウィジェットを2つのウィジェットの間に使用して、2つのウィジェットの間にスペースを追加すると、パディングウィジェットよりもコードが読みやすくなります。

例：

Column(
  children: <Widget>[
    Widget1(),
    SizedBox(height: 10),
    Widget2(),
  ],
),

次のように、ウィジェット間にSizedBox特定のを配置できheightます。

Column(
  children: <Widget>[
    FirstWidget(),
    SizedBox(height: 100),
    SecondWidget(),
  ],
),

ウィジェットをラップするよりもこれを好むのはなぜPaddingですか？読みやすさ！視覚的な定型文が少なく、インデントが少なく、コードは通常の読み取り順序に従います。

Wrap()代わりColumn()にウィジェットを使用して子ウィジェット間にスペースを追加できます。また、spacingプロパティを使用して子間に等間隔を指定できます。

Wrap(
  spacing: 20, // to apply margin in the main axis of the wrap
  runSpacing: 20, // to apply margin in the cross axis of the wrap
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)

パディングを使用して、次のようにラップします。

Column(
  children: <Widget>[
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World!'),
  ),
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World2!'),
  )
]);

Container（padding ...）またはSizeBox（height：xx）を使用することもできます。最後のものが最も一般的ですが、ウィジェットのスペースを管理する方法に依存します。スペースが実際にウィジェットの一部である場合はパディングを使用し、たとえばリストにはsizeboxを使用します。

それを行うには多くの方法があります、私はここにいくつかをリストします。

1. 使用Containerして高さを与えます：

   Column(
     children: <Widget>[
       Widget1(),
       Container(height: 10), // set height
       Widget2(),
     ],
   )
   

2. 使用する Spacer

   Column(
     children: <Widget>[
       Widget1(),
       Spacer(), // use Spacer
       Widget2(),
     ],
   )
   

3. 使用する Expanded

   Column(
     children: <Widget>[
       Widget1(),
       Expanded(child: SizedBox()), // use Expanded
       Widget2(),
     ],
   )
   

4. 使用する mainAxisAlignment

   Column(
     mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment
     children: <Widget>[
       Widget1(),
       Widget2(),
     ],
   )
   

5. 使用する Wrap

   Wrap(
     direction: Axis.vertical, // make sure to set this
     spacing: 20, // set your spacing
     children: <Widget>[
       Widget1(),
       Widget2(),
     ],
   )
   

Column(
  children: <Widget>[
    FirstWidget(),
    Spacer(),
    SecondWidget(),
  ]
)

Spacerは、[Flexible]ウィジェットに挿入するための柔軟なスペースを作成します。（コラムのように）

コードを読みやすくするために上記でSizedBoxを使用するのと同じ方法で、パディングウィジェットを同じ方法で使用でき、列の子の親ウィジェットにする必要はありません。

Column(
  children: <Widget>[
    FirstWidget(),
    Padding(padding: EdgeInsets.only(top: 40.0)),
    SecondWidget(),
  ]
)

この問題はさまざまな方法で解決できます。

あなたが使用している場合は行/列をあなたが使用する必要がありMainAxisAlignment.spaceEvenly：mainAxisAlignmentを

あなたが使用している場合はラップウィジェットを使用する必要があり、5間隔：runSpacing 10、

どこでもSizeBox（）を使用できます

列にはデフォルトで高さがありません。列をコンテナにラップして、特定の高さをコンテナに追加できます。次に、次のようなものを使用できます。

Container(
   width: double.infinity,//Your desire Width
   height: height,//Your desire Height
   child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
         Text('One'),
         Text('Two')
      ],
   ),
),

ここにはたくさんの答えがありますが、誰もが使うべき最も重要なものをここに置きます。

1.列

 Column(
          children: <Widget>[
            Text('Widget A'), //Can be any widget
            SizedBox(height: 20,), //height is space betweeen your top and bottom widget
            Text('Widget B'), //Can be any widget
          ],
        ),

2.ラップ

     Wrap(
          direction: Axis.vertical, // We have to declare Axis.vertical, otherwise by default widget are drawn in horizontal order
            spacing: 20, // Add spacing one time which is same for all other widgets in the children list
            children: <Widget>[
              Text('Widget A'), // Can be any widget
              Text('Widget B'), // Can be any widget
            ]
        )

Column(children: <Widget>[
   Container(margin: EdgeInsets.only(top:12, child: yourWidget)),
   Container(margin: EdgeInsets.only(top:12, child: yourWidget))
]);

列の子の間でSizedBox（）ウィジェットを使用する必要がある場合があります。それがお役に立てば幸いです

ヘルパー関数を使用して、各子の後に間隔を追加することもできます。

List<Widget> childrenWithSpacing({
  @required List<Widget> children,
  double spacing = 8,
}) {
  final space = Container(width: spacing, height: spacing);
  return children.expand((widget) => [widget, space]).toList();
}

したがって、返されたリストは列の子として使用できます

Column(
  children: childrenWithSpacing(
    spacing: 14,
    children: [
      Text('This becomes a text with an adjacent spacing'),
      if (true == true) Text('Also, makes it easy to add conditional widgets'),
    ],
  ),
);

同じ目標のために子供たちをヘルパー関数に通すのが間違っているのか、それともパフォーマンスのペナルティがあるのか​​はわかりませんか？

サイズのボックスは、電話が横向きモードの場合には役に立ちません。

body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
      ],
     )