Question

我有一个Column小部件，其中有两个TextField小部件作为子部件，我希望两者之间有一定的空间。

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

Answer 1

您可以将SizedBox和特定的height放在小部件之间，如下所示：

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

为什么比在Padding中包装小部件更受欢迎？可读性！视觉样板更少，缩进更少，并且代码遵循典型的阅读顺序。

Answer 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（高度：x.x）。最后一个是最常见的，但是它会影响您如何管理小部件的空间，如果该空间确实是小部件的一部分，我喜欢使用填充，例如，将sizebox用于列表。

Answer 3

您可以在这两个小部件之间使用Padding小部件，也可以将这些小部件包装为Padding小部件。

Answer 4

我在这里没有看到这个解决方案，所以为了完整起见，我会发布它。

您也可以使用 Padding 用 map 包裹孩子：

Column(
      children: [Text('child 1'), Text('child 2')]
          .map(
            (e) => Padding(
              padding: const EdgeInsets.all(8),
              child: e,
            ),
          )
          .toList(),
    );

Answer 5

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

Spacer创建一个灵活的空间以插入到[Flexible]小部件中。（就像专栏文章一样）

Answer 6

您可以使用Wrap()小部件代替Column()在子小部件之间添加空间

Wrap(
  runSpacing: 20,
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)

Answer 7

这里有很多答案，但是我将在这里列出每个人都应该使用的最重要的答案。

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
            ]
        )

Answer 8

列默认情况下没有高度，您可以将列包装到容器中，然后将特定高度添加到容器中。然后，您可以使用类似以下的内容：

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

Answer 9

使用SizedBox above来实现代码可读性的方式相同，您可以以相同的方式使用Padding小部件，而不必使其成为Column的任何子级的父级小部件

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

Answer 10

您可以通过其他方式解决此问题。

如果使用行/列，则必须使用 mainAxisAlignment：   MainAxisAlignment.spaceEvenly

如果使用 Wrap 小部件，则必须使用 runSpacing：5，间距：   10，

您可以在任何地方使用 SizeBox（）

Answer 11

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

Answer 12

您可能必须在列的子级之间使用SizedBox（）小部件。希望会有用

Answer 13

您还可以使用帮助器功能在每个孩子之后添加间距。

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'),
    ],
  ),
);

我不确定是否要通过子功能帮助孩子达到相同目标是错误的还是会造成性能损失？

Answer 14

你可以试试这个：


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,
                  ])

Answer 15

在手机处于横向模式的情况下，大小框无济于事。

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),
            ),
          ),
        ),
      ],
     )

Answer 16

这是涉及 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.
        ])
  ],
),

Flutter中Column的子代之间的空间

16 个答案: