SwiftUI изменить кадр изображения
У меня есть изображение, которое я хотел бы всегда использовать максимально доступную ширину. Однако изображение должно иметь максимальную высоту 500 и должно использовать эту высоту только в том случае, если оно заполнит ее. В настоящее время широкие изображения не заполняют всю высоту, но размер кадра изображения по-прежнему составляет 500, и поэтому текстовые представления находятся далеко от изображения. Когда изображение выше, ширина не вся используется. Как я могу использовать правильные модификаторы для этой нужды?
import SwiftUI
import Kingfisher
struct SwiftUIView: View {
var body: some View {
VStack {
Text("hello")
KFImage(URL(string: "https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg"))
.resizable()
.scaledToFit()
.clipShape(RoundedRectangle(cornerRadius: 15))
.contentShape(RoundedRectangle(cornerRadius: 15))
.frame(maxHeight: 500)
.clipped()
Text("hello")
}
.padding(.horizontal, 20)
}
}
//image: smaller width, larger height
//"https://media.macphun.com/img/uploads/customer/how-to/608/15542038745ca344e267fb80.28757312.jpg?q=85&w=1340"
#Preview {
SwiftUIView()
}
Текущий результат
Ответы 2
Ваш вопрос для меня немного расплывчатый
1. Сначала: одинаковая ширина – одинаковая высота
Если я вас правильно понимаю, вы ищете такоеFill поведение:
Вы можете использовать представление заполнителя и использовать изображение внутри его наложения, например:
VStack {
Text("hello")
Color.clear // 👈 use it as a placeholder view
.overlay (
KFImage(URL(string: "https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg"))
.resizable()
.scaledToFill() // 👈 Fill instead of Fit
)
.frame(maxHeight: 500) // 👈 Apply modifications on the container
.clipShape(RoundedRectangle(cornerRadius: 15))
.contentShape(RoundedRectangle(cornerRadius: 15))
.clipped()
Text("hello")
}
.padding(.horizontal, 20)
2. Второе: одинаковая ширина — соответствует высоте контента
Если вам просто нужно подогнать высоту контейнера изображения к содержимому изображения следующим образом:
Вам просто нужно добавить еще один модификатор:
KFImage(URL(string: "https://media.macphun.com/img/uploads/customer/how-to/608/15542038745ca344e267fb80.28757312.jpg?q=85&w=1340"))
.resizable()
.scaledToFit()
.clipShape(RoundedRectangle(cornerRadius: 15))
.contentShape(RoundedRectangle(cornerRadius: 15))
.frame(maxHeight: 500)
.fixedSize(horizontal: false, vertical: true) // 👈 Add this one here
.clipped()
Если я правильно понимаю, широкое изображение необходимо масштабировать по размеру, а высокое изображение необходимо масштабировать по заполнению (чтобы использовалась вся ширина).
- В обоих случаях должна быть установлена максимальная высота 500, а изображение должно быть обрезано, если масштабированная высота превышает 500.
- Если масштабированное изображение имеет высоту менее 500, ему следует использовать только ту высоту, которая ему действительно необходима.
Попробуйте ViewThatFits, ограничив только ось .horizontal:
VStack {
Text("hello")
ViewThatFits(in: .horizontal) {
let theImage = KFImage(URL(string: "https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg"))
theImage
.resizable()
.scaledToFill()
.frame(maxHeight: 500)
theImage
.resizable()
.scaledToFit()
}
.frame(maxWidth: .infinity)
.clipShape(RoundedRectangle(cornerRadius: 15))
.contentShape(RoundedRectangle(cornerRadius: 15))
Text("hello")
}
.padding(.horizontal, 20)
Вот ваши два тестовых примера:
Однако вам придется присмотреться достаточно внимательно, чтобы заметить, что высокий тестовый пример был обрезан, поскольку его пропорции очень близки к рамке, для заполнения которой он масштабируется. Итак, вот результаты, когда вместо них используются тестовые примеры на основе системных образов «tortoise.fill», «lizard.fill» и «figure.stand»:
Большое спасибо, не могли бы вы посмотреть: stackoverflow.com/questions/78447347/…
Большое спасибо!! Модификатор фиксированного размера решил эту проблему. Ваш второй подход был тем, что я искал.