如何在 flutter 中为行项目添加一些空间？答案

【问题标题】：How to add some space to row items in flutter?如何在 flutter 中为行项目添加一些空间？
【发布时间】：2023-02-02 21:54:38
【问题描述】：

我有一个屏幕，其中包含一个带有 3 个子列的行小部件。我想为第一个孩子添加一个空间，为第二个孩子添加另一个空间。一般来说，我想要这样的屏幕：

我尝试使用这些代码但无法正常工作。

Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Column(
                        children: [
                          item(),
                          item(),
                          item(),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 20),
                      child: Column(
                        children: [
                          item(),
                          item(),
                          item(),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 5),
                      child: Column(
                        children: [
                          item(),
                          item(),
                          item(),
                        ],
                      ),
                    ),
                  ),
                ],
              );

你能帮助我吗？

【问题讨论】：

标签： flutter

【解决方案1】：

给Row的孩子添加一个SizedBox，每个孩子都有不同的height。

【讨论】：

【解决方案2】：

您可以在项目之间添加一个SizedBox。喜欢：

              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(top: 5),
                  child: Column(
                    children: [
                      item(),
                      SizedBox(height:20),
                      item(),
                      SizedBox(height:20),
                      item(),
                    ],
                  ),
                ),
              ),

我认为这很简单，但是有效。您也可以在项目中使用带边距的 Container。

如果你想要更复杂的项目，你可以使用ListView.separated。

ListView.separated(
  separatorBuilder: (context, index) => Divider(
        color: Colors.black,
      ),
  itemCount: 20,
  itemBuilder: (context, index) => Padding(
        padding: EdgeInsets.all(8.0),
        child: Center(child: Text("Index $index")),
      ),
)

【讨论】：

我不想更改列中项目之间的空间，我想在列的顶部添加空间。

【解决方案3】：

我希望这会对你有所帮助，我只是用一些 Container() 修改了它。

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(top: 10),
            child: Column(
              children: [
                Container(
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
              ],
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(top: 20),
            child: Column(
              children: [
              //////here you have to add SizedBox widget with different heights
                const SizedBox(
                  height: 40,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
              ],
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(top: 5),
            child: Column(
              children: [
                Container(
                  color: Colors.red,
                  height: 50,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
              ],
            ),
          ),
        ),
      ],
    )

输出：

【讨论】：