我是一名 SwiftUI 实习生。在下面的这个特定视图中,存在图像中的问题。而 .ignoreSafeArea(.bottom) 或 .edgesIgnoreSafeArea(.bottom) 在预览中工作。它在模拟器上不起作用。我想知道这是一个错误还是我错过了什么。感谢您的帮助!
更新的解决方案
该问题是由根视图逻辑引起的。当您使用 navigationLink 在根视图上导航另一个屏幕时会导致此问题。我不想使用标准 NavigationLink 进行导航,因为它正在冻结动画(Lottie),当您通过 navigationLink 转到某个屏幕并返回时,我正在屏幕上播放。
下面是查看代码。希望不要那么乱。
import SwiftUI
struct ChatView: View {
// MARK: properties
let userName : String
let userImageUrl : String
@ObservedObject var viewModel : ChatViewModel = ChatViewModel()
@ObservedObject var appState : NavigationController = NavigationController.shared
// MARK: body
var body: some View {
ZStack(alignment: .bottom) {
VStack {
buildNavigationBar()
buildMessages()
} // end of Vstack
.ignoresSafeArea(edges:.bottom)
buildInputRow()
} // end of Zstack
.ignoresSafeArea(edges:.bottom)
}
fileprivate func buildInputRow() -> some View {
return
HStack(alignment: .center){
DynamicHorizontalSpacer(size: 30)
Button {
} label: {
Image(systemName: "photo.circle.fill")
.font(.system(size: 35))
}
DynamicHorizontalSpacer(size: 25)
UnobscuredTextFieldView(textBinding: .constant("Hello"), promptText: "Type!", width: 180, color: .white)
DynamicHorizontalSpacer(size: 25)
Button {} label: {
Image(systemName: "paperplane.fill")
.font(.system(size: 30))
.foregroundColor(.accentColor)
}
Spacer()
} // end of HStack
.frame(width: .infinity, height: 100, alignment: .center)
.background(Color.gray.opacity(0.4).ignoresSafeArea(edges:.bottom))
}
fileprivate func buildMessages() -> some View {
return ScrollView(showsIndicators: false) {
ForEach(0...50, id : \.self) { index in
ChatTileView(index: index)
}
.padding(.horizontal,5)
} // end of scrollview
.ignoresSafeArea(edges:.bottom)
}
fileprivate func buildNavigationBar() -> ChatViewNavigationBar {
return ChatViewNavigationBar(userImageUrl: self.userImageUrl, userName: self.userName) {
appState.appState = .Home
}
}
}
fileprivate func buildMessageBox() -> some View {
return HStack(alignment: .center) {
Text(
"""
Fake message
"""
)
.font(.system(size:11))
.foregroundColor(.white)
}
}
}
fileprivate extension View {
func messageBoxModifier(index : Int) -> some View {
self
.multilineTextAlignment(index.isMultiple(of: 2) ?.trailing : .leading)
.frame(minHeight: 30)
.padding(.vertical,7)
.padding(.horizontal,10)
.background(index.isMultiple(of: 2) ? Color.green : Color.mint)
.cornerRadius(12)
.shadow(color: .black.opacity(0.3), radius: 5, y: 5)
}
}
在例如使用的一些组件。动态水平垫片
DynamicHorizontalSpacer && Vertical 它们共享相同的逻辑
struct DynamicVerticalSpacer: View {
let size : CGFloat?
var body: some View {
Spacer()
.frame(width: 0, height: size ?? 20, alignment: .center)
}
}
我正在使用的文本字段。
struct UnobscuredTextFieldView: View {
@Binding var textBinding : String
let promptText: String
let width : CGFloat
let color : Color
var body: some View {
TextField(text: $textBinding, prompt: Text(promptText)) {
Text("Email")
}
.textFieldModifier()
.modifier(RoundedTextFieldModifier(color:color ,width: width))
}
}
fileprivate extension TextField {
func textFieldModifier() -> some View {
self
.textCase(.lowercase)
.textSelection(.disabled)
.disableAutocorrection(true)
.textInputAutocapitalization(.never)
.textContentType(.emailAddress)
}
}