swift uiのpickerで選択肢の色を変える方法

Question

swift uiでpickerを使いユーザーに選択肢の中から一つを選んで貰うコードを書いています。

選択中の選択肢や矢印の色を黒くしたいのですが初期の青から変えられません。foregroundcolorやcolorなど色々試してみたのですが全部効果はありませんでした。

下記の写真の選択肢の青い部分の色を変える方法を教えて頂けると幸いです。（出来れば隣の上下矢印も消したいです。）

よろしくお願いします

 @State var select1 = 0
 @State var position = ["投","捕","一","二","三","遊","左","中","右"]
 @State var name1 = ""
 @FocusState  var isActive:Bool

HStack{
                            Text("1")
                            Picker(selection:$select1, label:Text("ポジション")){
                                ForEach(0..<position.count,id: \.self){index in
                                    Text(position[index])
                                }
                            }.foregroundColor(.black)
                            TextField("選手",text: $name1)
                                .multilineTextAlignment(.center)
                                .textFieldStyle(RoundedBorderTextFieldStyle())
                                .focused($isActive)
                        }.toolbar {  // VStackに指定
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()         // 右寄せにする
                        Button("閉じる") {
                            isActive = false  //  フォーカスを外す
                        }
                    }
                }.padding(.vertical,25).background(Color.gray)
                

Comments

[hoshi-takanori]

$name1 や $isActive の宣言はどうなってますか？ ソースはなるべく省略せずに貼ってもらえると助かります。

[zakkiblog]

ご指摘ありがとうございます。
修正しました。

Answer 1

右側の矢印を消したい場合の代替案が見つかったため
追加で回答します。

Picker の代わりに Menu を使用することで
右側の矢印が消せるかもしれません。

サンプルコードを添付しますが
少し見た目の調整が必要です。

import SwiftUI

struct ContentView: View {
    
    @State var select1 = 0
    @State var position = ["投","捕","一","二","三","遊","左","中","右"]
    @State var name1 = ""
    @FocusState  var isActive:Bool
    
    @State var positionText = "投"
    
    var body: some View {
        HStack{
            Text("1")
            VStack{}.frame(width: 10, height: 1)//無理矢理見た目を微調整
            Menu(positionText) {
                ForEach(0 ..< position.count) { index in
                    Button {
                        positionText = position[index]
                    } label: {
                        Text(position[index])
                    }
                }
            }
            .colorMultiply(.black) //追加
            VStack{}.frame(width: 10, height: 1)//無理矢理見た目を微調整
            /*
             Picker(selection:$select1, label:Text("ポジション")){
             ForEach(0..<position.count,id: \.self){index in
             Text(position[index])
             }
             }.colorMultiply(.black)
             */
            TextField("選手",text: $name1)
                .multilineTextAlignment(.center)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .focused($isActive)
        }.toolbar {  // VStackに指定
            ToolbarItemGroup(placement: .keyboard) {
                Spacer()         // 右寄せにする
                Button("閉じる") {
                    isActive = false  //  フォーカスを外す
                }
            }
        }.padding(.vertical,25).background(Color.gray)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Comments

[zakkiblog]

わざわざありがとうございます。矢印を消して想像通りの見た目にすることが出来ました。

Answer 2

Picker の foregroundColor を
colorMultiply に変更することでうまくいかないでしょうか？

@State var select1 = 0
 @State var position = ["投","捕","一","二","三","遊","左","中","右"]
 @State var name1 = ""
 @FocusState  var isActive:Bool

HStack{
                            Text("1")
                            Picker(selection:$select1, label:Text("ポジション")){
                                ForEach(0..<position.count,id: \.self){index in
                                    Text(position[index])
                                }
                            }. colorMultiply(.black) //ここを変更
                            TextField("選手",text: $name1)
                                .multilineTextAlignment(.center)
                                .textFieldStyle(RoundedBorderTextFieldStyle())
                                .focused($isActive)
                        }.toolbar {  // VStackに指定
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()         // 右寄せにする
                        Button("閉じる") {
                            isActive = false  //  フォーカスを外す
                        }
                    }
                }.padding(.vertical,25).background(Color.gray)

Comments

[zakkiblog]

解決しました。ありがとうございます。