Flutter中Stack嵌套Container定位时的高度异常问题求助

问题根源 #

你当前的Stack布局中，第一个未使用Positioned的Container设置了固定高度10px，导致Stack的整体尺寸被限制为10px高度，后续Positioned的内容容器虽然能超出这个范围，但Stack本身高度不足会导致布局显示异常。

修改方案 #

调整Stack子组件的顺序和定位逻辑，让内容容器决定Stack的高度，彩色底部条作为定位组件贴在底部：

class NotificationItemWidget extends StatelessWidget {
  final String imageUrl;
  final int seen;
  final String message;
  final String displayTime;
  final int notificationId;
  final NotificationType type;

  const NotificationItemWidget(
      {super.key,
      required this.imageUrl,
      required this.message,
      required this.type,
      required this.displayTime,
      required this.notificationId,
      required this.seen});

  @override
  Widget build(BuildContext context) {
    NotificationListViewModel viewModel =
        Provider.of<NotificationListViewModel>(context);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        InkWell(
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
          onTap: () {
            viewModel.navigateToRespectiveNotificationScreen(
                notificationId, type);
          },
          child: Stack(
            children: [
              // 内容容器：作为Stack的主组件，决定整体高度
              Container(
                padding: const EdgeInsets.all(12),
                width: double.infinity,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8),
                    boxShadow: const [
                      BoxShadow(
                        offset: Offset(0, -1),
                        blurRadius: 4,
                        color: Color.fromRGBO(0, 0, 0, 0.25),
                      )
                    ]),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 32,
                      height: 32,
                      decoration: BoxDecoration(
                          color: colorForItem(type), shape: BoxShape.circle),
                      child: Padding(
                        padding: const EdgeInsets.all(6),
                        child: Image.network(
                          imageUrl,
                          width: 20,
                          height: 20,
                          alignment: Alignment.center,
                          fit: BoxFit.contain,
                        ),
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                        child: Text(message,
                            style: Theme.of(context)
                                .textTheme
                                .headlineMedium
                                ?.copyWith(
                                    fontWeight: FontWeight.w600,
                                    fontSize: 14,
                                    color: seen == 0
                                        ? ColorsManager.blackColor
                                        : ColorsManager.textGray)))
                  ],
                ),
              ),
              // 彩色底部条：定位在Stack底部，仅显示底部圆角区域
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: Container(
                  height: 10,
                  decoration: BoxDecoration(
                    color: colorForItem(type),
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(8),
                      bottomRight: Radius.circular(8),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(right: 6, top: 6),
          child: Text(displayTime,
              style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                  fontWeight: FontWeight.w500,
                  fontSize: 10,
                  color: ColorsManager.textGray)),
        ),
        const SizedBox(height: 20)
      ],
    );
  }

  Color colorForItem(NotificationType type) {
    switch (type) {
      case NotificationType.appointmentStatusApproved:
        return ColorsManager.parrotGreen;

      case NotificationType.appointmentStatusDeclined:
        return ColorsManager.russianRed;

      default:
        return ColorsManager.primaryVariant;
    }
  }
}

关键修改点 #

1. 调整Stack子组件顺序：将内容容器放在第一位（不使用Positioned），让它决定Stack的整体高度，适配动态内容。
2. 重新定位彩色条：使用Positioned将彩色容器固定在Stack底部，仅设置左右和底部定位，高度保留10px，同时只设置底部圆角，与内容容器的圆角对齐。
3. 移除多余偏移：删除原代码中Positioned的left: -1和right: -1，避免内容溢出布局范围。

这样修改后，内容容器会根据内部文本高度自动调整，彩色底部条始终贴在容器底部，完美匹配预期效果。

内容的提问来源于stack exchange，提问作者Naveen Kumar