如何在 Sheet 视图上制作不透明的背景色?
How can I make a background color with opacity on a Sheet view?
我目前正在使用 SwiftUI.
开发应用程序
我正在寻找在 Sheet 视图上制作不透明背景颜色的方法。
有什么办法吗?
我已经尝试使用下面的代码来做到这一点,我可以使用不透明度 属性 更改颜色,但我看不到 [=29] 下的文本 (Sheet) =] 查看...
import SwiftUI
struct ContentView: View {
@State var isSheet = false
var body: some View {
Button(action: {self.isSheet.toggle()}) {
Text("Sheet")
}.sheet(isPresented: $isSheet){
Color.yellow.opacity(0.5)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Xcode:版本 11.7
Swift: Swift 5
你不能用标准 sheet 官方 API 来做到这一点(因为默认情况下每个托管控制器视图都是不透明的),所以你可以创建自定义 sheet 视图(具有任何功能您需要)或使用 run-time 变通方法找到该视图并将其背景设置为清除。如下所示(仅用于演示)
struct DemoView: View {
@State var isSheet = false
var body: some View {
Button(action: {self.isSheet.toggle()}) {
Text("Sheet")
}.sheet(isPresented: $isSheet){
Color.yellow.opacity(0.5)
.background(BackgroundClearView())
}
}
}
struct BackgroundClearView: UIViewRepresentable {
func makeUIView(context: Context) -> UIView {
let view = UIView()
DispatchQueue.main.async {
view.superview?.superview?.backgroundColor = .clear
}
return view
}
func updateUIView(_ uiView: UIView, context: Context) {}
}
使用我一整天都在努力寻找的来自@Asperi 的令人敬畏的答案,我构建了一个简单的视图修改器,现在可以在 .sheet 或 .fullScreenCover 模态视图中应用并提供透明背景。然后,您可以根据需要为内容设置框架修饰符以适合屏幕,而用户不必知道模态不是自定义大小。
import SwiftUI
struct ClearBackgroundView: UIViewRepresentable {
func makeUIView(context: Context) -> some UIView {
let view = UIView()
DispatchQueue.main.async {
view.superview?.superview?.backgroundColor = .clear
}
return view
}
func updateUIView(_ uiView: UIViewType, context: Context) {
}
}
struct ClearBackgroundViewModifier: ViewModifier {
func body(content: Content) -> some View {
content
.background(ClearBackgroundView())
}
}
extension View {
func clearModalBackground()->some View {
self.modifier(ClearBackgroundViewModifier())
}
}
用法:
.sheet(isPresented: $isPresented) {
ContentToDisplay()
.frame(width: 300, height: 400)
.clearModalBackground()
}
我目前正在使用 SwiftUI.
开发应用程序我正在寻找在 Sheet 视图上制作不透明背景颜色的方法。
有什么办法吗?
我已经尝试使用下面的代码来做到这一点,我可以使用不透明度 属性 更改颜色,但我看不到 [=29] 下的文本 (Sheet) =] 查看...
import SwiftUI
struct ContentView: View {
@State var isSheet = false
var body: some View {
Button(action: {self.isSheet.toggle()}) {
Text("Sheet")
}.sheet(isPresented: $isSheet){
Color.yellow.opacity(0.5)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Xcode:版本 11.7
Swift: Swift 5
你不能用标准 sheet 官方 API 来做到这一点(因为默认情况下每个托管控制器视图都是不透明的),所以你可以创建自定义 sheet 视图(具有任何功能您需要)或使用 run-time 变通方法找到该视图并将其背景设置为清除。如下所示(仅用于演示)
struct DemoView: View {
@State var isSheet = false
var body: some View {
Button(action: {self.isSheet.toggle()}) {
Text("Sheet")
}.sheet(isPresented: $isSheet){
Color.yellow.opacity(0.5)
.background(BackgroundClearView())
}
}
}
struct BackgroundClearView: UIViewRepresentable {
func makeUIView(context: Context) -> UIView {
let view = UIView()
DispatchQueue.main.async {
view.superview?.superview?.backgroundColor = .clear
}
return view
}
func updateUIView(_ uiView: UIView, context: Context) {}
}
使用我一整天都在努力寻找的来自@Asperi 的令人敬畏的答案,我构建了一个简单的视图修改器,现在可以在 .sheet 或 .fullScreenCover 模态视图中应用并提供透明背景。然后,您可以根据需要为内容设置框架修饰符以适合屏幕,而用户不必知道模态不是自定义大小。
import SwiftUI
struct ClearBackgroundView: UIViewRepresentable {
func makeUIView(context: Context) -> some UIView {
let view = UIView()
DispatchQueue.main.async {
view.superview?.superview?.backgroundColor = .clear
}
return view
}
func updateUIView(_ uiView: UIViewType, context: Context) {
}
}
struct ClearBackgroundViewModifier: ViewModifier {
func body(content: Content) -> some View {
content
.background(ClearBackgroundView())
}
}
extension View {
func clearModalBackground()->some View {
self.modifier(ClearBackgroundViewModifier())
}
}
用法:
.sheet(isPresented: $isPresented) {
ContentToDisplay()
.frame(width: 300, height: 400)
.clearModalBackground()
}