常见的Modifier

resizable

让图片视图自适应占满空白区域,有两个可选参数。

  • capInsets 拉伸的保护区域
  • resizingMode 拉伸的模式(平铺和拉伸)
capInsets

aspectRatio

设置视图宽高比,有两个可选参数。

  • aspectRatio 两种格式,都是设置宽高比的
  • contentMode 设置视图如何占据父视图(fit/fill)

frame

设置视图的固定宽高,

.frame(width: 300, height: 200)
//.frame(maxWidth: .infinity, maxHeight: .infinity)

结合GeometryReader可设置相对父视图的frame

.frame(width: geo.size.width, height: geo.size.height)

scaleEffect

设置视图缩放,有三个设置方法,基本都是设置缩放系数即可。
anchor为缩放的中心点

//scale.x为横向缩放比例,scale.y为纵向缩放比例
scaleEffect(_ scale: CGSize, anchor: UnitPoint = .center) 
//s为横纵向缩放比例
scaleEffect(_ s: CGFloat, anchor: UnitPoint = .center)
//x为横向缩放比例,y为纵向缩放比例
scaleEffect(x: CGFloat = 1.0, y: CGFloat = 1.0, anchor: UnitPoint = .center)

有一个有趣的用法是将x的缩放比例设为-1时,会将视图左右镜像翻转
将y设置-1时,会将视图上下镜像翻转

offset

视图位置偏移,设置x、y偏移量即可

.offset(CGSize(width: 10, height: 20))

accessibility

这个modifier好像是用在辅助系统上的,类似为盲人提供旁白的功能

padding

设置视图中内容与视图外边框的距离,可以设置指定方向的间距

//水平方向,左右8间距
.padding(.horizontal, 8)
//上下左右8间距
.padding(8)

lineLimit

Text在父视图中可占据的最大行数

multilineTextAlignment

多行文本对齐方向

foregroundStyle

将视图的前景元素设置为给定样式。
样式为符合ShapeStyle协议的视图,可以设置颜色值,渐变色,图片等

.foregroundStyle(Color.black)
.foregroundStyle(LinearGradient(colors: [Color.red, Color.yellow], startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 1)))

rotationEffect

//设置视图旋转,旋转角度,旋转锚点
rotationEffect(_ angle: Angle, anchor: UnitPoint = .center)

opacity

设置视图透明度

blendMode

设置重叠视图合成的混合模式。可以参考混合模式(Blend Mode),常用的就是.overlay两个视图简单叠加

你可能感兴趣的:(常见的Modifier)