SwiftUI下拉列表优化需求：展开不影响HStack布局并移至下方

针对你遇到的两个问题（HStack尺寸变化导致图标偏移、下拉列表位置错误），可以通过以下修改解决：

修改核心思路 #

• 固定触发控件的宽度，避免展开下拉时HStack尺寸波动
• 将下拉列表从HStack中移出，与触发控件垂直排列，确保下拉显示在控件正下方

修改后的完整代码 #

ZStack {
    VStack(alignment: .leading, spacing: 0) { // 改为带左对齐的VStack，包裹触发控件和下拉列表
        HStack(spacing: 0) {
            HStack {
                Text(filters[selectedFilter].name)
                    .foregroundColor(Color.black)
                    .font(.system(size: 25))
                Image(systemName: "chevron.right")
                    .aspectRatio(contentMode: .fit)
                    .font(.system(size: 25, weight: .none))
            }
            .padding(10)
            .frame(minWidth: 150) // 固定最小宽度，防止文本长度变化导致HStack尺寸改变
            .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 45.0))
            .onTapGesture {
                withAnimation(Animation.spring().speed(2)) {
                    showOptions.toggle()
                }
            }
        }
        
        if showOptions {
            VStack(alignment: .leading, spacing: 8) { // 下拉列表内部左对齐，增加间距提升可读性
                ForEach(filters.indices, id: \.self) { i in
                    Text(filters[i].name)
                        .font(.system(size: 25))
                        .padding(.vertical, 8)
                        .padding(.horizontal, 18)
                        .onTapGesture {
                            withAnimation(Animation.spring().speed(2)) {
                                showOptions.toggle()
                                selectedFilter = i
                            }
                        }
                }
            }
            .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 45.0))
            .padding(.top, 4) // 下拉列表与触发控件保持小间距
        }
    }
}

关键修改点说明 #

1. 固定触发控件宽度：给触发的HStack添加.frame(minWidth: 150)（可根据需求调整宽度值），确保无论选中的文本长度如何，控件宽度都固定，避免HStack尺寸变化导致图标偏移。
2. 调整布局结构：将下拉列表从原HStack中移出，与触发控件放在同一个外层VStack中，并设置alignment: .leading，让下拉列表与触发控件左对齐，确保显示在控件正下方。
3. 优化下拉列表交互：增加内部元素的间距和内边距，提升点击体验，同时保持动画一致性。

进阶优化（可选） #

如果需要下拉列表与触发控件完全同宽，可以通过GeometryReader获取触发控件的宽度并绑定到下拉列表：

// 先定义状态变量
@State private var triggerWidth: CGFloat = 0

// 修改触发控件部分
HStack {
    // ... 原有内容
}
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 45.0))
.readSize { size in
    triggerWidth = size.width
}

// 修改下拉列表部分
VStack(...) {
    // ... 原有内容
}
.frame(width: triggerWidth)

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