SwiftUI 在 Picker 对象中显示图像答案

【问题标题】：SwiftUI Display Image in a Picker objectSwiftUI 在 Picker 对象中显示图像
【发布时间】：2020-03-21 15:40:53
【问题描述】：

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

用户输入一个表单，其中有一个 Picker 对象，该对象应创建包含所有国家的 Picker 以及国旗图像。

请看下面的屏幕截图：

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

用户单击“原产国”选择器对象并导航到“国家/地区”视图。 ** 这就是问题所在，图像无法渲染！？ **

用户选择一个国家，然后关闭选择器视图以返回到表单视图，并显示选择，完美运行，显示所选国家的图像和名称。

有没有人能够找出解决方案，或者这是 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)

                }

            }

        }

    }

}

【问题讨论】：

您的 Picker 代码在哪里？
似乎是 swiftUI 的问题。我也有同样的问题。如果我使用 Image(systemImage: xyz) 它可以正常工作，如果我尝试使用 Image(uiImage: xyz) 我会得到相同的图像黑色轮廓。

标签： ios swiftui picker

【解决方案1】：

只需使用 Picker

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()
    }
}

为了简单起见，我使用了更新而不是搜索栏

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()
    }
}

【讨论】：

我添加了我的代码，我看到了你的代码，但是你可以看到我的代码不起作用？！
已更新，它应该可以按预期工作。检查它（复制 - 粘贴 - 运行）。看来您的图像有问题，或者您错过了 .tag（您可以在我的代码中看到）并看到我没有使用任何 List ...
如果你喜欢使用搜索，作为动态数据使用过滤索引和相关 idx 作为 .tag ！ :-)
@user3441734 OP 正在尝试使用 uiImage，而不是 systemImage。 uiImage 存在问题。

【解决方案2】：

从左到右：

Image(uiImage: ) 显示在 HStack 的表单部分中
带有 Image(uiImage: ) 的 Picker 中的图像
带有 Image(systemImage: ) 的 Picker 中的图像

您可以看到，在 2 和 3 中，它会自动应用黑色的色调/蒙版 (maskColor)（在使用非暗模式时，在暗模式下使用白色的色调/蒙版）。

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

.renderingMode(Image.TemplateRenderingMode.original)

【讨论】：