主页 / coding / 问题 / 78434547
Accepted
Swift
Asked: 2024-05-06 12:32:45 +0800 CST

使用 SwiftUI 在背景图像上方放置顶部栏

  • 772

我希望背景图像和绿色 UI 元素位于屏幕顶部，但代码位于绿色 UI 元素下方的中间。

代码：

struct AppointmentStep1: View {

    @Environment(\.dismiss) var dismiss

    var body: some View {
        ZStack {
            // Background image
            Image("home_bg")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
            VStack {
                HStack {
                    Button  {
                        dismiss()
                    } label: {
                        Image(systemName: "arrow.left")
                            .font(.system(size: 25))
                            .tint(.white)
                            .padding(.trailing, 6)
                    }

                    Text("Appointment")
                        .font(.calibriRegular(with: 20))
                        .foregroundStyle(.white)
                    Spacer()
                }
                .padding(16)
            }
            .background(
                Color.appGreen2
                    .ignoresSafeArea()
            )

           Spacer()
        }
    }
}

o/p：如何将绿色视图移至顶部

[![在此处输入图像描述][1]][1]

编辑：

在此输入图像描述

这是我的背景图片：请尝试使用这个背景..我总是得到相同的o/p

背景

swift

3 个回答

  1. 为了实现我认为您期望的结果，首先您需要Spacer从移动ZStack到VStack。以下是编辑后的代码片段供您参考：

    var body: some View {
  ZStack {
    Image("home_bg")
      .resizable()
      .scaledToFill()
      .edgesIgnoringSafeArea(.all)
    VStack {
      HStack {
        Button { dismiss() } label: {
          Image(systemName: "arrow.left")
            .font(.system(size: 25.0))
            .tint(.white)
            .padding(.trailing, 6.0)
          }
          Text("Appointment")
            .font(.calibriRegular(with: 20))
            .foregroundStyle(.white)
          Spacer()
        }
          .padding(.vertical, 16.0)
          .padding(.horizontal, 32.0)
          .background(
            Color
              .appGreen2
              .ignoresSafeArea()
          )
      Spacer() // <– This one.
    }
  }
}

    结果如下：

    在此输入图像描述

    （在屏幕截图上，您会看到另一个背景图像和另一个绿色，因为我显然没有您的非标准资产。）

    我还用填充物来Button修复它们——也许这是你想要修复的另一件事。

    • 1
  2. Best Answer

    您在第二个屏幕截图的顶部只看到一条绿色细条的原因是因为背景图像位于内部ZStack并且正在缩放以填充。这会将 的大小增加到ZStack图像的大小，其中包括屏幕外的内容。

    我建议使用应用图像.background，那么你甚至不需要ZStack. 还：

    • 应用于，maxHeight: .infinity使其VStack充满整个屏幕高度。
    • 使用alignment: .top，使绿色条出现在屏幕顶部。
    • 您不需要应用.ignoresSafeArea()到绿色背景，因为默认情况下会发生这种情况。请参阅背景（_：ignoresSafeAreaEdges :)。
    var body: some View {
    VStack {
        HStack {
            Button  {
                dismiss()
            } label: {
                Image(systemName: "arrow.left")
                    .font(.system(size: 25))
                    .tint(.white)
                    .padding(.trailing, 6)
            }

            Text("Appointment")
                .font(.calibriRegular(with: 20))
                .foregroundStyle(.white)
            Spacer()
        }
        .padding(16)
        .background(.appGreen2)
    }
    .frame(maxHeight: .infinity, alignment: .top)
    .background {
        Image("home_bg")
            .resizable()
            .scaledToFill()
            .ignoresSafeArea()
    }
}

    截屏

    • 1

  3. 你可以简单地设置alignmentZStack，它是.center默认的：

    ZStack(alignment: .top) { 
    ...
}
    • 0

相关问题