SwiftUI中ScrollView短文本元素置顶问题的解决方案咨询

需求描述 #

需要在SwiftUI视图中实现以下布局：

• 顶部始终显示一张图片，图片下方是可垂直滚动的文本（文本长度不固定）
• 文本较短时：图片与文本整体垂直居中显示
• 文本较长时：图片固定在屏幕顶部，下方文本可滚动以充分利用空间

当前问题 #

使用ScrollView包裹文本后，即使文本很短，整个内容会被推到屏幕顶部，无法实现短文本时的居中效果。

原代码 #

struct ContentView: View {
    let longText: String = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    
    let shortText: String = "This is short text"
    
    var body: some View {
        VStack {
            Image(systemName: "photo").resizable().aspectRatio(contentMode: .fit).frame(width: 30, height: 20)

    /// Note: This shows both elements image and text in the center of the view.
//            Text(shortText).font(.body)
//                .foregroundStyle(Color.primary)
//                .multilineTextAlignment(.center)
//                .padding(.top, 20.0)
//                .padding([.leading, .trailing], 25.0)
            
    /// Note: Scrollview pushes the image and text on top.
            ScrollView(showsIndicators: false) {
                Text(shortText).font(.body)
                    .foregroundStyle(Color.primary)
                    .multilineTextAlignment(.center)
                    .padding(.top, 20.0)
                    .padding([.leading, .trailing], 25.0)
            }
        }
        .padding(.top, 20.0)
    }
}

效果说明 #

• 预期短文本效果：图片与短文本整体位于屏幕垂直中心位置
• 当前问题效果：图片与短文本被强制顶到屏幕顶部
• 预期长文本效果：图片固定在屏幕顶部，下方文本可自由滚动

解决方案 #

通过调整视图的frame和内部Spacer来实现动态布局，修改后的代码如下：

struct ContentView: View {
    let longText: String = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    
    let shortText: String = "This is short text"
    
    var body: some View {
        VStack {
            Image(systemName: "photo")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 30, height: 20)
            
            ScrollView(showsIndicators: false) {
                VStack {
                    Text(shortText) // 替换为longText可测试长文本效果
                        .font(.body)
                        .foregroundStyle(Color.primary)
                        .multilineTextAlignment(.center)
                        .padding(.top, 20.0)
                        .padding([.leading, .trailing], 25.0)
                    
                    // 底部占位Spacer，短文本时扩展将内容推至居中，长文本时自动压缩
                    Spacer(minLength: 0)
                }
                .frame(maxWidth: .infinity)
            }
            .frame(maxHeight: .infinity) // 让ScrollView占据图片下方的所有剩余空间
        }
        .padding(.top, 20.0)
        .frame(maxWidth: .infinity, maxHeight: .infinity) // 根视图撑满整个屏幕
    }
}

原理说明 #

1. 根VStack设置全屏frame：确保整个视图占据屏幕所有可用空间，为居中布局提供基础
2. ScrollView撑满剩余空间：通过frame(maxHeight: .infinity)让ScrollView占据图片下方的全部区域
3. 内部Spacer动态调整：短文本时，Spacer会自动扩展，将文本与图片一起推到屏幕垂直中心；长文本时，Spacer被压缩到最小长度，不影响文本滚动，同时图片保持在顶部

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