安全区域在SwiftUI上的使用
这一节来认识安全区域,那么安全区域是什么?SafeArea表示屏幕上的安全区域,这是在不受视觉遮挡或不良用户体验的情况下,用于放置内容的区域。安全区域通常涉及到设备的边缘,例如屏幕顶部的状态栏区域、底部的Home指示器或设备的刘海以下是苹果给出的SafeArea,各个屏幕的指导都有。Layout | Apple Developer Documentation*A consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy…*developer.apple.com当我们在使用苹果的组件时,它会默认帮我们留好安全区域,以防我们把布局放在了非安全区域下图就是一个例子,使用 VStack,它会自动的把内部的视图放在安全区域内部。防止带来不好的体验struct SafeAreaSample: View {    var body: some View {        VStack {            Rectangle()                .fill(Color.red)                .frame(maxWidth: .infinity, maxHeight: .infinity)        }    }}但是有时,我们需要全屏去布局一个背景色。有的时候的布局就超出了安全区域,那么我们改如何去做?这个时候我们的主角就要上场了,ignoresSafeArea , ignoresSafeArea 可以设置超出安全区域的方向,他是一个Edge.Set 枚举类型默认情况下它会忽略上下左右都超出安全区域,你也可以设置某一边。比如我只设置top, 效果如下以上代码是,使用Blue颜色来作为底背景,在底背景上面填充来一个矩形来作为内容视图ZStack {                        Rectangle()                .fill(                    LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .topLeading, endPoint: .bottomTrailing)                )                .ignoresSafeArea()                        Button {                            } label: {                Text("点我")                    .foregroundColor(Color.black)                    .padding()                    .padding(.horizontal, 20)                    .background(Color.white)                    .cornerRadius(10)                    .shadow(radius: 10)            }        }使用渐变色作为背景,然后在内容区域填充内容以上是使用图形的背景色来作整个区域的背景填充struct SafeAreaSample: View {    var body: some View {        VStack {            Rectangle()                .fill(Color.blue)                .frame(maxWidth: .infinity, maxHeight: .infinity)                .background(                    Color.red                        .edgesIgnoringSafeArea(.all)                )        }    }}安全区域就这么多,喜欢就点个赞吧!
点赞 1
评论 0
全部评论

相关推荐

不愿透露姓名的神秘牛友
07-15 17:24
点赞 评论 收藏
分享
盖茨伯爵:一样兄弟,我从4月开始发到现在了,都三四百个了
无实习如何秋招上岸
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务