如何解决基于 SwiftUI 中的旋转在 ZStack 中对齐文本
我在对齐 ZStack 中的文本时遇到了一些问题...更具体地说,如果我在启动应用程序后旋转设备...
我希望文本与视图的顶部对齐,但在下方您可以看到正在发生的事情的图像...
如果我用纵向设备打开应用程序,对齐是正确的...
Alignment with app started in portrait
...但是如果我将设备旋转到横向,文本将移动到顶部中心...
Alignment after rotation to landscape
如果我在设备横向启动应用程序时同样如此,所有这些都正确对齐...
Alignment with app started in landscape
...但是如果我将设备旋转到纵向,文本几乎完全消失...
Alignment after rotation to portrait
这是 ContentView 的代码:
import SwiftUI
let furl = URL(fileURLWithPath: "path")
struct ContentView: View {
@State private var selected = 0
var body: some View {
TabView(selection: $selected) {
NavigationView {
HomeView()
}
.navigationViewStyle(StackNavigationViewStyle())
.tabItem {
Image(systemName: (selected == 0 ? "house.fill" : "house"))
Text("Home")
}.tag(0)
NavigationView {
CategoryView(dm: DownloadManager())
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
.tabItem {
Image(systemName: (selected == 1 ? "text.justify" : "text.justify"))
Text("Categorie")
}.tag(1)
NavigationView {
GalleryView(dm: DownloadManager())
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
.tabItem {
Image(systemName: (selected == 2 ? "photo.fill" : "photo"))
Text("Galleria")
}.tag(2)
NavigationView {
FavoritesView()
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
.tabItem {
Image(systemName: (selected == 3 ? "star.fill" : "star"))
Text("Preferiti")
}.tag(3)
NavigationView {
InfoView()
}
.navigationViewStyle(StackNavigationViewStyle())
.tabItem {
Image(systemName: (selected == 4 ? "info.circle.fill" : "info.circle"))
Text("Informazioni")
}.tag(4)
}
.accentColor(.white)
.onAppear() {
UINavigationBar.appearance().barTintColor = UIColor(red: 112.0/255.0,green: 90.0/255.0,blue: 143.0/255.0,alpha: 1.0)
UITabBar.appearance().barTintColor = UIColor(red: 112.0/255.0,alpha: 1.0)
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
这是 HomeView 的代码(我有问题的地方):
import SwiftUI
struct HomeView: View {
@State private var showAlertSheet = false
@ObservedObject var monitor = NetworkMonitor()
var body: some View {
ZStack {
Image("vivibusso_home")
.resizable()
.aspectRatio(contentMode: .fill)
.clipped()
VStack(alignment: .leading) {
Text("Benvenuto")
.font(.largeTitle)
.fontWeight(.bold)
.padding(.leading)
Text("a Busso!")
.font(.largeTitle)
.fontWeight(.bold)
.padding(.leading)
}
.frame(maxWidth: UIScreen.main.bounds.width,maxHeight: UIScreen.main.bounds.height,alignment: .topLeading)
.padding(.top)
}
.navigationTitle(Text("ViviBusso"))
.navigationBarTitleDisplayMode(.inline)
.navigationBarItems(trailing:
Button (action: {
self.showAlertSheet = true
}) {
Image(systemName: monitor.isConnected ? "wifi" : "wifi.slash")
})
.alert(isPresented: $showAlertSheet) {
if monitor.isConnected {
return Alert(title: Text("Tutto OK!"),message: Text("ViviBusso funziona correttamente!"),dismissButton: .default(Text("OK")))
}
return Alert(title: Text("Attenzione!"),message: Text("ViviBusso ha bisogno della connessione Internet per funzionare!"),dismissButton: .default(Text("OK")))
}
}
}
struct HomeView_Previews: PreviewProvider {
static var previews: some View {
HomeView()
}
}
我该如何解决这个问题?
谢谢!
解决方法
ZStack(alignment:.topLeading) { //<= here
GeometryReader { proxy in //<= here
Image("vivibusso_home")
.resizable()
.aspectRatio(contentMode: .fill)
.border(Color.black)
.frame(width: proxy.size.width,height: proxy.size.height)// <= here
}
VStack(alignment: .leading) {
Text("Benvenuto")
.font(.largeTitle)
.fontWeight(.bold)
.padding(.leading)
Text("a Busso!")
.font(.largeTitle)
.fontWeight(.bold)
.padding(.leading)
}
//<=here
.padding(.top)
}
.navigationTitle(Text("ViviBusso"))
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。