You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI中如何让单行/多行文本的单元格高度间距一致

解决方案

问题出在favCell中的Text组件高度不固定,单行文本时高度小于多行,导致整个单元格高度不一致。只需修改favCell里的Text部分,让它强制占据至少两行文本的高度,就能让所有单元格高度统一。

具体修改代码如下:

@ViewBuilder func favCell(item: AllMenu, index: Int) -> some View {
VStack(spacing: 10) {
    VStack(spacing: 0) {
        ZStack {
            RoundedRectangle(cornerRadius: 15)
                .fill(Color.Neumorphic.main)
                .softOuterShadow()
                .frame(width: 65, height: 65)
            URLImageView(url: item.icon ?? "", width: 25, height: 25, renderingMode: .template, tintColor: .appGreen)
                .frame(width: 25, height: 25)
        }
        .frame(width: 65, height: 65)
    }
    
    Text(item.title ?? "")
        .font(.calibriRegular(with: 13))
        .foregroundColor(.black)
        .lineLimit(2)
        .multilineTextAlignment(.center)
        .frame(width: 70, minHeight: 40) // 新增minHeight,让单行文本也占够两行高度
        // 移除多余的.fixedSize属性,已设置固定宽度无需自适应
        .padding(.horizontal, 4)
        .padding(.bottom, 10)
    
}
// 可选:若需要绝对统一的单元格高度,给外层VStack固定高度
// .frame(height: 125)
}

修改说明:

  • 给Text添加minHeight属性(数值可根据字体大小微调,13号字体两行文本高度约为40),确保单行文本也会占据至少两行的高度,让所有单元格的文本区域高度一致。
  • 移除fixedSize(horizontal: true, vertical: false),因为已给Text设置固定宽度70,该属性会干扰换行布局。

如果希望整个单元格高度完全一致,还可以给最外层VStack添加固定height,数值根据图标高度+间距+文本高度+内边距计算即可。

内容的提问来源于stack exchange,提问作者Swift

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 04:46:15