在SwiftUI的Picker View中添加名称和图像之间的空格

fnatzsnv  于 2023-10-15  发布在  Swift
关注(0)|答案(2)|浏览(116)

下面的代码显示了一个图像和一个类别名称在一个选择器视图,但无论我做什么,我不能添加一个空格之间的类别图像和类别名称,见下图。
如何在名称和图像之间添加空格?这可能吗

Picker("", selection: $selectedCategory) {
    ForEach(categorySM.categories, id: \.self) { category in
        HStack {
            if let inputImage = UIImage(data: category.image ?? Data()) {

                let resizeImage = inputImage.scalePreservingAspectRatio(targetSize: CGSize(width: 30, height: 30))
                Image(uiImage: resizeImage)
                    .padding(.trailing, 10)// doesn't add space
            }
            Text(category.name ?? "")
        }
        .tag(category as CategoryItem?)
    }
}

dgiusagp

dgiusagp1#

看起来Picker正在将您的HStack拆开,并以它想要的方式使用组件视图。例如,即使您将图像放在HStack中的标题之后,所选项目仍会以图像优先的方式显示。另一方面,当你点击选择器时,你得到的选项列表首先显示标题。
我找不到任何方法让填充物起作用。但作为一个简单的解决方法,你可以在标题前加几个空格:

ForEach(categories) { category in
    Label("   " + category.name, image: category.imageName)
        .tag(category.id)
}

或者,你可以在你的图像中包括一些尾随的空白空间。

0md85ypi

0md85ypi2#

您可以通过使用Menu重新构建它来解决拾取器限制:

let categories = [
    "house",
    "hammer",
    "fork.knife.circle",
]

struct ContentView: View {
    
    @State private var selectedCategory: String = categories.first!
    
    var body: some View {
        
        Menu {
            ForEach(categories, id: \.self) { category in
                Button {
                    selectedCategory = category
                } label: {
                    HStack {
                        Image(systemName: category)
                        Text(category)
                    }
                }
            }
        } label: {
            HStack {
                Image(systemName: selectedCategory)
                    .padding(.trailing, 10)
                Text(selectedCategory)
                Image(systemName: "chevron.up.chevron.down")
            }
        }
    }
}

相关问题