SwiftUI浮动下拉列表：保持高度同时实现内容滚动

修改后的完整代码 #

import SwiftUI

struct ContentViewA: View {
    @State var showDropdown: Bool = false
    let optionsData: [String] = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6", "Option 7", "Option 8", "Option 9", "Option 10"]
    
    // 定义下拉菜单的最大高度，可根据需求调整比例
    private let maxDropdownHeight = UIScreen.main.bounds.height * 0.4
    
    var body: some View {
        VStack {
            Spacer()
            Button {
                showDropdown.toggle()
            } label: {
                Text("Tap Me")
            }
            .padding(.trailing, 10.0)
            .overlay(dropDownView.offset(y: 55), alignment: .topLeading)
            .zIndex(10)
            Spacer()
        }
    }
    
    var dropDownView: some View {
        ZStack {
            if showDropdown {
                ScrollView {
                    LazyVStack {
                        ForEach(optionsData, id: \.self) { data in
                            showDataList(data)
                        }
                    }
                    .padding(.vertical, 8) // 给列表加内边距，优化视觉
                }
                .frame(width: UIScreen.main.bounds.width/2, maxHeight: maxDropdownHeight)
                .background(RoundedRectangle(cornerRadius: 8.0).foregroundColor(.gray.opacity(0.25)).shadow(radius: 4))
            }
        }
    }
    
    private func showDataList(_ data: String) -> some View {
        VStack {
            Text(data)
                .padding(.vertical, 12) // 增加选项的点击区域高度
                .onTapGesture {
                    showDropdown.toggle()
                }
            Divider()
        }
        .padding(.horizontal, 16) // 给选项加水平内边距
    }
}

关键修改说明 #

• 设置ScrollView最大高度：通过maxHeight: maxDropdownHeight限制菜单的最大高度，当列表内容超过这个高度时自动启用滚动；内容较少时，菜单高度会自适应内容，不会出现过度缩小的情况。
• 移除冗余Spacer：删除了原代码中LazyVStack上方的Spacer，避免不必要的布局拉伸，让菜单高度完全由内容和最大高度限制决定。
• 优化内边距：给列表和选项添加了适当的内边距，提升交互体验和视觉美观度。
• 调整背景层级：将背景视图直接应用在ScrollView上，确保背景高度与滚动区域高度完全匹配。

额外提示 #

如果需要更灵活的高度控制，可以把maxDropdownHeight改成可动态调整的变量，或者根据父视图的尺寸计算，而不是固定基于屏幕高度。另外，也可以用GeometryReader获取父容器的可用空间，进一步优化布局适配。

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