无法将图标移动到 Card Flutter 的末尾

Question

我们需要将图标移动到卡片的末尾，并且它们之间的距离为 17px。我尝试了不同的方式并对齐，但由于某种原因我无法将图标移动到最后。如果您能告诉我正确的做法，我将不胜感激。

Scrollbar(
          isAlwaysShown: true,
          thickness: 2,
          scrollbarOrientation: ScrollbarOrientation.left,
          child: ListView.builder(
            itemCount: close.length,
            itemBuilder: (context, index) => Padding(
              padding: const EdgeInsets.only(left: 9),
              child: SizedBox(
                height: 47,
                child: Card(
                  color: constants.Colors.greyMiddle,
                  margin: const EdgeInsets.only(
                    bottom: 4,
                  ),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8)),
                  child: Padding(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 9, vertical: 5),
                    child: Row(
                      // mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        const CircleAvatar(
                          backgroundColor: constants.Colors.white,
                        ),
                        const SizedBox(
                          width: 11,
                        ),
                        Text(
                          close[index],
                          style: constants.Styles.smallerLtStdTextStyleWhite,
                        ),
                        IconButton(
                            onPressed: () {},
                            icon: SvgPicture.asset(constants.Assets.barPoynts)),
                        IconButton(
                            onPressed: () {},
                            icon: SvgPicture.asset(constants.Assets.crypto)),
                        IconButton(
                            onPressed: () {},
                            icon: SvgPicture.asset(
                                constants.Assets.barFavourites)),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),

Answer 1

您可以尝试在 IconButtons 之前放置一个 Spacer()。好喜欢

                  children: [
                    const CircleAvatar(
                      backgroundColor: constants.Colors.white,
                    ),
                    const SizedBox(
                      width: 11,
                    ),
                    Text(
                      close[index],
                      style: constants.Styles.smallerLtStdTextStyleWhite,
                    ),
                    const Spacer(),
                    IconButton(
                        onPressed: () {},
                        icon: SvgPicture.asset(constants.Assets.barPoynts)),
                    IconButton(
                        onPressed: () {},
                        icon: SvgPicture.asset(constants.Assets.crypto)),
                    IconButton(
                        onPressed: () {},
                        icon: SvgPicture.asset(
                            constants.Assets.barFavourites)),
                  ],

垫片总是尽可能多地 space

Answer 2

{Text(close[index],
    style: constants.Styles.smallerLtStdTextStyleWhite,
                    ),}

在此之后，写入

Expanded(child:Container()),

然后是图标。它将使 space 个容器在行中有空白区域。

Answer 3

你应该用 Expanded 小部件包装你的 Text 小部件，它将 max-width 分配给你的文本，所以如果你的文本长度变大，它会把它包装在一个新的行。

Expanded(
  child: Text(
    close[index],
    style: constants.Styles.smallerLtStdTextStyleWhite,
  ),
),

输出：

如果您按照其他答案仅使用 Spacer 小部件（这将完成工作），但如果您的文本长度变长，则会导致溢出错误。

如下所示：

也不要同时使用 Spacer 和 Expanded，因为 Expanded 的默认 flex 和 Spacer 的默认 flex 设置为 1，flutter 将分配等量的 [=41] =]，这将再次给您带来问题。

例如：

无法将图标移动到 Card Flutter 的末尾

Can't move icons to end of Card Flutter

flutter

dart

flutter-layout