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
相关产品推荐
相关产品推荐

