如何修复Flutter中Bottom Overflowed by 10 Pixels问题？

问题现象 #

仅当地址文本较长时出现布局溢出，短地址显示完全正常。

• 短地址正常显示效果：
  
• 长地址布局溢出效果：
  

相关代码 #

child: Column(
         mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                UserAvatarView(
                    urlPrefix: serverUrl,
                    url: null,
                    cornerRadius: 60,
                    size: 20),
               const SizedBox(width: 8),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      order.service.name,
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    Text(
                      "${(driverDistance / 1000).round()} KM away",
                      style: Theme.of(context).textTheme.labelMedium,
                    )
                  ],
                ),
                const Spacer(),
               Container(
                 padding:
                     const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  decoration: BoxDecoration(
                      color: CustomTheme.primaryColors.shade200,
                      borderRadius: BorderRadius.circular(12)),
                  child: Text(
                    NumberFormat.simpleCurrency(name: order.currency)
                        .format(order.costBest),
                    style: Theme.of(context).textTheme.headlineMedium,
                  ),
               )
              ],
            ),
            const Divider(),
            ...order.addresses.mapIndexed((e, index) {
              if (order.addresses.length > 2 &&
                  index > 0 &&
                  index != order.addresses.length - 1) {
                return const SizedBox(
                  width: 1,
                  height: 1,
                );
              }
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(0),
                        child: Icon(
                          getIconByIndex(index, order.addresses.length),
                          color: CustomTheme.neutralColors.shade500,
                        ),
                      ),
                      Expanded(
                        child: Text(e,
                            overflow: TextOverflow.visible,
                            style: Theme.of(context).textTheme.bodySmall),
                      ),
                      if (index == order.addresses.length - 1)
                        Text(
                            order.durationBest == 0
                                ? ""
                                : durationToString(
                                    Duration(seconds: order.durationBest)),
                            style: Theme.of(context).textTheme.bodySmall)
                    ],
                  ).pOnly(right: 0),
                  if (index < order.addresses.length - 1)
                    DottedLine(
                            direction: Axis.vertical,
                            lineLength: 25,
                            lineThickness: 3,
                            dashLength: 3,
                            dashColor: CustomTheme.neutralColors.shade500)
                        .pOnly(left: 10)
                ],
              );
            }).toList(),
            const Spacer(),
            Row(
                children: order.options
                    .map((e) => OrderPreferenceTagView(
                          icon: e.icon,
                          name: e.name,
                        ))
                    .toList()),
            ElevatedButton(
                    onPressed: !isActionActive
                        ? null
                        : () => onAcceptCallback(order.id),
                    child: Row(
                      children: [
                        const Spacer(),
                        Text(S.of(context).available_order_action_accept),
                        const Spacer()
                      ],
                    ).p4())
                .p4()
          ],
        ),

修复方案 #

问题根源 #

地址文本的Text组件设置了overflow: TextOverflow.visible，文本超出容器时不会做任何截断或换行处理，直接溢出布局；同时右侧的时长文本未做空间限制，会挤压地址文本的显示空间，加剧溢出问题。

具体修改 #

1. 调整地址文本的溢出与换行设置
   将地址Text的属性修改为允许换行、限制行数并添加溢出截断：

Expanded(
  child: Text(e,
      overflow: TextOverflow.ellipsis,
      maxLines: 2,
      softWrap: true,
      style: Theme.of(context).textTheme.bodySmall),
),

2. 给右侧时长文本添加空间限制
   用Flexible包裹时长文本，避免它抢占地址文本的显示空间：

if (index == order.addresses.length - 1)
  Flexible(
    child: Text(
        order.durationBest == 0
            ? ""
            : durationToString(
                Duration(seconds: order.durationBest)),
        style: Theme.of(context).textTheme.bodySmall,
        textAlign: TextAlign.end),
  )

内容的提问来源于stack exchange，提问作者Ahmed AlNeaimy