如何将自定义字体和图像添加到我的选择器中？

Question

我的应用程序中有一个选择器，显示当前选择选项作为其标签。但是，我似乎无法弄清楚如何更改选择器为其标签所使用的字体以及显示所有选择器选项。我还想将一个图标放在选择器按钮的一部分的文本的前面，但不会像文本那样更改，以便用户可以单击文本和图标，以供选择器出现。

这是我为选择器使用的代码：

var fylker = ["Norge", "Akershus", "Agder", "Buskerud", "Finnmark", "Innlandet", "Møre og Romsdal", "Nordland", "Oslo", "Østfold", "Rogaland", "Troms", "Trøndelag", "Vestfold og Telemark", "Vestland"]

Picker("Fylke", selection: $selectedFylke) {
                            ForEach(fylker, id: \.self) {
                                Text($0)
                            }
                        }

我已经尝试了类似的事情：

Picker("Fylke", selection: $selectedFylke) {
                            ForEach(fylker, id: \.self) {
                                Text($0).font(.custom("Custom-Bold", size: 34))
                            }
                        }

没有

Picker("Fylke", selection: $selectedFylke) {
                            ForEach(fylker, id: \.self) {
                                HStack {
                                Image(systemName: "chevron.forward.circle")
                                Text($0)
                                }
                            }
                        }

任何

想法？ 谢谢！

Answer 1

尝试此方法设置 picker 的字体：

struct ContentView: View {

    let fylker = ["Norge", "Akershus", "Agder", "Buskerud", "Finnmark",
                  "Innlandet", "Møre og Romsdal", "Nordland", "Oslo", "Østfold",
                  "Rogaland", "Troms", "Trøndelag", "Vestfold og Telemark", "Vestland"]
    
    @State var selectedFylke = ""
    
    var body: some View {
        Picker("Fylke", selection: $selectedFylke) {
            ForEach(fylker, id: \.self) { item in
                HStack {
                    Image(systemName: "chevron.forward.circle")
                    Text(item)
                }
                .font(.custom("Custom-Bold", size: 34)) // for both the Text and the Image
                .tag(item)
            }
        }.pickerStyle(.wheel) // <-- here
    }
}

这确实不是与PickerStyle一起工作：自动>自动，菜单菜单>和分割

Answer 2

据我了解，我认为您可以尝试使用字体修改器添加您的自定义字体并在HSTACK中添加图像，以便它们彼此旁边，例如

import SwiftUI

struct SwiftUIView: View {
var fylker = ["Norge", "Akershus", "Agder", "Buskerud", "Finnmark", 
 "Innlandet", "Møre og Romsdal", "Nordland", "Oslo", "Østfold", 
 "Rogaland", "Troms", "Trøndelag", "Vestfold og Telemark", "Vestland"]
@State var selectedFylke:String = ""

var body: some View {
    Picker("Fylke", selection: $selectedFylke) {
        ForEach(fylker, id: \.self) { I in
            HStack(){
                Text(I).font(Font.custom("Font-Family-Name", size: 16))
                Image(systemName: "pencil")
            }.tag(I)
        }
    }.frame(width: 200, height: 60, alignment:.center).background(Color.red)
    
}
}

  struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
    }

Answer 3

另外，如果您是要添加选择器旁边的图像，那么它们似乎是按钮拾取器，您可以做

import SwiftUI

struct SwiftUIView: View {
var fylker = ["Norge", "Akershus", "Agder", "Buskerud", "Finnmark", 
 "Innlandet", "Møre og Romsdal", "Nordland", "Oslo", "Østfold", 
  "Rogaland", "Troms", "Trøndelag", "Vestfold og Telemark", "Vestland"]
   @State var selectedFylke:String = ""

 var body: some View {
    HStack(){
    Image(systemName: "pencil").foregroundColor(.white)
    Picker("search", selection: $selectedFylke) {
        ForEach(fylker, id: \.self) {
                Text($0).font(Font.custom("Font-Family-Name", size: 16))
        }
    }
    }.frame(width: 200, height: 60, alignment: 
     .center).background(Color.red).background(Color.red).cornerRadius(30)
   }
 }

struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
    SwiftUIView()
   }
 }

。