如何在顫動中洗掉串列最后一個元素的填充？

需要代碼方面的幫助。我需要實作一個按鈕串列。在每個按鈕之間留出 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)),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),

這就是我現在所擁有的

最后我需要這個

uj5u.com熱心網友回復：

試試這個：

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

uj5u.com熱心網友回復：

您可以對右側的 Padding 執行的操作是：不要為 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 或 Flexible Widget，如果您的文本達到第一個的最大寬度，它將破壞角色，否則我看不到它是如何做到的，除非您根據傳遞給 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（查看檔案中的這些小部件）作為文本的父級，以便它可以轉到下一行。

標籤：扑 镖 颤振布局

上一篇：“Null”不能分配給“Position”型別的變數

下一篇：在顫動中保存兩個用戶聊天時出錯