SwiftUI-窗口位置与视图布局

发表于 分类于 本文字数： 830 阅读时长 ≈ 3 分钟
窗口位置的分布与视图的布局，很大影响着观看使用体验

窗口位置

窗口共有9种非精准定位预设值

精准定位以左上角为原点建立坐标系，取正值0-1

窗口位置示例

红框为顶层，绿框为中层，黄框为底层

Warning
恢复窗口行为

macOS在第一次打开软件时会记录窗口位置和缩放信息，以减少用户再次打开时的视觉位移

如果不需要该功能，在声明文件中WindowGroup下方书写

1
2
3
4
5
6
代码示例
WindowGroup {
            ContentView()
        }
        .restorationBehavior(.disabled)
    }

顶层

居中

1
2
3
4
5
6
代码示例
WindowGroup {
            ContentView()
        }
        .restorationBehavior(.disabled)
        .defaultPosition(.top)//可用UnitPoint(x: 0.5, y: 0)替代.top

居左

在声明文件WindowGroup下方使用.defaultPosition书写

1
2
3
4
5
6
代码示例
WindowGroup {
            ContentView()
        }
        .restorationBehavior(.disabled)
        .defaultPosition(.topLeading)//可用UnitPoint(x: 0, y: 0)替代.topLeading

居右

1
2
3
4
5
6
代码示例
WindowGroup {
            ContentView()
        }
        .restorationBehavior(.disabled)
        .defaultPosition(.topTrailing)//可用UnitPoint(x: 1, y: 0)替代.topTrailing

中层

居中

1
2
3
4
5
6
代码示例
WindowGroup {
            ContentView()
        }
        .restorationBehavior(.disabled)
        .defaultPosition(.center)//可用UnitPoint(x: 0.5, y: 0.5)替代.center

居左

1
2
3
4
5
6
代码示例
WindowGroup {
            ContentView()
        }
        .restorationBehavior(.disabled)
        .defaultPosition(.Leading)//可用UnitPoint(x: 0, y: 0.5)替代.Leading

居右

1
2
3
4
5
6
代码示例
WindowGroup {
            ContentView()
        }
        .restorationBehavior(.disabled)
        .defaultPosition(.Trailing)//可用UnitPoint(x: 1, y: 0.5)替代.Trailing

底层

居中

1
2
3
4
5
6
代码示例
WindowGroup {
            ContentView()
        }
        .restorationBehavior(.disabled)
        .defaultPosition(.bottom)//可用UnitPoint(x: 0.5, y: 1)替代.bottom

居左

1
2
3
4
5
6
代码示例
WindowGroup {
            ContentView()
        }
        .restorationBehavior(.disabled)
        .defaultPosition(.bottomLeading)//可用UnitPoint(x: 0, y: 1)替代.bottomLeading

居右

1
2
3
4
5
6
代码示例
WindowGroup {
            ContentView()
        }
        .restorationBehavior(.disabled)
        .defaultPosition(.bottomTrailing)//可用UnitPoint(x: 1, y: 1)替代.bottomTrailing

Tip
更精准的定位
参考窗口位置示例，使用UnitPoint，填入更精准的值

视图布局

视图共有三种布局

视图布局示例

垂直对齐

居中

在视图文件body下方书写VStack

1
2
3
4
5
6
7
8
9
代码示例
var body: some View {
        VStack {
            Rectangle()
                .frame(width: 270, height: 270)
            Circle()
                .frame(width: 270, height: 270)
        }
    }

垂直居中示例

居上

使用Spacer将组件挤压至一侧，实现居上等效果

空格示例

1
2
3
4
5
6
7
8
9
10
代码示例
var body: some View {
        VStack {
            Rectangle()
                .frame(width: 270, height: 270)
            Circle()
                .frame(width: 270, height: 270)
            Spacer()
        }
    }

垂直居上示例

分散

1
2
3
4
5
6
7
8
9
10
代码示例
var body: some View {
        VStack {
            Rectangle()
                .frame(width: 270, height: 270)
            Spacer()
            Circle()
                .frame(width: 270, height: 270)
        }
    }

垂直分散示例

居下

1
2
3
4
5
6
7
8
9
10
代码示例
var body: some View {
        VStack {
            Spacer()
            Rectangle()
                .frame(width: 270, height: 270)
            Circle()
                .frame(width: 270, height: 270)
        }
    }

垂直居下示例

水平对齐

居中

1
2
3
4
5
6
7
8
9
代码示例
var body: some View {
        HStack {
            Rectangle()
                .frame(width: 270, height: 270)
            Circle()
                .frame(width: 270, height: 270)
        }
    }

水平居中示例

居左

1
2
3
4
5
6
7
8
9
10
代码示例
var body: some View {
        HStack {
            Rectangle()
                .frame(width: 270, height: 270)
            Circle()
                .frame(width: 270, height: 270)
            Spacer()
        }
    }

水平居左示例

分散

1
2
3
4
5
6
7
8
9
10
代码示例
var body: some View {
        HStack {
            Rectangle()
                .frame(width: 270, height: 270)
            Spacer()
            Circle()
                .frame(width: 270, height: 270)
        }
    }

水平分散示例

居右

1
2
3
4
5
6
7
8
9
10
代码示例
var body: some View {
        HStack {
            Spacer()
            Rectangle()
                .frame(width: 270, height: 270)
            Circle()
                .frame(width: 270, height: 270)
        }
    }

水平居右示例

堆叠对齐

组件的书写顺序决定堆叠前后顺序，先写的组件排在后方

1
2
3
4
5
6
7
8
9
10
11
12
代码示例
var body: some View {
        ZStack {
            Rectangle()//蓝色方形
                .frame(width: 270, height: 270)
                .foregroundStyle(.blue)
            Circle()//红色圆形
                .frame(width: 270, height: 270)
                .foregroundStyle(.red)
            
        }
    }

堆叠顺序示例