SwiftUI实现点击按钮在图片上方显示关联文本的问题

问题描述 #

我希望展示一组图片，每张图片对应一段文本，需以类似popover的样式（实现方式不限）在图片上方显示该文本，文本仅占自身所需大小，图片仍可在文本周围作为背景显示。

图片根据设备横竖屏布局在HStack或VStack中，我想用一个按钮触发文本显示，但尝试在多处添加.popover修饰符（包括Button）均无效。

我是SwiftUI新手，使用的GrannyStreamDataItem数据结构目前使用命名图片，后续会调整。请问如何点击“i”按钮触发并显示对应文本？

原代码如下：

//Data structure

struct GrannyStreamDataItem: Identifiable {
    var id = UUID()
    var image: String
    var comment: String = ""
    var commentPosition: Alignment = .bottomLeading
}

let grannyStreamData: [GrannyStreamDataItem] = [
    GrannyStreamDataItem(image: "Pisa1", comment: "Leaning tower of Pisa. Gosh, it is crowded!", commentPosition: .topLeading),
    GrannyStreamDataItem(image: "Pisa2", comment: "This is what the tower looks like from the inside :-)", commentPosition: .topTrailing),
]


// View showing images 

struct ContentView: View {
    
    var body: some View {
        GeometryReader { geometry in
            
            if geometry.size.width > geometry.size.height {
                ScrollView(.horizontal) {
                    VStack {
                        Spacer()
                        HStack {
                            ImageViews(dataItemArray: grannyStreamData)
                        }
                        Spacer()
                    }

                }
            } else {
                ScrollView(.vertical) {
                    HStack {
                        Spacer()
                        VStack {
                            ImageViews(dataItemArray: grannyStreamData)
                        }
                        Spacer()
                    }
                }
            }
        }
    }
}


struct ImageViews: View {
    let dataItemArray: [GrannyStreamDataItem]
    
    var body: some View { 
        
        ForEach(dataItemArray) { dataItem in
            ZStack(alignment:dataItem.commentPosition) {
                Image(dataItem.image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Button {
                    showTextImage(description: dataItem.comment)
                } label: {
                    Image(systemName: "info.circle")
                        .padding(.all, 10)
                        .font(.largeTitle)
                        .foregroundColor(.black)
                }
                //.popover() here won't work... Why not?
                  
            }

        }
    }

    func showTextImage(description: String) {
        print("Image text: \(description)")
    }
    
}

解决方案 #

问题根源 #

.popover修饰符必须绑定一个布尔值来控制显示/隐藏状态，你之前没有设置这个绑定变量，所以无法触发弹窗。另外，每个图片项需要独立的状态来管理自身的popover显示，不能共用一个状态。

修改后的完整代码 #

1. 系统Popover样式实现

修改ImageViews结构，给每个图片项添加独立的显示状态：

struct ImageViews: View {
    let dataItemArray: [GrannyStreamDataItem]
    // 用数组存储每个项的popover显示状态，初始全部隐藏
    @State private var showPopoverArray: [Bool]
    
    init(dataItemArray: [GrannyStreamDataItem]) {
        self.dataItemArray = dataItemArray
        // 初始化状态数组，数量和数据项一致
        self._showPopoverArray = State(initialValue: Array(repeating: false, count: dataItemArray.count))
    }
    
    var body: some View { 
        // 遍历数组索引，确保状态和数据项一一对应
        ForEach(dataItemArray.indices, id: \.self) { index in
            let dataItem = dataItemArray[index]
            ZStack(alignment: dataItem.commentPosition) {
                Image(dataItem.image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                
                Button {
                    // 点击切换对应项的显示状态
                    showPopoverArray[index].toggle()
                } label: {
                    Image(systemName: "info.circle")
                        .padding(.all, 10)
                        .font(.largeTitle)
                        .foregroundColor(.black)
                }
                // 绑定状态，添加popover内容
                .popover(isPresented: $showPopoverArray[index], attachmentAnchor: .point(.top)) {
                    Text(dataItem.comment)
                        .padding()
                        .background(Color.white.opacity(0.9))
                        .cornerRadius(8)
                        .shadow(radius: 4)
                }
            }
        }
    }
}

2. 图片上方直接叠加文本（自定义样式）

如果不想用系统默认的popover，而是让文本直接显示在图片上方（图片仍作为背景），可以用条件渲染实现：

struct ImageViews: View {
    let dataItemArray: [GrannyStreamDataItem]
    @State private var showTextArray: [Bool]
    
    init(dataItemArray: [GrannyStreamDataItem]) {
        self.dataItemArray = dataItemArray
        self._showTextArray = State(initialValue: Array(repeating: false, count: dataItemArray.count))
    }
    
    var body: some View { 
        ForEach(dataItemArray.indices, id: \.self) { index in
            let dataItem = dataItemArray[index]
            ZStack(alignment: dataItem.commentPosition) {
                Image(dataItem.image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                
                Button {
                    showTextArray[index].toggle()
                } label: {
                    Image(systemName: "info.circle")
                        .padding(.all, 10)
                        .font(.largeTitle)
                        .foregroundColor(.black)
                }
                
                // 条件显示文本，叠加在图片上
                if showTextArray[index] {
                    Text(dataItem.comment)
                        .padding(.vertical, 6)
                        .padding(.horizontal, 12)
                        .background(Color.white.opacity(0.9))
                        .cornerRadius(6)
                        .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                }
            }
        }
    }
}

说明 #

• 两种方案都通过数组状态来管理每个图片项的显示/隐藏，确保操作互不干扰。
• 系统popover样式会自动适配屏幕位置，而自定义叠加样式更贴合“图片作为背景”的需求，你可以根据偏好选择。
• 原ContentView的横竖屏布局逻辑无需修改，直接使用即可。

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