我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。

我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。


当前回答

你可以在这两个小部件之间使用Padding小部件,或者用Padding小部件包装这些小部件。

更新

SizedBox小部件可以在两个小部件之间使用,以增加两个小部件之间的空间,它使代码比填充小部件更具可读性。

Ex:

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

其他回答

有很多方法可以做到这一点,我在这里列出了一些。

Use SizedBox and provide some height: Column( children: <Widget>[ Widget1(), SizedBox(height: 10), // <-- Set height Widget2(), ], ) Use Spacer Column( children: <Widget>[ Widget1(), Spacer(), // <-- Spacer Widget2(), ], ) Use Expanded Column( children: <Widget>[ Widget1(), Expanded(child: SizedBox.shrink()), // <-- Expanded Widget2(), ], ) Set mainAxisAlignment Column( mainAxisAlignment: MainAxisAlignment.spaceAround, // <-- alignments children: <Widget>[ Widget1(), Widget2(), ], ) Use Wrap Wrap( direction: Axis.vertical, spacing: 20, // <-- Spacing between children children: <Widget>[ Widget1(), Widget2(), ], )

这是另一个涉及for循环的选项。

Column(
  children: <Widget>[
    for (var i = 0; i < widgets.length; i++)
      Column(
        children: [
          widgets[i], // The widget you want to create or place goes here.
          SizedBox(height: 10) // Any kind of padding or other widgets you want to put.
        ])
  ],
),

列小部件没有自己的高度,它只是随着我们在子小部件中添加的内容而展开。 如果你需要在多个小部件之间保持相同的空间,

Container(
   width: double.infinity,
   height: height,
   child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
         Text('One'),
         Text('Two'),
         Text('Three'),
         Text('Four')
      ],
   ),
),

或者使用SizeBox、Spacer或widget在它们之间添加自定义空间, 像这样

Column(
   children: <Widget>[
         Text('One'),
         SizedBox(height: 20), 
         Text('Two'),
         SizedBox(height: 40), 
         Text('Three'),
         SizedBox(height: 30), 
         Text('Four')
   ],
 ),

您可以使用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')
  ]
)

你可以试试这个:


import 'package:flutter/material.dart';

class CustomColumn extends Column {
  CustomColumn({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline,
    List children = const [],
    EdgeInsetsGeometry? rowPadding,
  }) : super(
          children: children.map((e) => Padding(padding : rowPadding ?? EdgeInsets.only(bottom:12), child : e)).toList(),
          key: key,
          mainAxisAlignment: mainAxisAlignment,
          mainAxisSize: mainAxisSize,
          crossAxisAlignment: crossAxisAlignment,
          textDirection: textDirection,
          verticalDirection: verticalDirection,
          textBaseline: textBaseline,
        );
}

并调用


CustomColumn(children: [
                    item1,
                    item2,
                    item3,
                  ])