如何在flutter中给行项增加一些空间？

oknwwptz 于 2023-02-05 发布在 Flutter

关注(0)|答案(3)|浏览(156)

我有一个屏幕，其中包含一个行小部件，该小部件有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

来源：https://stackoverflow.com/questions/75323894/how-to-add-some-space-to-row-items-in-flutter

3条答案

按热度按时间

pw9qyyiw1#

将SizedBox添加到Row的子级，每个子级具有不同的height。

赞(0）回复(0）举报 2023-02-05

zynd9foi2#

我希望这将帮助你，我只是修改了一些容器（）。

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

输出：

赞(0）回复(0）举报 2023-02-05

atmip9wb3#

您可以在项目之间添加一个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")),
      ),
)

赞(0）回复(0）举报 2023-02-05

我来回答

如何在flutter中给行项增加一些空间？

3条答案

相关问题

热门标签

最新问答