SwiftUI在Picker对象中显示图像

时间:2020-03-21 15:40:53

标签: ios swiftui picker

我正在尝试实现UIKit Country Picker的SwiftUI版本。

用户输入一个带有Picker对象的表单,该对象应该创建带有所有国家/地区的Picker以及国家/地区标记图像。

请参见以下屏幕截图:

第一个屏幕是您首次尝试添加评论时的表单

enter image description here

用户单击“原产国”选择器对象,然后导航到“国家”视图。 **这就是问题所在,图像无法渲染! **

enter image description here

用户选择一个国家,然后关闭选择器视图以返回到表单视图,并显示该选择,效果很好,同时显示图像和所选国家的名称。

enter image description here

有没有人能够找到解决方案,或者这是iOS 13的错误!?

代码如下:

Form {

    TextField("Name", text: $name)
    TextField("Description", text: $desc)

    Picker(selection: $countryOrigin, label: Text("Country of Origin")) {

        Section(header: SearchBar(text: $fetcher.searchQuery)) {

            List(fetcher.country) { country in

                HStack() {

                    Image(uiImage: UIImage(contentsOfFile: Bundle.main.path(forResource: "CountryPicker", ofType: "bundle")! + "/Images/\(country.id).png")!)
                        .clipShape(Circle())

                    Text(country.name)

                }

            }

        }

    }

}

2 个答案:

答案 0 :(得分:2)

Image Tests

从左到右:

    在HStack的表单部分中显示的
  1. Image(uiImage:)
  2. 带有图像的选取器中的图像(uiImage:)
  3. 带有图像的选取器中的图像(systemImage:)

您可以看到,在2和3中,它会自动应用黑色的色调/遮罩(maskColor)(使用非深色模式时,在黑暗模式下使用白色的色调/遮罩)。

要停止此行为,您需要将此修饰符添加到图像中,但要在resizeable()之前

.renderingMode(Image.TemplateRenderingMode.original)

答案 1 :(得分:0)

只需使用选择器

import SwiftUI

struct ContentView: View {
    @State var sel  = -1
    let trashes = ["trash", "trash.fill", "trash.slash", "trash.slash.fill"]

    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $sel, label: Text("Trash type")) {
                    ForEach(0 ..< trashes.count) { (i) in
                        HStack {
                            Image(systemName: self.trashes[i])
                            Text(self.trashes[i])
                        }.tag(i)
                    }
                }
            }.navigationBarTitle("Select trash")
        }
    }
}

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

enter image description here

更新而不是SearchBar,为了简单起见,我使用了文本

import SwiftUI

struct ContentView: View {
    @State var sel  = -1
    let trashes = ["trash", "trash.fill", "trash.slash", "trash.slash.fill"]

    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $sel, label: Text("Trash type")) {
                    Section(header: Text("Header")) {
                    ForEach(0 ..< trashes.count) { (i) in
                        HStack {
                            Image(systemName: self.trashes[i])
                            Text(self.trashes[i])
                        }.tag(i)
                    }
                }
                }
            }.navigationBarTitle("Select trash")
        }
    }
}

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

enter image description here