【SwiftUI基础篇】20 布局修饰器：大小、位置、对齐、填充等

要了解SwiftUI如何调整视图的大小和位置，需要使用Xcode预览来检查单个视图的边界。您还可以添加临时边框，以查看SwiftUI如何一起定位和调整多个视图的大小。

一、尺寸修饰器

func frame(width: CGFloat?, height: CGFloat?, alignment: Alignment) -> some View 将此视图放置在具有指定大小的不可见框架中。

VStack {
    Ellipse()//椭圆形
        .fill(Color.purple)
        .frame(width: 200, height: 100)
    Ellipse()
        .fill(Color.blue)
        .frame(height: 100)
}

func frame(minWidth: CGFloat?, idealWidth: CGFloat?, maxWidth: CGFloat?, minHeight: CGFloat?, idealHeight: CGFloat?, maxHeight: CGFloat?, alignment: Alignment) -> some View 将此视图放置在具有指定大小限制的不可见框架内。

Text("Hello world!")
    .frame(width: 200, height: 30, alignment: .topLeading)
    .border(Color.gray)

func fixedSize() -> some View 将此视图固定为其理想尺寸。

func fixedSize(horizontal: Bool, vertical: Bool) -> some View 将视图固定为指定尺寸的理想尺寸。

func layoutPriority(Double) -> some View 设置父级布局应为此子级分配空间的优先级。

二、位置修饰器

func position(CGPoint) -> some View 将此视图的中心定位在其父级坐标空间中的指定点。

func position(x: CGFloat, y: CGFloat) -> some View 将此视图的中心定位在其父级坐标空间中的指定坐标处。

func offset(CGSize) -> some View 通过offset参数中指定的水平和垂直量来偏移此视图。

func offset(x: CGFloat, y: CGFloat) -> some View 将此视图偏移指定的水平和垂直距离。

func coordinateSpace(name: T) -> some View 为视图的坐标空间分配一个名称，因此其他代码可以在尺寸上进行操作，例如相对于命名空间的点和尺寸。

三、对齐方式

func alignmentGuide(HorizontalAlignment, computeValue: (ViewDimensions) -> CGFloat) -> some View 设置视图的水平对齐方式。

func alignmentGuide(VerticalAlignment, computeValue: (ViewDimensions) -> CGFloat) -> some View 设置视图的垂直对齐方式。

struct ViewDimensions 视图的大小及其对齐方式在其自己的坐标空间中进行。 

protocol AlignmentID 用于标识对齐指南的类型。

四、视图填充

func padding(CGFloat) -> some View 沿所有边缘填充视图指定的数量。

func padding(EdgeInsets) -> some View 使用您指定的边缘和填充量填充此视图。

func padding(Edge.Set, CGFloat?) -> some View 在系统的指定边缘内填充此视图的视图将使用系统计算的填充量。

Text("文字底部被填充")
   .padding(.bottom)
   .border(Color.gray)

func ignoresSafeArea(SafeAreaRegions, edges: Edge.Set) -> some View 将视图扩展到其安全区域之外。

enum Edge 指示矩形的一个边的枚举。

struct EdgeInsets 矩形边的插入距离。

struct SafeAreaRegions 一组符号安全区域区域。

五、视图分层

func overlay(Overlay, alignment: Alignment) -> some View 在该视图前面分层放置一个辅助视图。

func background(Background, alignment: Alignment) -> some View 将给定视图分层放置在该视图之后。

func zIndex(Double) -> some View 控制重叠视图的显示顺序。

func complicationForeground() -> View 将并发症的视图层次划分为前景和背景层。

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/134