SwiftUI 技巧：图片固定在屏幕右上角

2025-01-13 15:22:45

SwiftUI：固定图片至屏幕右上角

在 SwiftUI 应用开发中，经常需要在屏幕的特定位置，如右上角，固定显示一个图像元素。这篇文章探讨如何将一个图像固定到屏幕右上角，并提供几种可行的解决方案。

使用 `ZStack` 和 `frame` 布局

一个常见且简洁的方法是利用 ZStack 和 frame 修饰符。 ZStack 允许视图重叠显示，通过调整 frame 可以实现位置的精确控制。核心思路是使用一个充满屏幕的透明 Color 来创建 ZStack 的背景，接着在背景之上添加图片，并调整图片的位置和大小，最后固定到屏幕的右上角。

代码示例:

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .topTrailing) {
            // 一个覆盖整个屏幕的透明视图，作为 ZStack 的基准
           Color.clear
                 .frame(maxWidth: .infinity, maxHeight: .infinity)

            Image("SignInImage")
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
                 .padding()

             // 在此添加你其他的视图内容
                VStack {
                    Spacer()
                    Text("Get Started")
                        .font(.largeTitle)
                        .fontWeight(.heavy)
                        .fontWidth(.expanded)
                        .fontDesign(.monospaced)

                     Spacer()
                     Text("Find community within your community")
                            .font(.subheadline)
                            .fontWeight(.heavy)
                            .fontWidth(.standard)
                            .multilineTextAlignment(.center)
                            .fontDesign(.monospaced)
                            .frame(width: 200)
                    Divider()
                   Spacer()
                }
        }
        .ignoresSafeArea()  // 可选：如果需要图片忽略安全区域
    }
}

操作步骤:

用 ZStack 包裹所有视图内容。
使用 Color.clear 和 frame(maxWidth: .infinity, maxHeight: .infinity) 创建覆盖整个屏幕的透明背景。
将需要固定的图片放入 ZStack 中，使用 frame 修饰符来控制其大小， padding() 调整图片与屏幕边缘的间距。
使用 alignment: .topTrailing 设置对齐方式为右上角。
（可选）添加 .ignoresSafeArea() 修饰符，确保图片可以超出安全区域显示，如果想要内容占用整个屏幕空间。

原理:

ZStack 的作用是将多个视图按照先后顺序叠加起来。当我们给ZStack 设置对齐方式后，它会基于该对齐方式去叠加其中的子视图。在这个案例中，透明背景视图被推到了最底层，而Image会紧靠 ZStack的右上角对齐方式展示，形成固定效果。 frame 修饰符控制图片的尺寸，而 padding() 修饰符提供屏幕边缘间距，避免图像贴近屏幕边缘，增强视觉美观性。

使用 `overlay` 和 `alignment` 布局

另一种方法是使用 overlay 修饰符。这种方法不会创建一个额外的堆叠层级，而是在已有的视图之上覆盖一层新的视图。我们仍然使用一个空白视图作为被覆盖的主视图，然后在其上通过 overlay 来放置图片。这种方法在代码层级上会比使用 ZStack 少一些。

代码示例:

struct ContentView: View {
    var body: some View {
         //  使用空视图和全尺寸背景
           Color.clear
               .frame(maxWidth: .infinity, maxHeight: .infinity)

               //添加你的图片
                .overlay(
                     Image("SignInImage")
                     .resizable()
                     .scaledToFit()
                     .frame(width: 100, height: 100)
                    .padding(),
                    alignment: .topTrailing
                )

            //在此添加你其他的视图内容
              VStack {
                     Spacer()
                       Text("Get Started")
                            .font(.largeTitle)
                            .fontWeight(.heavy)
                            .fontWidth(.expanded)
                           .fontDesign(.monospaced)

                      Spacer()
                     Text("Find community within your community")
                            .font(.subheadline)
                            .fontWeight(.heavy)
                            .fontWidth(.standard)
                             .multilineTextAlignment(.center)
                             .fontDesign(.monospaced)
                            .frame(width: 200)
                     Divider()
                   Spacer()
                    }

                .ignoresSafeArea()
      }
}

操作步骤:

使用 Color.clear 和 .frame(maxWidth: .infinity, maxHeight: .infinity) 创建一个全屏的空背景视图。
通过 overlay 修饰符添加图片，并在修饰符内部设定 alignment 参数为 .topTrailing ，使其对齐到右上角。
调整 frame 修饰符和 padding 修饰符调整图片大小和边距。
(可选) .ignoresSafeArea() 方法让图片在安全区域以外显示。