Заполнить изображение его содержимым в SwiftUI

Я создаю виджет в SwiftUI и нахожу то, что считаю очень глупой проблемой.

У меня есть Image, который я хочу использовать в качестве фона. Я установил для него соотношение сторон .fill, но похоже, что он этого не делает.

Вот код:

var body: some View {
        ZStack {
            Image(affirmation.customImageName ?? "c_0")
                .edgesIgnoringSafeArea(.all)
                .aspectRatio(contentMode: .fill)
                .frame(width: 300, height: 300, alignment: .center)
                .background(Color.green)
            
            HStack {
                VStack {
                    Text(affirmation.title)
                        .font(.title)
                        .multilineTextAlignment(.leading)
                }
                Spacer()
            }
            .padding(.leading, 5)
            .padding(.top, 5)
            
        }
    }

И как это выглядит:  введите описание изображения здесь

Кроме того, если я удалю .frame(width: 300, height: 300, alignment: .center), изображение не будет использовать всю область.

ОБНОВЛЕНО:

Теперь размер изображения изменяется благодаря ответу @staticVoidMan, добавление resizable() помогло. Проблема теперь в том, что Text, кажется, также изменяет размер и заполняет больше, чем его пространство.

var body: some View {
        ZStack {
           Image(affirmation.customImageName ?? "c_0")
           .resizable()
           .aspectRatio(contentMode: .fill)
            
            HStack {
                Text(affirmation.title)
                    .font(.body)
                    .multilineTextAlignment(.leading)
                    .lineLimit(nil)
                Spacer()
            }
            .padding(.leading, 5)
            .padding(.top, 5)
            
        }

Вот изображение:

введите описание изображения здесь

заранее спасибо


person Joan Cardona    schedule 28.07.2020    source источник
comment
@staticVoidMan Я получаю Value of type 'some View' has no member 'resizable' Я что-то упускаю?   -  person Joan Cardona    schedule 28.07.2020
comment
попробуйте .resizable() сразу после Image до edgesIgnoringSafeArea   -  person staticVoidMan    schedule 28.07.2020
comment
вау, что это за тёмная магия: О! Сработало на 100%, спасибо большое   -  person Joan Cardona    schedule 28.07.2020
comment
ха. Ага. это Image для вас в SwiftUI   -  person staticVoidMan    schedule 28.07.2020
comment
Извините, что снова беспокою вас @staticVoidMan ... но теперь мой текст также изменяется?   -  person Joan Cardona    schedule 28.07.2020
comment
Неа. resizable - модификатор просмотра только для Image   -  person staticVoidMan    schedule 28.07.2020
comment
обновите свой вопрос и давайте посмотрим, найдем ли мы какое-нибудь элегантное решение. не могу прямо сейчас увидеть вашу проблему с текстом в вопросе.   -  person staticVoidMan    schedule 28.07.2020
comment
@staticVoidMan отредактировал   -  person Joan Cardona    schedule 28.07.2020


Ответы (2)


  1. .resizable - это Image модификатор вида, который позволяет ему занимать максимально необходимое пространство.

  2. ZStack по умолчанию может растягиваться бесконечно, чтобы соответствовать всем его внутренним представлениям, и, следовательно, вам необходимо определить фрейм с помощью модификатора .frame, чтобы все внутренние представления оставались в определенных пределах.

i.e.

ZStack {
    //...
}
.frame(width: 300, height: 300)

Решение:

ZStack(alignment: .leading) {
    Image("yourImageName")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .background(Color.green)
    
    Text("Lorem ipsum dolor set amet")
        .font(.title)
        .padding(.leading, 5)
}
.frame(width: 300, height: 300)
  • ZStack(alignment: .leading) снижает потребность в HStack:Text|Spacer только до Text
  • .multilineTextAlignment(.leading) по умолчанию, поэтому не требуется
  • .lineLimit(nil) по умолчанию, поэтому не требуется
person staticVoidMan    schedule 29.07.2020

  1. код
V/Hstack({}).frame(maxWidth: .infinity, maxHeight: .infinity).background(
            Image("yourImageName")
                .resizable()
                .scaledToFill()
        )
  1. проверьте разрешение вашего изображения. Я столкнулся с проблемой разрешения изображения. Изображение со значением разрешения 72x72 не может соответствовать фону виджета. Используйте изображение с разрешением 144x144.
person fastisslow    schedule 24.03.2021