在行内的小部件之间显示等间距 - Flutter

Question

下面是我创建的用于在 flutter 应用程序中创建小部件的构建器方法：

Widget _buildParkingAndNagarSection(String title, Color colorBackground,
  double marginBox) {
return Expanded(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          padding: EdgeInsets.only(top: 20, left: 20),
          width: 153.5.w,
          height: 114.h,
          decoration: BoxDecoration(
              color: colorBackground,
              shape: BoxShape.rectangle,
              border: Border.all(
                  color: Color(0xFFF1F1F1),
                  width: 1.h
              ),
              borderRadius: BorderRadius.all(Radius.circular(10))),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Image.asset(ic_bottom_home,
                  width: 44.w, height: 33.75.h, fit: BoxFit.fill),
              SizedBox(
                height: 20,
                width: 0,
              ),
              Text(
                title,
                style: TextStyle(
                    fontFamily: "Poppins",
                    fontSize: 14.sp,
                    color: Color(0xFF27303E)),
                softWrap: true,
                overflow: TextOverflow.fade,
              )
            ],
          ),
        )
      ],
    ));

在 Row 中调用如下：

Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildParkingAndNagarSection(
              Localization
                  .of(context)
                  .labelSaveParking,
              Color(0xFFE7F8FF), 20),
          _buildParkingAndNagarSection(
              Localization
                  .of(context)
                  .labelNavigateNagar,
              Color(0xFFFFE7EB), 10),
        ],
      ),

但是我所取得的成就如下：

您可以看到两个盒子之间的空间几乎没有了。我希望它们在左侧和右侧一样相等。

如何？谢谢。

Answer 1

您可以在行中使用以下

 mainAxisAlignment: MainAxisAlignment.spaceEvenly

此外，如果您遇到任何问题，请检查您在该小部件中应用的填充和边距。

Answer 2

_buildParkingAndNagarSection

此方法返回一个扩展的小部件。因此，如果您连续添加 2 个项目，它将填满整个空间。 mainAxisAlignment 将不会因此而发生任何变化。从中删除展开的小部件，它应该按预期均匀分布

Answer 3

这是您问题的解决方案

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: const Text(
        'Button One',
        style: TextStyle(fontSize: 24),
      ),
    ),
    ElevatedButton(
      onPressed: () {},
      child: const Text(
        'Button Two',
        style: TextStyle(fontSize: 24),
      ),
    ),
    
  ],
)

Answer 4

从 Flutter 3.27 开始，您可以使用

spacing

小部件中的

Row

属性轻松地在其子级之间添加统一的间距。这样就无需手动添加多个

SizedBox

小部件，使您的布局更干净、更简洁。

这是一个例子：

Row(
  spacing: 10, // <-- Add uniform spacing between children
  children: <Widget>[
    Icon(Icons.home),
    Icon(Icons.star),
    Icon(Icons.settings),
  ],
)

Row spacing

的好处：

1. 简洁干净：减少用于添加间距的样板代码。
2. 一致：确保所有子项之间的间距均匀。
3. 轻量级：直接集成到

   Row

   小部件中，无需额外的小部件。

如果您使用的是 Flutter 3.27 或更高版本，这是推荐的方法。对于早期版本，您需要

SizedBox

或

Spacer

等替代方案。