美文网首页
常见的Modifier

常见的Modifier

作者: 汉秋 | 来源:发表于2021-10-09 13:52 被阅读0次

    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

          本文链接:https://www.haomeiwen.com/subject/mmsqoltx.html