SwiftUI底部面板文本上移溢出问题解决咨询

问题描述 #

使用Sheet展示底部面板并设置presentationDetents，头部视图模仿Apple Maps信息卡片样式。已为头部设置顶部内边距，但文本过长换行时会逐渐上移，极端情况会从面板顶部溢出。排查发现问题由按钮的固定高度导致，移除按钮或取消固定高度后内容不再偏移。

问题代码示例 #

struct ContentView: View {
 
    @State var detent: PresentationDetent = .small

    var body: some View {
        VStack {
            self.headerView
            self.buttonView
            self.detailsListView
            Spacer()
        }
        .padding([.leading, .trailing, .top], 16.0)
        .background(Color.lightGray)
        .presentationDetents([.small, .large], selection: detent)
        .interactiveDismissDisabled(true)
        .presentationBackgroundInteraction(.enabled)
    }

    private var headerView: some View {
        HStack(alignment: .top) {
            Image(systemName: "pencil.circle").resizable().aspectRatio(contentMode: .fit).frame(width: 52.0, height: 52.0).padding(.leading, 5.0)

            VStack(alignment: .leading, spacing: 0) {
                Text("This is a very long title that wraps on next line.").font(.title2).bold().fixedSize(horizontal: false, vertical: true)
                if !subtitleText.isBlank {
                    Text("This is a very very very very very very very long subtitle that wraps on next line.").font(.subheadline).foregroundColor(Color.systemLightSecondary).fixedSize(horizontal: false, vertical: true)
                }
            }.padding(.leading, 2.0)
            Spacer()
            HStack {
                Image(systemName: "x.circle").resizable().frame(width: 25, height: 23).foregroundColor(Color.gray).padding(.leading, 3.0).padding(.top, 0.0)
            }
        }
        .padding(.top, 7.0)
        .padding(.bottom, viewModel.hideButton ? 3.0 : 8.0)
    }

    private var buttonView: some View {
        Button { buttonAction() } label: {
            HStack(alignment: .center, spacing: 10) {
                Spacer()
                VStack {
                    Image(systemName:"figure.walk").font(.caption.bold()).foregroundColor(Color.white).padding(.top, 13.0)
                    Text("Directions").font(.body.bold()).foregroundColor(Color.white).padding(.bottom, 13.0)
                }
                Spacer()
            }.frame(maxWidth: .infinity)
            .padding(.horizontal, 20)
            .frame(width: UIScreen.main.bounds.width - 60.0, height: 60, alignment: .center)
            .background(Color.blue)
            .foregroundColor(Color.white)
            .font(.headline)
            .cornerRadius(10)
        }
    }

    private var detailsListView: some View {
        // List with additional details
        Text("Additional details")
    }
}

问题截图 #

• 异常状态（文本溢出顶部）：
  
• 预期效果（文本保持在顶部内边距内）：
  

解决方案 #

核心原因 #

按钮的固定高度height: 60强制布局系统为其预留固定空间，当面板处于小尺寸detent时，布局空间不足，系统会挤压头部区域的空间，导致文本向上偏移甚至溢出。

修改步骤 #

1. 移除按钮的固定高度，改用内边距控制尺寸
   去掉按钮的height: 60约束，通过调整垂直内边距保持按钮视觉高度一致，让按钮高度自适应布局空间。

2. 给头部视图设置布局优先级
   为headerView添加.layoutPriority(1)，确保布局系统优先分配头部所需空间，避免被其他元素挤压。

3. 优化外层VStack的对齐方式
   给外层VStack设置alignment: .leading，确保内容从上到下的布局一致性，进一步避免偏移。

修改后的代码 #

struct ContentView: View {
 
    @State var detent: PresentationDetent = .small

    var body: some View {
        VStack(alignment: .leading) { // 添加leading对齐
            self.headerView
                .layoutPriority(1) // 设置头部布局优先级
            self.buttonView
            self.detailsListView
            Spacer()
        }
        .padding([.leading, .trailing, .top], 16.0)
        .background(Color.lightGray)
        .presentationDetents([.small, .large], selection: detent)
        .interactiveDismissDisabled(true)
        .presentationBackgroundInteraction(.enabled)
    }

    private var headerView: some View {
        HStack(alignment: .top) {
            Image(systemName: "pencil.circle").resizable().aspectRatio(contentMode: .fit).frame(width: 52.0, height: 52.0).padding(.leading, 5.0)

            VStack(alignment: .leading, spacing: 0) {
                Text("This is a very long title that wraps on next line.").font(.title2).bold().fixedSize(horizontal: false, vertical: true)
                if !subtitleText.isBlank {
                    Text("This is a very very very very very very very long subtitle that wraps on next line.").font(.subheadline).foregroundColor(Color.systemLightSecondary).fixedSize(horizontal: false, vertical: true)
                }
            }.padding(.leading, 2.0)
            Spacer()
            HStack {
                Image(systemName: "x.circle").resizable().frame(width: 25, height: 23).foregroundColor(Color.gray).padding(.leading, 3.0).padding(.top, 0.0)
            }
        }
        .padding(.top, 7.0)
        .padding(.bottom, viewModel.hideButton ? 3.0 : 8.0)
    }

    private var buttonView: some View {
        Button { buttonAction() } label: {
            HStack(alignment: .center, spacing: 10) {
                Spacer()
                VStack {
                    Image(systemName:"figure.walk").font(.caption.bold()).foregroundColor(Color.white).padding(.top, 13.0)
                    Text("Directions").font(.body.bold()).foregroundColor(Color.white).padding(.bottom, 13.0)
                }
                Spacer()
            }.frame(maxWidth: .infinity)
            .padding(.horizontal, 20)
            .padding(.vertical, 15) // 用vertical padding替代固定height
            .frame(width: UIScreen.main.bounds.width - 60.0, alignment: .center) // 移除height约束
            .background(Color.blue)
            .foregroundColor(Color.white)
            .font(.headline)
            .cornerRadius(10)
        }
    }

    private var detailsListView: some View {
        Text("Additional details")
    }
}

补充说明 #

如果需要严格保证按钮高度，可将按钮嵌套在ScrollView中，但优先推荐上述自适应布局方案，既能保证视觉一致性，又能适配不同detent尺寸下的布局空间。

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