SwiftUI视图显式设置frame仍超出，如何限制视图不超设定尺寸？

问题描述 #

在SwiftUI中创建Banner视图后，已为其显式设置frame(width: 335, height: 180)，但视图高度仍被内容（尤其是第二张Banner的多行subtitle）撑开，超出了设定的Frame范围。

Banner视图代码 #

var body: some View {
    VStack {
        HStack(alignment: .top) {
            VStack {
                HStack {
                    Text(viewModel.badge)
                        .font(.footnote)
                        .padding([.bottom, .top], 3).padding([.leading, .trailing], 7)
                        .overlay(RoundedRectangle(cornerRadius: 15)
                                    .stroke(.white, lineWidth: 1))
                        .foregroundColor(.white)
                    Spacer()
                }
                HStack {
                    Text(viewModel.title)
                        .font(.title3)
                        .foregroundColor(.white)
                    Spacer()
                }
            }
            Image(viewModel.imageName)
                .resizable()
                .frame(width: 88, height: 88)
        }.padding(.bottom, 10)
        HStack {
            Text(viewModel.subtitle)
                .font(.caption)
                .foregroundColor(.white)
            Spacer()
        }
    }
    .padding(15)
    .background(ThemeManager.current.primaryCardBackgroundColor.color)
    .cornerRadius(9)
    .overlay(RoundedRectangle(cornerRadius: 9)
            .stroke(ThemeManager.current.primaryCardBackgroundColor.color, lineWidth: 0))
}

包含Banner的ScrollView代码 #

var body: some View {
    ScrollView {
        HStack(spacing: 16) {
            Banner(title: "Bla bla bla bla ",
                   text: "Bla bla bla bla Bla bla bla bla Bla bla bla bla .",
                   badge: "BEST",
                   image: Image("xxx"))
                .frame(width: 335, height: 180)
            Banner(title: "Bla bla bla bla ",
                   text: "Bla bla bla bla Bla bla bla bla Bla bla bla bla Bla bla bla bla Bla bla bla bla ",
                   badge: "Bla",
                   image: Image("banner-card"))
                .frame(width: 335, height: 180)
        }
        .padding()
        .frame(height: 180)
    }
}

解决方案 #

SwiftUI中默认的frame仅为视图提供建议尺寸，当内容尺寸超过frame时，视图会被内容撑开。要强制视图遵守设定的frame范围，可通过以下几种方式解决：

方法1：添加clipped()修饰符 #

在给Banner设置frame后添加clipped()，它会裁剪超出frame范围的内容，确保视图严格保持设定尺寸：

Banner(...)
    .frame(width: 335, height: 180)
    .clipped()

方法2：限制文本行数 #

如果不想裁剪内容，而是希望文本在frame内自动换行并限制行数，可以给subtitle的Text添加lineLimit，可选搭配minimumScaleFactor缩小字体适应空间：

Text(viewModel.subtitle)
    .font(.caption)
    .foregroundColor(.white)
    .lineLimit(2) // 限制最多显示2行
    .minimumScaleFactor(0.8) // 允许字体缩小至原大小的80%

方法3：从内部约束Banner尺寸 #

在Banner视图的根VStack上直接设置frame，并结合clipped，从内部约束视图尺寸，避免外部设置被内容覆盖：

var body: some View {
    VStack {
        // 原有内容保持不变
    }
    .frame(width: 335, height: 180) // 将frame移至根容器
    .padding(15)
    .background(ThemeManager.current.primaryCardBackgroundColor.color)
    .cornerRadius(9)
    .overlay(RoundedRectangle(cornerRadius: 9)
            .stroke(ThemeManager.current.primaryCardBackgroundColor.color, lineWidth: 0))
    .clipped()
}

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