我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
当前回答
你可以试试这个:
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,
])
其他回答
你可以用不同的方法来解决这个问题。
如果使用行/列,则必须使用mainAxisAlignment: MainAxisAlignment.spaceEvenly 如果你使用Wrap Widget,你必须使用runSpacing: 5, spacing: 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')
],
),
),
列小部件没有自己的高度,它只是随着我们在子小部件中添加的内容而展开。 如果你需要在多个小部件之间保持相同的空间,
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小部件,而不是列或行。
包装( 间距:10, runSpacing: 10, 孩子们:[], )
如果在列、行、listView等中有太多的子元素,并且必须在应用程序的许多地方执行相同的操作,那么添加多个大小的框将变得乏味。
你可以使用下面的utils来封装添加这些大小的盒子的逻辑:
List<Widget> addHorizontalSpaceBetweenElements(double space, List<Widget> widgets) {
return _addSpaceBetweenElements(widgets, () => SizedBox(width: space));
}
List<Widget> addVerticalSpaceBetweenElements(double space, List<Widget> widgets) {
return _addSpaceBetweenElements(widgets, () => SizedBox(height: space));
}
List<Widget> _addSpaceBetweenElements(List<Widget> widgets, ValueGetter<SizedBox> sizedBoxGetter) {
if (widgets.isEmpty || widgets.length == 1) {
return widgets;
}
List<Widget> spacedWidgets = [widgets.first];
for (var i = 1; i < widgets.length - 1; i++) {
spacedWidgets.add(sizedBoxGetter());
spacedWidgets.add(widgets[i]);
}
spacedWidgets.add(sizedBoxGetter());
spacedWidgets.add(widgets.last);
return spacedWidgets;
}
你可以这样使用它们:
Column(
children: addVerticalSpaceBetweenElements(5, [
Text(),
Text(),
Row(children: addHorizontalSpaceBetweenElements(5, [
Text(),
Text(),
])),
]));