Блог

Главная - Вопросы по программированию - Как я могу сделать изображение на 100 процентов шириной его контейнера в SwiftUI?

Как я могу сделать изображение на 100 процентов шириной его контейнера в SwiftUI?

#swift #swiftui

#swift #swiftui

Вопрос:

У меня есть пользователи, загружающие изображения со своих мобильных устройств, и эти изображения могут быть как портретными, так и альбомными. У меня эти изображения выложены плиткой, аналогичной публикациям Instagram. Самая большая проблема, с которой я сталкиваюсь, заключается в том, что портретные изображения не отображаются на 100 процентов ширины контейнера. Это действительно странно.

Вот пример «портретной» фотографии, сделанной мной и визуализированной с использованием следующего кода:

 VStack{
    AnimatedImage(url: URL(string: self.mediaLink))
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: UIScreen.main.bounds.width - 40)
}
.padding(.horizontal, 20)
.frame(width: UIScreen.main.bounds.width - 40)

Даже если я указываю ширину, оно все равно отображается неправильно. Оно должно быть UIScreen.main.bounds.width - 40 той же ширины, что и его родительское VStack

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

При использовании GeometryReader мой код выглядит следующим образом:

 GeometryReader{geo in
    VStack{
        AnimatedImage(url: URL(string: self.mediaLink))
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: geo.size.width)
    }
}
.frame(width: UIScreen.main.bounds.width)

Что еще хуже!

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

Любая помощь приветствуется! Использование .fill соотношения сторон делает изображения слишком большими, и они блокируют все на карте. Приведенный ниже код не использует GeometryReader 

 VStack{
    AnimatedImage(url: URL(string: self.mediaLink))
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: UIScreen.main.bounds.width - 40)
}
.frame(width: UIScreen.main.bounds.width - 40)

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

Комментарии:

1. Протестировал ваш код с помощью just Image("some_image") , и это работает, так что проблема либо в AnimatedImage , либо в каком-то другом коде.

2. Если вы проверите предварительный просмотр полного представления в вашем canvas, увидите ли вы, что ширина VStack совпадает с шириной изображения для первого примера, который вы написали? Это может быть что-то связанное с высотой, в качестве эксперимента вы пробовали фиксировать высоту на чем-то близком к ожидаемой высоте изображения?

3. @Asperi правильно. Проблема в AnimatedImage. Я использую эту зависимость для своего проекта. github.com/SDWebImage/SDWebImageSwiftUI . Все, что мне нужно было сделать, это изменить AnimatedImage на WebImage . Если вы опубликуете, я отмечу как ответил. 🙂

Ответ №1:

Тестировал ваш код только с изображением («some_image»), как показано ниже, и это работает (Xcode 12 / iOS 14), так что проблема либо в AnimatedImage , либо в каком-то другом коде.

 VStack{
    Image("some_image")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: UIScreen.main.bounds.width - 40)
}
.padding(.horizontal, 20)
.frame(width: UIScreen.main.bounds.width - 40)

Ответ №2:

Попробуйте использовать модификаторы scaledToFill и clipped 

     VStack{
        AnimatedImage(url: URL(string: self.mediaLink))
            .resizable()
            .scaledToFill()
            .frame(width: UIScreen.main.bounds.width - 40)
            .clipped()
    }
    .frame(width: UIScreen.main.bounds.width - 40)

Ответ №3:

Я думаю, это изменение поможет вам:

 VStack {
    AnimatedImage(url: URL(string: self.mediaLink))
       .resizable()
       .scaledToFit()
}
.frame(width: UIScreen.main.bounds.width - 40)