向 LazyHGrid 元素选择添加阴影

Question

我有一个应用程序，其中用户可以 select 来自 LazyHGrid 中的 SF 图标。 我想在所选图标周围添加阴影，并在取消选择时移除阴影。

目前，下面的工作代码可用于通过点击滚动可用图标和 select 图标。 我需要帮助更改视图以支持将阴影应用于所选元素。

我尝试在按钮操作中放置相同的 image() 和修饰符，但收到 Xcode 警告ZStack initializer is unused 。 我还尝试向视图添加阴影修改器，以更改阴影参数，并在按钮操作区域中设置 state 属性。 这将阴影应用于 LazyHGrid 中的所有元素。 我希望阴影仅应用于所选元素。

 struct ImageStore: Identifiable, Hashable {

    var iconName: String
    var id: Int
}

struct ContentView: View {

    let rows = [
        GridItem(.flexible()),
    ]

    let colors: [Color] = [.green, .red, .yellow, .blue]

    let imageName = [
        ImageStore(iconName: "a.square.fill", id: 0),
        ImageStore(iconName: "b.square.fill", id: 1),
        ImageStore(iconName: "c.square.fill", id: 2),
        ImageStore(iconName: "d.square.fill", id: 3),
        ImageStore(iconName: "e.square.fill", id: 4),
        ImageStore(iconName: "f.square.fill", id: 5),
        ImageStore(iconName: "g.square.fill", id: 6),
    ]

    @State private var selectedIcon: Int = 0

    var body: some View {

        VStack {
            ScrollView (.horizontal) {
                LazyHGrid( rows: rows, spacing: 20) {
                    ForEach(imageName, id: \.self) { image in

                        Button( action: {

                            selectedIcon = image.id

                            print("image name = \(image.iconName)")
                            print("id = \(image.id)")
                            print("selectedIcon = \(selectedIcon)")

                        }){

                            Image(systemName: image.iconName)
                                .font(.largeTitle)
                                .foregroundColor(.white)
                                .padding()
                                .background(colors[image.id % colors.count])
                        }
                    }
                }
            }
        }
    }
}

Answer 1

也许我没有完全理解你的问题，但它应该像使用带有三元表达式的.shadow修饰符一样简单，例如

.shadow(radius: selectedIcon == image.id ? 5 : 0)

要确保图像除了背景之外没有自己的阴影，请添加.drawingGroup修饰符，例如

Button {
   selectedIcon = image.id
} label: {
   Image(systemName: image.iconName)
       .font(.largeTitle)
       .foregroundColor(.white)
       .padding()
       .background(colors[image.id % colors.count])

       .drawingGroup()
       .shadow(radius: selectedIcon == image.id ? 5 : 0)
}