我为可重用的自定义警报创建了一个视图修改器,它可以按预期工作。我现在想在呈现视图和警报视图之间添加一个较暗的视图,即警报后面的视图,它覆盖了整个屏幕,并禁用呈现视图上的任何点击。
我尝试在显示警报时在显示视图上添加背景,但没有任何效果。
自定义警报视图修改符、视图扩展名和视图模型:
import Foundation
import SwiftUI
struct CustomAlertView: ViewModifier {
@Binding var isPresented: Bool
init(isPresented: Binding<Bool>) {
self._isPresented = isPresented
}
func body(content: Content) -> some View {
content.overlay(alertContent())
}
@ViewBuilder
private func alertContent() -> some View {
GeometryReader { geometry in
if self.$isPresented.wrappedValue {
VStack {
Image(systemName: "info.circle").resizable().frame(width: 30.0, height: 30.0).padding(.top, 30).foregroundColor(.cyan)
Text("Error title").foregroundColor(Color.black).font(.title2).bold().lineLimit(nil).padding([.leading, .trailing], 24.0).padding(.top, 16.0)
Spacer()
Text("There was an error while processing your request.").foregroundColor(Color.black).font(.body).lineLimit(nil).padding([.leading, .trailing], 18.0).padding(.top, 16.0)
Spacer()
Button(action: { self.$isPresented.wrappedValue.toggle() }) {
Text("Ok").foregroundColor(.white).font(.largeTitle).bold()
}.padding(.bottom, 25.0)
}.fixedSize(horizontal: false, vertical: true)
.background(Color.purple)
.cornerRadius(10)
.clipped()
.padding([.leading, .trailing], 5.0)
.position(x: geometry.size.width/2, y: geometry.size.height/2)
.frame(width: 328.0)
}
}
}
}
extension View {
func customAlert(isPresented: Binding<Bool>) -> some View {
return modifier(CustomAlertView(isPresented: isPresented))
}
}
class CustomViewModel: ObservableObject {
@Published var showAlert = false
func doSomething() {
// Sets showAlert to true incase of network disconnect or some query failure.
self.showAlert = true
}
}
内容视图:
import SwiftUI
struct ContentView: View {
@ObservedObject var viewModel: CustomViewModel = CustomViewModel()
var body: some View {
VStack {
Spacer()
Button(action: { viewModel.doSomething() }) {
Text("Start").foregroundColor(Color.red).font(.title)
}.padding(.bottom, 100.0)
}
.background(viewModel.showAlert ? Color.gray : Color.clear)
.customAlert(isPresented: $viewModel.showAlert)
}
}
在这里,ContentView是呈现视图,因为它是呈现警报的视图。我想添加一个覆盖整个屏幕的灰色视图/暗视图,它将位于呈现的警报下方。当暗视图出现时,我单击ContentView中的“开始”按钮,它将被禁用。我不知道是否可以通过修改自定义警报视图修改符来实现这一点。因此我尝试在ContentView中添加一个背景颜色,但是似乎没有什么效果。2我在视图模型和内容视图中有太多的代码,所以我删除了大部分代码,保留了我认为需要的代码。
我如何实现它?
1条答案
按热度按时间polhcujo1#
我可以在自定义警报视图修改器后面添加一个视图。在这里添加代码以防将来有人来找它。
我删除了“.background(视图模型.showAlert?颜色.灰色:Color.clear)”,因为我最终希望该逻辑成为自定义警报视图修改器的一部分,而不是将其添加到每个视图中。在customAlertView中,我将body函数修改如下: