Как сделать так, чтобы строка заполняла ширину экрана некоторыми отступами, используя SwiftUI? - PullRequest
Новая
       16

Как сделать так, чтобы строка заполняла ширину экрана некоторыми отступами, используя SwiftUI?

0 голосов
/ 03 октября 2019

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

snap

Как заставить карту заполнить ширину - некоторые отступы экрана?

Текущий код: 

struct RowView: View {
    var body: some View {
        Rectangle()
        .foregroundColor(.blue)
        .frame(width: 80, height: 80, alignment: .center)  // shows a square, but how to set size depending on screen?
        //.frame(minWidth: 100, maxWidth: .infinity, minHeight: 100, maxHeight: .infinity, alignment: .topLeading)  // nothing shows up
    }
}

struct ListView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack(spacing: 16) {
                RowView()
                RowView()
                RowView()
            }
            .padding()
        }
    }
}

struct ContentView: View {

    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ListView()
                ListView()
                ListView()
            }
        }
    }
}

Я пытался использовать GeometryReader, но он не работает.

Ответы [ 2 ]

1 голос
/ 04 октября 2019

Я пытался использовать GeometryReader, но он не работает.

Важно, в каком View компоненте вы пробовали GeometryReader.

  • Если вы находитесь внутри типичного View, который охватывает размер экрана, вы получите width & height самого экрана.

  • Если вы находитесь в среде ScrollView, вы получаете

    • height контейнера в случае .horizontal выравнивания
    • width контейнера в случае .vertical выравнивания

На самом деле я не могу представить, чего вы пытаетесь достичь с обоими .horizontal& .vertical выровненные виды прокрутки. Но то, что вы сказали о представлении Card , которое будет охватывать весь экран до ширины экрана, вы можете достичь этого, используя следующий код: (см. Встроенные комментарии для лучшего понимания) 

struct RowView: View {
    var body: some View {
        Rectangle()
            .foregroundColor(.blue)
            .frame(height: 150)
            .cornerRadius(10)
    }
}

struct ListView: View {
    var body: some View {
        // you won't get the width of the container if you embed this view inside a horizontal scroll view which is the case for you
        // so you have to impose the explicit width from the parent view
        ScrollView(.vertical) {
            VStack(spacing: 16) {
                RowView()
                RowView()
                RowView()
            }
            .padding()
        }
    }
}

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView(.horizontal) {
                HStack {
                    // you have to be explicit about the width of each content of the scroll view as it can't determine width of each content by itself
                    ListView().frame(width: geometry.size.width)
                    ListView().frame(width: geometry.size.width)
                    ListView().frame(width: geometry.size.width)
                }
            }
        }
    }
}
0 голосов
/ 04 октября 2019

Чтобы заполнить ширину экрана, вы можете добавить GeometryReader в ContentView и использовать его для установки ширины HStack. Установите там также отступы.

(Порядок заполнения и рамки важен, так же как и размещение GeometryReader для выбора ширины экрана.)

Что касается высоты, которую можно установить непосредственно для прямоугольника,У вас есть несколько вариантов, которые имеют аналогичные эффекты. Поскольку вы сказали, что список будет расти вниз, а прямоугольники находятся в ScrollView, имеет смысл установить фиксированную высоту. 

struct RowView: View {
    var body: some View {
        Rectangle()
            .foregroundColor(.blue)
            .frame(height: 100)
            //.frame(idealHeight: 100)
            //.frame(minHeight: 100)
    }
}

struct ListView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack(spacing: 16) {
                RowView()
                RowView()
                RowView()
            }
            .padding()
        }
    }
}

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView(.horizontal) {
                HStack {
                    ListView()
                    ListView()
                    ListView()
                }
                .padding()
                .frame(width: geometry.size.width)
            }
        }
    }
}

PS Если я правильно понимаю, что вы хотите заполнить экран горизонтально ибудет увеличивать список только вниз, вам может не понадобиться горизонтальное ScrollView в ContentView. Но, если это не то, что вы пытаетесь сделать, уточните, так как это решение может не достичь того, чего вы хотите.

...