@State var未在LazyVGrid中按预期更新 [英] @State var not updated as expected in LazyVGrid

问题描述

我无法理解为什么我的变量"selectedItem"在此代码的一部分而不是其他部分中进行更新.我的目标是做到这一点，以便在单击网格中的图像时，它将选定的图像名称传递给ImageDetailView(理想情况下，我希望它是Navigationlink，但是一张纸对于我来说更易于测试.一次).

I'm having trouble understanding why my variable "selectedItem" is being updated in one part of this code, and not the other. My goal is to make it so when you tap on the image in the grid, it passes the selected image name to an ImageDetailView (ideally I'd like it to be a Navigationlink, but a sheet is easier for me to test.. one step at a time).

在有 print(selectedItem)的位置，它按预期方式在控制台中打印LazyVGrid的点击图像的名称.很棒.

Where I have print(selectedItem) it prints the name of the LazyVGrid's tapped Image in the console as expected. Awesome.

但是随后打开的工作表为空白，因为它正在寻找测试"消息.仍然...控制台显示一条消息，提示在资产目录中未找到名为'test'的图像..."

But then the sheet that opens is blank because it's looking for "test" still... the console shows a message saying "No image named 'test' found in asset catalog..."

为什么工作表仍使用"test"的初始化值?而不是更新的值?

Why is the sheet still using the initialized value of "test?" and not the updated value?

struct ImagesView:查看{

struct ImagesView: View {

@State var gridLayout: [GridItem] = [ GridItem() ]
var title: String
var imageSet = [Photo]()
@State private var selectedItem = "test"

var body: some View {
    ZStack {
        Color.black.edgesIgnoringSafeArea(.all)
        GeometryReader {  reader in
            ScrollView {
                LazyVGrid(columns: gridLayout, alignment: .center, spacing: 10) {
                    ForEach(imageSet.indices) { index in
                        Image(imageSet[index].name)
                            .resizable()
                            .onTapGesture {
                                showImageDetailView = true
                                selectedItem = imageSet[index].name
                                print(selectedItem)                                  
                            }                              
                            )}
                        .padding(.horizontal, 10)
                        .padding(.bottom, 25)
                    
                }
                .sheet(isPresented: $showImageDetailView, content: {
                    ImageDetailView(selectedItem: selectedItem)
                })

这是ImageDetailView

Here's the ImageDetailView

struct ImageDetailView:查看{

struct ImageDetailView: View {

@State var selectedItem: String

var body: some View {
    
    ZStack {
        Color.black.edgesIgnoringSafeArea(.all)
       Image(selectedItem)

            .resizable()
            .aspectRatio(contentMode: .fit)
            .cornerRadius(10)
    
    }
}

}

推荐答案

Sheet在使用 isPresented 加载内容时很挑剔.

Sheet is picky about when it loads its content with isPresented.

一种更可靠的解决方案是使用 sheet(item:)，该方法仅需对selectedItem进行少量修改即可使用您的情况-它必须符合 Identifiable .因此，您可以像这样包装它:

A more reliable solution is to use sheet(item: ), which will work with your situation with just a small modification to selectedItem -- it'll have to conform to Identifiable. So, you can wrap it like this:

struct ImageSelection : Identifiable {
        var name : String
        var id: String {
            return name
        }
    }

然后， selectedItem 将成为可选内容，因为它将确定工作表是否打开.这是一个最小的示例，显示了可选内容以及如何与 sheet(item:):

Then, selectedItem will become an optional, because it will determine whether the sheet is open. Here's a minimal example showing the optional and how you use it with sheet(item:):

struct ContentView : View {
    @State var selectedItem : ImageSelection?
    
    var body: some View {
        Text("Test")
            .sheet(item: $selectedItem) { item in
                Text(item.name)
            }
    }
}

(请注意，将 item 传递到工作表的闭包中-这是确保使用正确数据的方式)

(Note that item is passed into the sheet's closure -- that's how you make sure that the correct data is used)

更新根据您的评论:

selectedItem = ImageSelection(name: imageSet[index].name)
print(selectedItem?.name)

这篇关于@State var未在LazyVGrid中按预期更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！