布局

alignmentGuide

var body: some View {
        VStack (alignment: .center) {
            Color.red
                .frame(minWidth: 40, maxWidth: 80, minHeight: 10, maxHeight: 20)
                .fixedSize()
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
                .alignmentGuide(HorizontalAlignment.center) { dimension -> CGFloat in
                    // 表示Image横坐标这个点与容器对齐
                    dimension[HorizontalAlignment.center]
                }
            Text("Hello, world!")
        }
        .border(Color.blue)
    }

                .alignmentGuide(HorizontalAlignment.center) { dimension -> CGFloat in
                    // 表示Image横坐标这个点与容器对齐
                    dimension[HorizontalAlignment.center]
                }

image.png

                .alignmentGuide(HorizontalAlignment.center) { dimension -> CGFloat in
                    // 表示Image横坐标这个点与容器对齐
                    0
                }

image.png

                .alignmentGuide(HorizontalAlignment.center) { dimension -> CGFloat in
                    // 表示Image横坐标这个点与容器对齐
                    -100
                }

image.png

Image 填充

                            Image(name)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 60, height: 60)

想要改变Image的大小，不能简单的修改frame。而是需要先设置.resizable()，再设置contentMode .aspectRatio(contentMode: .fit),最后设置size .frame(width: 60, height: 60)

HStack

aligment

HStack有两种aligment，一个是HStack初始化的入参，另一个是frame里的入参

                HStack {
                    VStack (alignment: .leading, spacing: 0) {
                        Text("order Accepted")
                            .font(.caption)
                            .foregroundColor(.white)
                        Text("order Accepted order Accepted")
                            .font(.caption2)
                            .foregroundColor(.black.opacity(0.3))
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .offset(y: 15)
                }

HStack初始化入参表示子元素的对齐方式，frame的入参表示子元素相对于HStack的对齐方式

image.png

变为贪婪型

padding

padding