Flutter Wrap 布局不会扩展到完整的可用宽度

Posted 2023-02-23

【中文标题】Flutter Wrap 布局不会扩展到完整的可用宽度

【英文标题】：Flutter Wrap layout doesn't expand to full available width

【发布时间】：2021-08-16 21:57:21

【问题描述】：

我正在创建一个动态列表，该列表创建了下图所示的布局。但是在较小的屏幕上，我在“已发布”文本和删除图标的行中出现像素溢出。为了解决这个问题，我将它们包装在 Wrap 小部件中，以便图标可以流动到新行。但是由于某种原因，Wrap 小部件没有扩展到完整的可用水平宽度。 我想定位“已发布”文本并删除中间带有Spacer() 的图标，或者只是spacebetween 的对齐方式，但我不能在Wrap 小部件中定位Spacer() 并且spaceBetween 对齐方式有无效，因为文本和图标之间没有可用空间。

SliverList(
  delegate: SliverChildListDelegate(
    [
      for (var i = 0; i < children.length; i++)
        Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 10.0, left: 20.0),
              child: Text(
                children[i].issuanceDate,
              ),
            ),
            Column(
              //vertical line with round dot
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10.0),
                child: Container(
                  padding: const EdgeInsets.symmetric(
                      vertical: 10.0, horizontal: 20.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(6),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: (Colors.grey[200])!,
                        offset: const Offset(0, 8),
                        blurRadius: 8,
                        spreadRadius: 1.0,
                      )
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Text(
                            children[i].credentialSubject.documentName,
                            style:
                                Theme.of(context).textTheme.bodyText1,
                          ),
                        ],
                      ),
                      Wrap(
                        alignment: WrapAlignment.spaceBetween,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        children: [ Text("$L.of(context).issued$children[i].issuanceDate",
                            style: Theme.of(context)
                                .textTheme
                                .bodyText2!
                                .copyWith(
                                    color: Theme.of(context)
                                        .colorScheme
                                        .onBackground
                                        .withOpacity(0.5)),
                            overflow: TextOverflow.ellipsis,
                            softWrap: true,
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.delete,
                              color: Theme.of(context).errorColor,
                            ),
                            onPressed: () => print("delete $i"),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        )
    ],
  ),
),

【问题讨论】：

是的，我的包裹效果很好。我现在在包装上方的列上添加了CrossAxisAlignment.stretch，现在我还在图标和文本之间获得了空间

【参考方案1】：

只需将列交叉轴对齐替换为拉伸：

...
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch, // !!!!!!! here
                    children: [
                      Row(
                        children: [
                          Text(
                            children[i].credentialSubject.documentName,
                            style:
                                Theme.of(context).textTheme.bodyText1,
                          ),
 ...