이미지 및 텍스트가있는 SwiftUI 양식 선택기

Dec 09 2020

이 코드로 선택기에서 값을 선택하는 옵션을 제공하는 내 앱에 설정보기가 있습니다.

var body: some View {
    NavigationView {
        Form {
            Section(header: Text("Widget Settings")) {
                Picker(selection: $chosenMediumType, label: Text("Medium Widget"), content: { VStack { Image(uiImage: UIImage(systemName: "sun.min")!).resizable().frame(width: 20, height: 20, alignment: .center) Text("Sun") }.tag(0) VStack { Image(uiImage: UIImage(systemName: "sunset")!).resizable().frame(width: 20, height: 20, alignment: .center) Text("Sunset") }.tag(1) VStack { Image(uiImage: UIImage(systemName: "moon")!).resizable().frame(width: 20, height: 20, alignment: .center) Text("Moon") }.tag(2) }) .onChange(of: chosenMediumType) { print("Selected tag: \($0)") }
            }
        }
        .navigationBarTitle("Settings")
    }
}

선택기 행을 클릭하면 선택기 페이지가 열리고 이미지와 텍스트가있는 각 행을 볼 수 있지만 설정에서는 표시된 이미지와 같이 행을 더 크게 만듭니다.

설정 페이지에서만 텍스트를 사용하고 선택기보기에서 이미지 + 텍스트를 사용할 수 있습니까?

답변

OguzYuksel Dec 13 2020 at 19:29

보고 난 그냥 당신이 그것을 할 수있는 방법을 보여주고 싶었다,

전체 피커를 숨기면 피커가없는 상태로 유지되고 HStack을 오버레이하고 스택 내부에서 스위치 케이스를 만들거나 원하는 경우

struct ContentView: View {

@State private var chosenMediumType = 0

var body: some View {
    NavigationView {
        Form {
            Section(header: Text("Widget Settings")) {
                Picker(selection: $chosenMediumType, label: Text("")
                       , content: {
                    VStack {
                        Image(uiImage: UIImage(systemName: "sun.min")!).resizable().frame(width: 20, height: 20, alignment: .center)
                        Text("Sun")
                    }.tag(0)
                    VStack {
                        Image(uiImage: UIImage(systemName: "sunset")!).resizable().frame(width: 20, height: 20, alignment: .center)
                        Text("Sunset")
                    }.tag(1)
                    VStack {
                        Image(uiImage: UIImage(systemName: "moon")!).resizable().frame(width: 20, height: 20, alignment: .center)
                        Text("Moon")
                    }.tag(2)
                       })
                    .hidden()
                    .overlay(
                        HStack(alignment: .center, spacing: nil, content: {
                            
                            Text("Medium Widget")
                            
                            Spacer()
                            
                            switch chosenMediumType {
                            case 1:
                            Text("Sunset")
                                .foregroundColor(.gray)
                            case 2:
                                Text("Moon")
                                    .foregroundColor(.gray)
                            default:
                                Text("Sun")
                                    .foregroundColor(.gray)
                            }
                        })
                    )
                    .frame(height: 30)
                

            }
        }
        .navigationBarTitle("Settings")
    }
}
    }