1. Frame 的使用
1.1 实现
//.background(Color.green) // 文本背景
//.frame(width: 300, height: 300, alignment: .topLeading) // 设置区域宽高,对齐方式
//.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center) // 最小宽度 最小理想宽度,最大宽度 .infinity: 无穷大宽度,在父区域内尽可能大
//.background(Color.red) // 设置背景颜色
// 区域位置
Text("Hello, World!")
.background(Color.red)// 背景
.frame(height: 100, alignment: .top) // 区域: height:设置下 背景高度 alignment: 设置上 布局对齐方式
.background(Color.orange)
.frame(width: 150)
.background(Color.purple)
.frame(maxWidth: .infinity, alignment: .leading)
.background(Color.pink)
.frame(height: 400)
.background(Color.green)
.frame(maxHeight: .infinity, alignment: .top)
.background(Color.yellow)
1.2 效果图:
2. BackgroundAndOverlay 的使用
2.1 文字
1) 实现
/// 自定义文字背景为渐变色圆
func testText() ->some View{
Text("Hello, World!")
.background(
// Color.red // 颜色
// LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing) // 渐变
// 圆
Circle()
.fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing)) // 填充
.frame(width: 100, height: 100, alignment: .center) // 宽,高,对齐方式
)// 背景
.background(
// 圆
Circle()
.fill(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.red]), startPoint: .leading, endPoint: .trailing)) // 填充
.frame(width: 120, height: 120, alignment: .center) // 宽,高,对齐方式
) // 背景
}
2) 效果图:
2.2 圆中文字
1) 实现
/// 圆中添加文字
func testCircle()-> some View{
Circle()
.fill(Color.pink)
.frame(width: 100, height: 100)
.overlay(
Text("1")
.font(.largeTitle)
.foregroundColor(.white)
) // Overlay :在什么之上,叠加层
.background(
Circle()
.fill(Color.purple)
.frame(width: 110, height: 110)
)// 紫色背景在红色背景之后
}
2) 效果图:
2.3 矩形背景
1) 实现
/// 矩形背景
func testRectangle() -> some View{
Rectangle() // 矩形
.frame(width: 100, height: 100)
// 覆盖
.overlay(
Rectangle()
.fill(Color.blue)
.frame(width: 50, height: 50)
, alignment: .topLeading
) // 覆盖一个矩形
// 背景
.background(
Rectangle()
.fill(Color.red)
.frame(width: 150, height: 150)
, alignment: .bottomTrailing) // 添加一个背景矩形
}
2) 效果图:
2.4 图片设置背景
1) 实现
/// 图片设置背景
func testImage() -> some View{
Image(systemName: "heart.fill") // 设置系统图标
.font(.system(size: 40)) // 设置大小
.foregroundColor(.white) // 设置颜色
.background(
Circle()
.fill(
LinearGradient(
gradient: Gradient(colors: [Color(#colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)), Color(#colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1))]),
startPoint: .topLeading,
endPoint: .bottomTrailing) // 线性渐变
) // 设置填充样式
.frame(width: 100, height: 100) //设置大小
.shadow(color: Color(#colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 0.5)), radius: 10, x: 0.0, y: 10) // 设置阴影
.overlay(
Circle()
.fill(.blue) // 填充
.frame(width: 35, height: 35) //大小
.overlay(
Text("5")
.font(.headline) // 大字标题
.foregroundColor(.white) // 白色
)
.shadow(color: Color(#colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 0.5)), radius: 10, x: 5, y: 5) // 设置阴影
, alignment: .bottomTrailing)
)// 设置背景
}
2) 效果图:
今天的文章frame布局_iframe自适应窗口大小「建议收藏」分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/88505.html