SwiftUI 在 Picker 對象中顯示圖像

Question

我正在嘗試實現 UIKit Country Picker 的 SwiftUI 版本。

用戶輸入一個表單，其中有一個 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)

                }

            }

        }

    }

}

Answer 1

只需使用選擇器

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

為了簡單起見，我使用了 UPDATE 而不是 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()
    }
}

Answer 2

從左到右：

1. Image(uiImage:) 顯示在 HStack 的表單部分中
2. 帶有 Image(uiImage: ) 的 Picker 中的圖像
3. 帶有 Image(systemImage: ) 的 Picker 中的圖像

您可以看到，在 2 和 3 中，它會自動應用黑色的色調/遮罩（maskColor）（使用非暗模式時，在暗模式下使用白色的色調/遮罩）。

要停止這種行為，您需要將此修飾符添加到圖像中，但在 resizeable() 之前

.renderingMode(Image.TemplateRenderingMode.original)