SwiftUI Picker下拉框尺寸调整与显示优化问题求助

针对你遇到的三个问题，以下是具体的解决方案及修改后的完整代码：

优化点说明 #

• 调整选项为升序：显式对年龄范围进行升序排序，确保选项从4到99依次排列
• 增大iPad下拉选项尺寸：自定义选项文字的字体大小，提升视觉效果
• 限制下拉框显示7个选项：通过固定高度的ScrollView包裹Picker，超出部分滚动查看

修改后的完整代码 #

import SwiftUI
struct AgeSelect: View {
    let consent: Bool
    let stroopOrFlanker: Bool // Flanker = true  Stroop = false
    @State private var age: Int = 0
    @State private var stroop = false
    @State private var flanker = false
    
    var body: some View {
        ZStack{
            Color.white.ignoresSafeArea(.all) // 修复原代码中的无效链接错误
            VStack {
                Text("Select your age :")
                    .font(.custom("GlacialIndifference-Bold", size: 80))
                    .padding()
                    .foregroundColor(.black)
                    .offset(y:-70)
                
                Menu {
                    // 固定高度的ScrollView，限制仅显示7个选项
                    ScrollView {
                        Picker("Age", selection: $age) {
                            // 显式排序确保升序，同时放大选项文字
                            ForEach((4..<100).sorted(), id: \.self) { ageNum in
                                Text("\(ageNum) years old")
                                    .font(.system(size: 30)) // 增大选项文字尺寸
                            }
                        }
                    }
                    .frame(height: 350) // 适配7个选项的高度，可根据字体大小调整
                    
                } label: {
                    HStack {
                        Text("\(age) years old")
                            .font(.system(size: 50))
                        
                        Image(systemName: "chevron.up.chevron.down")
                            .font(.system(size: 40))
                    }
                }
                .padding(.horizontal, 20) // 可选：增大菜单按钮的点击区域
                
                Button(action: {
                    setStroopFlanker()
                    // add age to database here MUST add 4 to age to record correctly
                }) {
                    Text("Confirm")
                        .font(.custom("GlacialIndifference-Bold", size: 60))
                        .padding()
                        .foregroundColor(.white)
                        .background(.purple)
                        .cornerRadius(10)
                }
                .offset(y: 100)
                .fullScreenCover(isPresented: $flanker) {
                    let Psaver = ParticipantSaver(experimentID: 1, versionID: 0, isMultilingual: 0, participantTbl: nil, age: age)
                    let _ = Psaver.insert()
                    if age <= 8 {
                        FriendlyCognitive.flanker(consent: consent, isChildVersion: true)
                    } else {
                        FriendlyCognitive.flanker(consent: consent, isChildVersion: false)
                    }
                }
                .fullScreenCover(isPresented: $stroop){
                    Stroop(consent: consent)
                }
            }
        }
    }
        
    func setStroopFlanker(){
        if stroopOrFlanker == true{
            flanker = true
        }
        else {
            stroop = true
        }
    }
}

关键修改细节 #

1. 修复代码错误：移除了原代码中Color.white.ignoresSafeArea(.all)后面的无效链接代码，避免编译失败。
2. 升序保障：使用(4..<100).sorted()显式生成升序序列，确保选项从低到高排列。
3. 视觉优化：给Picker内的选项文字设置.font(.system(size: 30))，解决iPad端选项尺寸过小的问题。
4. 滚动限制：用固定高度的ScrollView包裹Picker，通过.frame(height: 350)控制显示7个选项，超出部分自动滚动。

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