Блог

Я пытался создать представление, в котором есть HStack с Image в нем, Image размер которого можно изменять с помощью aspectRatio of .fill . Каким-то образом это разрушает все фреймы и вводит пробелы в макет

Например, на скриншоте выше есть ненужное поле сверху. Я попытался вручную установить рамки изображения в HStack, но они по-прежнему смещены от верха на некоторое расстояние, даже если высота правильная. Как мне избавиться от него?

Код для тела:

 var body: some View {
    ZStack {
        Color(#colorLiteral(red: 0.09019607843, green: 0.09411764706, blue: 0.1333333333, alpha: 1))
        HStack {
            Image("onboardingOrnament").resizable()
            .aspectRatio(contentMode: .fill)
            .frame(height: UIScreen.main.bounds.height)
            Spacer()
            VStack() {
                VStack(spacing: 20) {
                    Text("INSTATOOL")
                        .font(.custom("Ubuntu-Medium", size: 28))
                        .foregroundColor(.white)
                    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
                        .font(.custom("AvenirNextCyr-Medium", size: 14))
                        .foregroundColor(Color(#colorLiteral(red: 0.4823529412, green: 0.4980392157, blue: 0.6196078431, alpha: 1)))
                }
                .padding(.top, 100)
                Spacer()
                Button(action: {
                    self.viewController?.present(style: .fullScreen, transitionStyle: .coverVertical) {
                       DashboardView()
                    }
                }) {
                    ZStack() {
                        HStack() {
                            Text("NEXT")
                            .font(.custom("AvenirNextCyr-Demi", size: 16))
                            .foregroundColor(Color(#colorLiteral(red: 0.1294117647, green: 0.137254902, blue: 0.1882352941, alpha: 1)))
                            Image("arrowOnboarding")
                            .resizable()
                            .frame(width: 14, height: 6)
                            .foregroundColor(Color(#colorLiteral(red: 0.1294117647, green: 0.137254902, blue: 0.1882352941, alpha: 1)))
                        }
                    }
                }
                .frame(width: 190, height: 50)

                .background(Color(#colorLiteral(red: 1, green: 0.6745098039, blue: 0.1882352941, alpha: 1)))
                .cornerRadius(10)
                Spacer().frame(height: 50)
            }
        }
    }   
}
  

Я предполагаю, что вы хотите выйти за пределы безопасной области, например

 var body: some View {
    ZStack {
        Color(#colorLiteral(red: 0.09019607843, green: 0.09411764706, blue: 0.1333333333, alpha: 1))
        HStack {
            Image("test1").resizable()
                .aspectRatio(contentMode: .fill)
                // .frame(height: UIScreen.main.bounds.height) // << wrong !!

          // ... other content


    }.edgesIgnoringSafeArea(.all)    // << this one !!
}