Выровнять изображения с одинаковым размером и соотношением сторон заливки в SwiftUI - PullRequest
Новая
       143

Выровнять изображения с одинаковым размером и соотношением сторон заливки в SwiftUI

0 голосов
/ 07 августа 2020

Я использую SwiftUI для создания виджета, и я борюсь с чем-то довольно простым и понятным в Swift.

У меня есть 2 изображения, которые расположены рядом друг с другом, и я хочу, чтобы они были точно такой же размер с заполнением соотношения сторон, но без выхода за границы.

Как это работает в настоящий момент, у меня есть представление, которое является изображением и текстом. И затем родительское представление, которое имеет HStack с двумя из этих представлений.

В основном я хочу добиться этого представления, но с правильными изображениями:

enter image description here

This is done doing this:

VStack() {
        Image(uiImage: image)
            .resizable()
    
    Text(affirmation.title)
        .font(.body)
        .foregroundColor(Color(UIColor.MAPurple()))
    }
}

And for the parent view:

HStack {
                Spacer()
                CardView(text: text, image: firstImage)
                Spacer()
                CardView(text: text, image: secondImage)
                Spacer()
            }

If I add the aspect ratio to fill as I would do in Swift, this is how it looks:

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

Обновление

Добавление минимально воспроизводимого примера: 

struct CardView: View {
    let text: String
    let image: UIImage

    var body: some View {
        VStack(alignment: .leading) {
            Image(uiImage: image)
                .resizable()
                //                    .aspectRatio(contentMode: .fill)
                .clipped()
            
            Text(text)
                .font(.body)
                .multilineTextAlignment(.leading)
                .foregroundColor(Color.blue)
            
        }
    }
}

struct ParentView: View {
    let firstText: String = "This is something"
    let firstImage: UIImage
    let secondText: String = "This is something else"
    let secondImage: UIImage
    
    let top: String = "This is the top string"

    var body: some View {
        VStack {
            Spacer()
            Spacer()

            Text(top)
                .font(.largeTitle)
                .foregroundColor(Color(UIColor.MAPurple()))
                .padding(.all, 10)
                .minimumScaleFactor(0.4)
            
            Spacer()
            Spacer()

            HStack {
                Spacer()
                CardView(text: firstText, image: firstImage)
                Spacer()
                CardView(text: secondText, image: secondImage)
                Spacer()
            }
            Spacer()
            Spacer()
        }
        .background(Color.yellow)
        .edgesIgnoringSafeArea(.all)
    }
}

1 Ответ

0 голосов
/ 15 августа 2020

Правильная высота изображения решает проблему.

Разделенные горизонтальные изображения и текстовые просмотры отдельно. Поскольку высота текста может увеличиваться в зависимости от содержимого, но изображение должно быть правильно выровнено. Учитывая максимальную ширину для Text, так как она не должна go за Image шириной.

CardTextView выравнивает оба текста в HStack изображениях под 

struct CardTextView: View {
    let text: String
    
    var body: some View {
        return Text(text)
            .font(.body)
            .multilineTextAlignment(.leading)
            .lineLimit(nil)
            .foregroundColor(Color.blue)
            .frame(minWidth: 0, maxWidth:170)
    }
}

CardImageView выравнивает оба изображения в HStack под основным заголовком 

struct CardImageView: View {
    let image: UIImage

    var body: some View {
        return Image(uiImage: image)
        .resizable()
        .frame(width:170, height: 170)
        .cornerRadius(12)
    }
}

Наконец ParentView: добавлен интервал для VStack и HStack

struct ParentView: View {
    let firstText: String = "This is something"
    let firstImage: UIImage
    let secondText: String = "This is something else a looonnnnnggggg texttttttttttt"
    let secondImage: UIImage
    
    let top: String = "This is the top string"

    var body: some View {
        VStack(spacing: 12) {
            Text(top)
                .font(.title)
                .foregroundColor(Color(UIColor.purple))
                .padding(.top, 20)

            HStack(spacing: 12) {
                CardImageView(image: firstImage)
                CardImageView(image: secondImage)
            }
            
            HStack(spacing: 12) {
                CardTextView(text: firstText)
                CardTextView(text: secondText)
            }.padding(.bottom, 20)
           
        }.padding(16)
        .background(Color.yellow).cornerRadius(14)
    }
}

Думаю, это именно то, что вы ожидаете.

Конечный результат

...