SwiftUI中如何在Picker View的图片与名称间添加间距

问题描述 #

在SwiftUI的Picker组件中展示分类图片与名称时，尝试通过给Image添加.padding(.trailing, 10)来增加图片和文本的间距，但完全没有效果，代码示例如下：

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)// 无效果
            }
            Text(category.name ?? "")
        }
        .tag(category as CategoryItem?)
    }
}

效果如图：

请问如何实现二者间的间距添加？这是否可行？

解决方法 #

这完全可行，Picker的默认样式会对内部视图布局施加约束，直接给Image加padding不生效时，可尝试以下几种方法：

• 直接设置HStack的间距
  在初始化HStack时指定spacing参数，这是最直接有效的方式：

  HStack(spacing: 10) { // 此处设置图片与文本的间距
      if let inputImage = UIImage(data: category.image ?? Data()) {
          let resizeImage = inputImage.scalePreservingAspectRatio(targetSize: CGSize(width: 30, height: 30))
          Image(uiImage: resizeImage)
      }
      Text(category.name ?? "")
  }
  

• 给Text添加前导内边距
  换个方向，不为Image加尾部padding，而是给Text添加头部内边距：

  Text(category.name ?? "")
      .padding(.leading, 10)
  

• 使用Spacer控制灵活间距
  如果需要更灵活的间距控制，可在Image和Text之间插入Spacer，并通过frame限制宽度：

  HStack {
      if let inputImage = UIImage(data: category.image ?? Data()) {
          let resizeImage = inputImage.scalePreservingAspectRatio(targetSize: CGSize(width: 30, height: 30))
          Image(uiImage: resizeImage)
      }
      Spacer().frame(width: 10)
      Text(category.name ?? "")
  }
  

另外，若Picker使用的是默认的MenuPickerStyle，可能会压缩内部视图布局，可尝试显式设置Picker样式（如.pickerStyle(.inline)或.pickerStyle(.wheel)），再配合上述间距设置，效果会更可控。

内容的提问来源于stack exchange，提问作者fs_tigre