web-dev-qa-db-ja.com

Flutterの列の子の間のスペース

2つのColumnウィジェットを子とするTextFieldウィジェットがあり、それらの間にいくつかのスペースが必要です。

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

dartflutterflutter-layout
33
Sachin Soma

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

18
Viren V Varasadiya

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

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

Paddingでウィジェットをラップするよりもこれを好む理由読みやすさ！視覚的な定型文が少なく、インデントが少なく、コードは典型的な読み順に従っています。

70
Marcel

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

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：x.x）を使用することもできます。最後のものは最も一般的ですが、ウィジェットのスペースをどのように管理したいかによって異なります。スペースが実際にウィジェットの一部である場合はパディングを使用し、リストにはサイズボックスを使用します。

18
dmarquina

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

Wrap(
  spacing: 20, // to apply margin horizontally
  runSpacing: 20, // to apply margin vertically
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)
9
Mahdi Tohidloo

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

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

この問題は別の方法で解決できます。

行/列を使用する場合は、mainAxisAlignment：MainAxisAlignment.spaceEvenlyを使用する必要があります

Wrapを使用する場合、ウィジェットを使用する必要がありますrunSpacing：5、スペース：10、

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

0
Md.Tarikul Islam
Column(
  children: <Widget>[
    FirstWidget(),
    Spacer(),
    SecondWidget(),
  ]
)
0
user9139407