Изменение размера представлений, импортированных из другого представления — SwiftUI

#ios #swift #xcode #view #swiftui

#iOS #swift #xcode #Вид #swiftui

Вопрос:

Я пытаюсь создать представление с данными из моей модели данных и другого представления, но мне трудно изменить размер импортированного представления. Как вы можете видеть на изображении ниже, таблица, которую я создал в отдельном представлении, занимает весь кадр.

Я попытался изменить его размер в своем главном представлении, где я собираю все вместе, но безуспешно. Я также пробовал scaleEffect модификатор, но он только масштабирует содержимое в представлении и сохраняет области, ограничивающие представление, в том же масштабе.

В идеале я хотел бы уменьшить размер таблицы, чтобы было равномерное разделение между абзацем и таблицей. Кроме того, приношу извинения за большой объем кода, размещенный здесь, но я хочу поделиться всем форматированием, которое я использовал, если там есть что-то, что мешает мне получить желаемый результат.

Изображение ниже отображается на iPad, на котором распространяется приложение.

Пример того, что происходит в представлении

Вот где я собираю все данные вместе:

   struct Tab1Section08: View {
    
    var product: ProductModel
    let frameHeight: CGFloat = 900
    let title = "This is a title"
    let subtitle = "This is a subtitle"
    let paragraph = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    
    struct Tab1Section08: View {
    let frameHeight: CGFloat = 900
    let title = "This is a title"
    let subtitle = "This is a subtitle"
    let paragraph = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    
    var body: some View {
        ZStack{
            Color(red: 0.97, green: 0.97, blue: 0.97)
                .ignoresSafeArea()
                .frame(height: frameHeight)
            VStack {
                Text(title)
                    .font(.custom("Avenir-Black", size: 30))
                    .padding(.top, 60)
                    .padding(.bottom, 20)
                HStack{
                    VStack {
                        Text(subtitle)
                            .font(.custom("Avenir-Black", size: 20))
                        Text(paragraph)
                            .font(.custom("Avenir", size: 16))
                            .multilineTextAlignment(.center)
                            .fixedSize(horizontal: false, vertical: true)
                            .lineSpacing(10)
                            .padding(.bottom, 20)
                    }
                    VStack {
                        Tab1Section08ListRow()
                            .padding(.bottom, 20)
                        Text(subtitle)
                            .font(.custom("Avenir", size: 12))
                    }
                }
            }
        }
    }
}
 

Вот представление, в котором я создаю таблицу:

     struct Tab1Section08ListRow: View {
        
        let color: Color = .gray
        let width: CGFloat = 1
        let textPadding: CGFloat = 5
        let frameWidth: CGFloat = 250
        let amount: CGFloat = 3
        let title = ["first", "second","third"]
        let columns = ["first", "second", "third", "fourth", "fifth", "sixth"]
        
        var body: some View {
            let height: CGFloat = CGFloat(title.count)*40
            VStack {
                HStack{
                    ForEach(0..<title.count, id: .self) { item in
                        Text(title[item])
                            .font(.custom("Avenir-Heavy", size: 18))
                            .fontWeight(.bold)
                            .frame(width: frameWidth)
                            .padding(.bottom, 20)
                    }
                }
                HStack{
                    VStack(alignment: .leading) {
                        ForEach(0..<columns.count, id: .self) { item in
                            Text(columns[item])
                                .font(.custom("Avenir", size: 14))
                                .foregroundColor(.secondary)
                                .frame(width: frameWidth)
                                .padding(.bottom, textPadding)
                                .padding(.top, textPadding)
                        }
                    }
                    Rectangle()
                        .fill(color)
                        .frame(width: width, height: height)
                        .edgesIgnoringSafeArea(.vertical)
                    VStack(alignment: .leading) {
                        ForEach(0..<columns.count, id: .self) { item in
                            Text(columns[item])
                                .font(.custom("Avenir", size: 14))
                                .foregroundColor(.secondary)
                                .frame(width: frameWidth)
                                .padding(.bottom, textPadding)
                                .padding(.top, textPadding)
                        }
                    }
                    Rectangle()
                        .fill(color)
                        .frame(width: width, height: height)
                        .edgesIgnoringSafeArea(.vertical)
                    VStack(alignment: .leading) {
                        ForEach(0..<columns.count, id: .self) { item in
                            Text(columns[item])
                                .font(.custom("Avenir", size: 14))
                                .foregroundColor(.secondary)
                                .frame(width: frameWidth)
                                .padding(.bottom, textPadding)
                                .padding(.top, textPadding)
                        }
                    }
                }
            }
        }
    }
 

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

1. Вы пробовали умножать каждый элемент на коэффициент масштабирования?

2. Да, это не работает. Ограничивающая рамка остается неизменной для импортируемого представления.

3. Изменить шрифт в стеках?

4. Можете ли вы настроить свой код с помощью некоторых жестких данных? С Xcode сложно играть, не зная, какова модель вашего продукта, по крайней мере, в том, что касается этого представления. Меня немного беспокоят все фиксированные числа для .frame(). Иногда это может привести к неожиданным неприятностям.

5. @Yrb Я обновил сообщение, чтобы его можно было воссоздать.

Ответ №1:

Как я и подозревал с самого начала, это ваши фиксированные кадры. Если я закомментирую .frame(width: frameWidth) , представление рухнет, чтобы предоставить вашему представлению «lorem ipsum» больше места. С .frame(width: frameWidth) : введите описание изображения здесь

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

Подобные фреймы жесткого кодирования мешают способности SwiftUI обрабатывать разные размеры. Я бы подумал об использовании программы чтения геометрии и выражении ширины в процентах от размера экрана.

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

1. Да, я получаю то же самое на iPod и iPhone, но мой первоначальный вопрос представлен на iPad.

2. Честно говоря, я только что добавил его сейчас, если кто-то еще его просмотрел…

3. Потрясающее спасибо. Мне действительно нужно разобраться в geometry Reader и начать его использовать.