Xcode 一次仅显示一个视图,以便用户可以在视图之间切换
问题: 我有三个单独的视图,我一次显示所有视图,但我只希望一次显示一个视图,这样用户就可以在三个视图之间切换。这就是现在正在发生的事情 下面的代码很长,但是如果您将代码复制并粘贴到Xcode中,您可以看到现在发生了什么。我有三个具有不同大小框架的视图。您可以单击每个视图按钮,它将打开该视图Xcode 一次仅显示一个视图,以便用户可以在视图之间切换,xcode,button,toggle,swiftui,frame,Xcode,Button,Toggle,Swiftui,Frame,问题: 我有三个单独的视图,我一次显示所有视图,但我只希望一次显示一个视图,这样用户就可以在三个视图之间切换。这就是现在正在发生的事情 下面的代码很长,但是如果您将代码复制并粘贴到Xcode中,您可以看到现在发生了什么。我有三个具有不同大小框架的视图。您可以单击每个视图按钮,它将打开该视图 import SwiftUI struct ContentView: View { @State var show1 = false @State var show2 = false
import SwiftUI
struct ContentView: View {
@State var show1 = false
@State var show2 = false
@State var show3 = false
var body: some View {
ZStack {
NavigationView {
VStack {
Section {
Color(red: 0.88, green: 0.88, blue: 0.88)
.frame(maxWidth: .infinity, maxHeight: .infinity).edgesIgnoringSafeArea(.all)
HStack {
Button(action: {
withAnimation(.spring())
{
self.show1.toggle()
}
}) {
Text("View1")
.font(.headline)
.fontWeight(.regular)
.lineLimit(nil)
.padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 15))
.foregroundColor(show1 ? .blue : .gray)
}.foregroundColor(show1 ? .blue : .gray)
.padding()
Button(action: {
withAnimation(.spring())
{
self.show2.toggle()
}
}) {
Text("View2")
.font(.headline)
.fontWeight(.regular)
.lineLimit(nil)
.padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 15))
.foregroundColor(show2 ? .blue : .gray)
}.foregroundColor(show2 ? .blue : .gray)
.padding()
Button(action: {
withAnimation(.spring())
{
self.show3.toggle()
}
}) {
Text("View3")
.font(.headline)
.fontWeight(.regular)
.lineLimit(nil)
.padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 10))
.foregroundColor(show3 ? .blue : .gray)
}.foregroundColor(show3 ? .blue : .gray)
.padding()
}}}
}
VStack (alignment: .center) {
if self.show1 {
ShowView1().transition(
AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
}
}
VStack (alignment: .center) {
if self.show2 {
ShowView2().transition(
AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
}
}
VStack (alignment: .center) {
if self.show3 {
ShowView3().transition(
AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
}
}}}}
struct ShowView1: View {
var body: some View {
ZStack() {
Color.white
.frame(maxWidth: .infinity, maxHeight: 52)
}
}
}
struct ShowView2: View {
var body: some View {
ZStack() {
Color.white
.frame(maxWidth: .infinity, maxHeight: 600)
}
}
}
struct ShowView3: View {
var body: some View {
ZStack() {
Color.white
.frame(maxWidth: .infinity, maxHeight: 300)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
实际上,您并没有切换每个视图,而是切换每个视图,因此可以创建共存视图。下面是代码的更正部分(仅限切换逻辑)。使用Xcode 11.2/iOS 13.2进行测试
struct ContentView: View {
@State var selectedView: Int? = nil
var body: some View {
ZStack {
NavigationView {
VStack {
Section {
Color(red: 0.88, green: 0.88, blue: 0.88)
.frame(maxWidth: .infinity, maxHeight: .infinity).edgesIgnoringSafeArea(.all)
HStack {
Button(action: {
withAnimation(.spring())
{
self.selectedView = 1
}
}) {
Text("View1")
.font(.headline)
.fontWeight(.regular)
.lineLimit(nil)
.padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 15))
.foregroundColor(self.selectedView == 1 ? .blue : .gray)
}.foregroundColor(self.selectedView == 1 ? .blue : .gray)
.padding()
Button(action: {
withAnimation(.spring())
{
self.selectedView = 2
}
}) {
Text("View2")
.font(.headline)
.fontWeight(.regular)
.lineLimit(nil)
.padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 15))
.foregroundColor(self.selectedView == 2 ? .blue : .gray)
}.foregroundColor(self.selectedView == 2 ? .blue : .gray)
.padding()
Button(action: {
withAnimation(.spring())
{
self.selectedView = 3
}
}) {
Text("View3")
.font(.headline)
.fontWeight(.regular)
.lineLimit(nil)
.padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 10))
.foregroundColor(self.selectedView == 3 ? .blue : .gray)
}.foregroundColor(self.selectedView == 3 ? .blue : .gray)
.padding()
}}}
}
VStack (alignment: .center) {
if self.selectedView == 1 {
ShowView1().transition(
AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
}
if self.selectedView == 2 {
ShowView2().transition(
AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
}
if self.selectedView == 3 {
ShowView3().transition(
AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
}
}}}}
谢谢,看起来切换逻辑已排序,但一旦选择了每个视图,我将如何取消选择它?@NedBayne Powell,我会说它已标记-每个视图都有自己的标记,并且选择只能是一个,与所提供的代码相反,在该代码中,视图被切换,因此当显示两个或多个视图时可能出现这种情况(或试图同时出现)谢谢你的帮助。