如何在 flutter 中删除列表最后一个元素的填充？

Question

需要代码方面的帮助。我需要实现一个按钮列表。每个按钮之间的距离为 24 像素。下面我附上了我目前所拥有的以及我需要得到的最终结果的截图。因此，为了设置元素之间的间距，我使用 Padding right。但正因为如此，我在右边的最后一个元素中也有一个缩进。我需要删除它。文本的第二个问题，你可以看到一个元素下有非常小的文本，我怎样才能使文本大小正常但同时元素之间的距离不会改变，否则如果我设置正常的文字大小现在在那个地方，我距离为文字会有所不同吗？

代码

SizedBox(
                  height: 70,
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: connectors.length,
                    itemBuilder: (context, index) => Padding(
                      padding: const EdgeInsets.only(right: 24),
                      child: Column(
                        children: [
                          Container(
                            width: 47,
                            height: 47,
                            decoration: BoxDecoration(
                              color: constants.Colors.white.withOpacity(0.15),
                              borderRadius: BorderRadius.circular(18),
                              border: Border.all(
                                  color: constants.Colors.greyDark, width: 0.5),
                            ),
                            alignment: Alignment.center,
                            child: SvgPicture.asset(
                              connectors.keys.elementAt(index),
                              color: constants.Colors.greyConnector,
                            ),
                          ),
                          const SizedBox(height: 4),
                          SizedBox(
                            width: 47,
                            child: FittedBox(
                              fit: BoxFit.scaleDown,
                              child: Text(
                                connectors.values.elementAt(index),
                                style: constants
                                    .Styles.smallerHeavyTextStyleWhite
                                    .copyWith(
                                        color: Colors.white.withOpacity(0.5)),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),

这就是我现在拥有的

最后我需要这个

Answer 1

试试这个：

 padding: EdgeInsets.only(right: index == connectors.length - 1 ? 0 : 24),

Answer 2

你可以对右侧的填充做些什么：不要为 ListView 中的每个项目提供填充，而是将你的：

Column(
    children: [
        Container(
            width: 47,
            height: 47,
            decoration: BoxDecoration(
                color: constants.Colors.white.withOpacity(0.15),
                borderRadius: BorderRadius.circular(18),
                border: Border.all(
                color: constants.Colors.greyDark, width: 0.5),
            ),
            alignment: Alignment.center,
            child: SvgPicture.asset(
                connectors.keys.elementAt(index),
                color: constants.Colors.greyConnector,
            ),
        ),
        const SizedBox(height: 4),
        SizedBox(
            width: 47,
            child: FittedBox(
                fit: BoxFit.scaleDown,
                child: Text(
                    connectors.values.elementAt(index),
                    style: constants
                        .Styles.smallerHeavyTextStyleWhite
                        .copyWith(
                            color: Colors.white.withOpacity(0.5)),
                        ),
                ),
            ),
        ),
    ],
),

在 Row 中并检查，如果它不是列表的最后一项，则添加宽度为：24 的 SizedBox，如果确实是最后一项，只需添加 Container 像这样：

Row(children: [
    yourWidget(),
    index != connectors.length - 1 ? SizedBox(width: 24) : Container()
])

关于第二个问题：

我建议你使用Expanded或FlexibleWidget作为文本，如果你的文本达到第一个的最大宽度，它会破坏作用，否则我看不到除非您根据要传递给 ListView 的项目的索引提供自定义大小，否则无法完成，例如：

SizedBox(
    width: isIndexOfChaDeMo ? customWidth : 47,
    child: FittedBox(
        fit: BoxFit.scaleDown,
        child: Text(
            connectors.values.elementAt(index),
            style: constants
                .Styles.smallerHeavyTextStyleWhite
                .copyWith(
                    color: Colors.white.withOpacity(0.5)),
                ),
        )
    )
)

您还需要自定义传递给该项目左右两侧的“填充”，所有这些都会改变，以防您将来需要翻译您的应用程序，例如，这就是为什么我建议您使用 Expanded 或 Flexible（查看文档中的这些小部件）作为文本的父级，以便它可以转到下一行。

如何在 flutter 中删除列表最后一个元素的填充？

How to remove padding on the last element of a list in flutter?

flutter

dart

flutter-layout