Question

给出这样的导航堆栈层次结构，其中将编辑按钮添加到另一个源文件中

struct ContentView : View {
  var body: some View {
    NavigationView {
      EditingView()
    }.navigationBarItems(trailing: EditButton())

  }
}

使用“编辑”按钮的视图位于代码库的其他位置

struct EditingView : View {

  @State var dataValue: String = "Initial Value"
  @Environment(\.editMode) var editMode

    var body: some View {
      VStack(alignment: .leading) {
        if self.editMode?.value == .inactive {
          Text(dataValue)
        } else {
          TextField(($dataValue))
        }
      }.padding()
        .navigationBarTitle("Lets edit some State")
        .navigationBarItems(trailing: EditButton())
  }
}

我可以在预览中以编程方式设置初始编辑模式吗？有没有一种方法可以使用环境在没有编辑按钮的情况下查看EditingView？片段中显示了一些可以找到工作的方法，但我希望我能找到一种方法来通过编程以环境方式设置和初始值。

#if DEBUG
struct EditingView_Previews : PreviewProvider {
  static var previews: some View {
    NavigationView {
      VStack {
        EditingView()

        // I would prefer to use an environment variable.
        // Here is the best thought at some code:
        //
        //   `.environment(\.editMode, .inactive)`
        //
        // the compiler Error returned:
        // Type 'Binding<EditMode>?' has no member 'inactive'
        //
        // which I understand since it is a binding
        // not a direct access to an enum variable.
        // But can I set it somehow or should I let the system
        // handle it entirely?

        // So to get around the issue I have an extra edit button
        EditButton()

      }
    }
  }
  // Or this could work
  //.navigationBarItems(trailing: EditButton())
}
#endif

可以在此处找到示例项目： https://github.com/PaulWoodIII/PreviewEditMode

Answer 1

环境变量editMode是一个绑定。您可以通过编程方式进行如下设置：

struct outerView: View {
    @State var editMode: EditMode = .active

    var body: some View {
        return InnerView(model: model).environment(\.editMode, $editMode)
    }
}

Answer 2

您可以通过添加到预览提供程序中，将其作为常量传递：

.environment(\.editMode, Binding.constant(EditMode.active))

例如：

struct EditingView_Previews : PreviewProvider {
  static var previews: some View {
    NavigationView {
      EditingView()
      }
    }
    .environment(\.editMode, Binding.constant(EditMode.active))
  }

}

Answer 3

这不能解决能够设置EditMode的环境值的问题，我也很想知道该怎么做，但是一个更好的解决方法是隐藏EditButton您正在预览的视图后面：

struct ProfileHost_Previews : PreviewProvider {
    static var previews: some View {
        ZStack {
            EditButton().hidden()
            ProfileHost()
        }
    }
}

假设您正在预览的视图已经具有一种切换编辑模式的方法，例如EditButton。

Answer 4

我发现存在NavigationView时'EditMode'不起作用的事实，但是我找不到任何文档引用该事实。以下代码效果很好

struct ContentView: View {
    @Environment(\.editMode)  var mode

    var body: some View {
        HStack {
            if self.mode?.wrappedValue == .active {
                Button("Cancel") {
                    self.mode?.animation().wrappedValue = .inactive
                }
            }

            Spacer()
            EditButton()
        }
    }    
}

但是当使用NavigationView时，它不起作用

struct ContentView: View {
    @Environment(\.editMode)  var mode

    var body: some View {
        NavigationView {
            HStack {
                if self.mode?.wrappedValue == .active {
                    Button("Cancel") {
                        self.mode?.animation().wrappedValue = .inactive
                    }
                }

                Spacer()
                EditButton()
            }
        }
    }
}

在SwiftUI中，如何在XcodePreview

4 个答案: