我想使用表單中的按鈕移動到另一個視圖，我正在嘗試制作一個設定頁面。下面的代碼，我管理了如何從表單打開 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
}
}
uj5u.com熱心網友回復：
你可以使用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()
}
}
我希望這有效！如果它不起作用或錯誤，請發表評論。
uj5u.com熱心網友回復：
如果您想呈現一個新螢屏，請像這樣將@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
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/381573.html