如何使用SwiftUI使用某些填充使行填充屏幕宽度? [英] How to make the row fill the screen width with some padding using SwiftUI?

问题描述

我正在尝试创建一个列表，其中包含卡片或向下增长的行.它已添加到可以具有多个列表的水平滚动视图.

I am trying to create a list with cards or rows which grows downwards. It's added to a horizontal scroll view which can have multiple lists.

如何使卡片填满宽度-屏幕上有一些填充物?

How to make the card fill the width - some padding of the screen?

当前代码是

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 ，但无法正常工作.

I tried using GeometryReader, but it's not working.

推荐答案

我尝试使用 GeometryReader ，但无法正常工作.

在哪个 View 组件中尝试 GeometryReader 很重要.

It's important in which View component you tried GeometryReader.

• 如果您位于跨过屏幕尺寸的典型 View 内，则会得到 width &屏幕本身的 height .

• If you are inside a typical View that spans up to the screen's size, you get the width & height of the screen itself.

如果您在 ScrollView 环境中，则会得到

If you are inside a ScrollView environment, you get

如果 .horizo​​ntal 对齐，则容器的
• 高度
如果 .vertical 对齐，则容器的
• 宽度

• height of the container in case of .horizontal alignment
• width of the container in case of .vertical alignment

我无法真正看到您想同时使用 .horizo​​ntal 和& .vertical 对齐的滚动视图.但是您所说的关于 Card 之类的视图会一直扩展到整个屏幕宽度，您可以使用以下代码来实现它:(请参阅内联注释以更好地理解)

I can't actually visualize what you are trying to achieve with both .horizontal & .vertical aligned scroll views. But what you said about the Card like view to be spanned all the way up to the screen width, you can achieve it by using below code: (see the inline comments for better understanding)

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)
                }
            }
        }
    }
}

这篇关于如何使用SwiftUI使用某些填充使行填充屏幕宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！