Контент SwiftUI обрезается на небольших экранах iPhone

Question

Я новичок в SwiftUI, поэтому я следую руководству, чтобы познакомиться с ним. Однако содержимое моего приложения обрезается на экранах меньшего размера (как по вертикали, так и по горизонтали). Как я могу этого избежать?

Вот мой код:

РЕДАКТИРОВАТЬ: Я добавил границы вокруг своих изображений и изменил размер изображений, как было предложено в ваших комментариях и ответах, но, как вы можете видеть, изображения, похоже, не занимают больше места, чем должны.

      struct ContentView: View {
  var body: some View {
    ZStack {
      Image("background").ignoresSafeArea(.all)
      VStack {
        Spacer()
        Image("logo")
          .resizable()
          .aspectRatio(contentMode: .fit)
          .frame(width: 100)
          .border(Color.black)
        Spacer()
        HStack {
          Spacer()
          Image("card3").border(Color.black, width: 3)
          Spacer()
          Image("card4").border(Color.black, width: 3)
          Spacer()
        }
        Spacer()
        Image("dealbutton")
          .resizable()
          .aspectRatio(contentMode: .fit)
          .frame(width: 100)
          .border(Color.black)
        Spacer()
        HStack {
          Spacer()
          VStack {
            Text("Player").padding(.bottom, 10)
            Text("0").font(.largeTitle)
          }
          Spacer()
          VStack {
            Text("CPU").padding(.bottom, 10)
            Text("0").font(.largeTitle)
          }
          Spacer()
        }
        .foregroundColor(.white)
        Spacer()
      }
    }
  }
}

А вот как выглядит превью на iPod touch:

Answer 1

Попробуйте сделать Image("background") с изменяемым размером или установите его как .background(:)вашего ZStack. В настоящее время размер фонового изображения нельзя изменить, и он больше экрана, поэтому отображается в исходном размере и растягивает свой родительский ZStack за пределы экрана. Поскольку ваш контент находится в том же ZStack, он также выходит за пределы экрана.

Answer 2

Ваша проблема связана с вашими изображениями, которые присутствуют в самой структуре представления. Изображения отображаются на 100% их размера, независимо от их ограничений. Это приведет к отталкиванию других представлений. Решением для этого является установка размера для самого представления, который соответствует ограничению вашего доступного пространства. Также вы изменяете размер своего, что также изменяет размер содержимого внутри. Например.

      Image("logo")
    .resizeable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 100)

Обработка вашего изображения подобным образом гарантирует, что при рендеринге для него будет установлен соответствующий размер. Затем вы можете разместить оставшиеся представления ожидаемым образом. Если вам нужно, чтобы он был увеличен в процентах от размера экрана, вы можете использовать GeometryReader масштабировать вид для разных размеров экрана.

      GeometryReader { reader in 
    Image("logo")
        .resizeable()
        .aspectRatio(contentMode: .fit)
        .frame(width: reader.size.width * 0.2)
}

Наконец, удалите свой ZStack и настроил его вот так.

      VStack {
    //Your Content
}.background(
      //Make sure to set the edgesIgnoring.. on this NOT the VStack
      Image("background").edgesIgnoringSafeArea(.all)
  )

Совет при работе со стеками

Фрейм стека, будь то VStack, HStack или ZStack, ВСЕГДА устанавливается в соответствии с содержимым, которое хранится внутри них. Если у вас есть объект шириной 100 и высотой 10000, то стек также будет иметь эти размеры, если иное не указано с помощью Modifier такой как .frame(width...) или даже, в вашем случае, изображение с измененным размером.

Предположим, что ваш тот же стек имеет добавленное представление шириной: 10, высотой: 10, оно все равно сохранит тот же размер, что и самый большой контент, хранящийся внутри. Это, конечно, обрабатывается по-разному с HStack и VStacks, поскольку они фактически складывают вещи в 2D-плоскости, тогда как ZStack работает в 3D-плоскости.