使用窗体SwiftUI的导航链接

Question

我想使用表单中的按钮移动到另一个视图，我正在尝试创建一个设置页面。下面的代码，我设法从一个表单打开一个URL，现在我想打开另一个页面，但我现在不知道怎么做。

struct FormRowLinkView: View {

var icon: String
var color: Color
var text: String
var link: String


var body: some View {

HStack{
ZStack{
RoundedRectangle(cornerRadius: 8, style: .continuous)
.fill(color)
Image(systemName: icon)
.imageScale(.large)
.foregroundColor(Color.white)
}
.frame(width: 36, height: 36, alignment: .center)

Text(text).foregroundColor(Color.gray)
Spacer()

Button(action: {
guard let url = URL(string: self.link), UIApplication.shared.canOpenURL(url as URL) else {
return
}
UIApplication.shared.open(url as URL)
}) {}
Image(systemName: "chevron.right")
.font(.system(size: 14, weight: .semibold, design: .rounded))
}
.accentColor(Color(.systemGray2))

}

}


struct FormRowLinkView_Previews: PreviewProvider {
static var previews: some View {
FormRowLinkView(icon: "globe", color: Color.pink, text: "Website", link: "")
.previewLayout(.fixed(width: 375, height: 60))
.padding()
}
}

这就是设置视图的样子，我正在尝试对一个按钮进行编码，以便用户可以点击它移动到另一个页面，我尝试了很多代码，但没有成功

struct SettingsView: View {

// Properties
@Environment(.presentationMode) var presentationMode


// Body
var body: some View {
NavigationView{
VStack(alignment: .center, spacing: 0) {

// Form

Form{
// Section 3
Section(header: Text("Follow Us On Social Media")){
FormRowLinkView(icon: "person", color: Color.blue, text: "Profile", link: "")
FormRowLinkView(icon: "link", color: Color.blue, text: "Twitter", link: "")
}
.padding(.vertical, 3)


// Section 4
Section(header: Text("About the application")){
FormRowStaticView(icon: "gear", firstText: "Application", secondText: "Todo")
FormRowStaticView(icon: "checkmark.seal", firstText: "Compatibility", secondText: "iPhone, iPad")
FormRowStaticView(icon: "keyboard", firstText: "Developer", secondText: "John / G")
FormRowStaticView(icon: "paintbrush", firstText: "Designer", secondText: "Robort")
FormRowStaticView(icon: "flag", firstText: "Version", secondText: "1.0.0")
}.padding(.vertical, 3)
} // End of form
.listStyle(GroupedListStyle())
.environment(.horizontalSizeClass, .regular)

// Footer
Text("Copyright All rights reserved. nSultan")
.multilineTextAlignment(.center)
.font(.footnote)
.padding(.top, 6)
.padding(.bottom, 8)
.foregroundColor(Color.secondary)



} // End of VStack
.navigationBarItems(trailing: Button(action: {
self.presentationMode.wrappedValue.dismiss()
}) {
Image(systemName: "xmark")
}
)
.navigationBarTitle("Settings", displayMode: .inline)
.background(Color("ColorBackground").edgesIgnoringSafeArea(.all))


} // End of Navigation View


}
}

Answer 1

您可以使用NavigationView，在其中可以使用NavigationLink((：

struct ContentView: View {

var icon: String
var color: Color
var text: String
var link: String


var body: some View {
NavigationView {
VStack {
HStack{
ZStack{
RoundedRectangle(cornerRadius: 8, style: .continuous)
.fill(color)
Image(systemName: icon)
.imageScale(.large)
.foregroundColor(Color.white)
}
.frame(width: 36, height: 36, alignment: .center)

Text(text).foregroundColor(Color.gray)
Spacer()

Button(action: {
guard let url = URL(string: self.link), UIApplication.shared.canOpenURL(url as URL) else {
return
}
UIApplication.shared.open(url as URL)
}) {}
Image(systemName: "chevron.right")
.font(.system(size: 14, weight: .semibold, design: .rounded))
}
.accentColor(Color(.systemGray2))

NavigationLink {
Text("Destination")
} label: {
ZStack{
RoundedRectangle(cornerRadius: 8, style: .continuous)
.fill(color)
Image(systemName: icon)
.imageScale(.large)
.foregroundColor(Color.white)
}
.frame(width: 36, height: 36, alignment: .center)

Text(text).foregroundColor(Color.gray)
Spacer()

Image(systemName: "chevron.right")
.font(.system(size: 14, weight: .semibold, design: .rounded))
.foregroundColor(.black)
}
}
}
}
}

struct FormRowLinkView_Previews: PreviewProvider {
static var previews: some View {
ContentView(icon: "globe", color: Color.pink, text: "Website", link: "")
.previewLayout(.fixed(width: 375, height: 60))
.padding()
}
}

我希望这能奏效！如果它不起作用或错误，请发表评论。

Answer 2

如果您想显示一个新屏幕，请在您的内容视图中添加@State var，如下所示。

@State var isShowingSettingsScreen: Bool = false 

然后添加一个看起来像这样的按钮。

Button {
isShowingSettingsScreen = true
} label: {
Text("Show Settings Screen")
}
.fullScreenCover(isPresented: $isShowingSettingsScreen) {
//The screen you want to present goes here <----
Color.red
}