ios SwiftUI避免ForEach HStack容器过度增长

brccelvz 于 2022-11-19 发布在 iOS

关注(0)|答案(1)|浏览(129)

我试图实现这样的设计，在细胞内部有这样的进展：

但问题是，我找不到一个简单的方法来防止ForEach过度增长的屏幕大小时，有更多的最大项目，如：50，这导致：

我想做的是：

我不想控制/计算ForEach的最大项目数，因为这是由业务逻辑驱动的，图形可能只是被裁剪。
期望值：

细胞不会长出容器
Text 1和Text 2被扩展到左手侧和右手侧。
当图形中的项目较少时，文本将设置最小宽度：

我目前拥有的：

struct Row: View {
    var body: some View {
        HStack(alignment: .bottom, spacing: 0) {
            Circle()
                .fill(.black)
                .frame(width: 41, height: 41)
                .padding(.trailing, 16)

            HStack {
                VStack(alignment: .leading, spacing: 8) {
                    Text("Text")
                        .font(.bodyS)

                    HStack(spacing: 12) {
                        Circle()
                            .fill(.black)
                            .frame(width: 40, height: 40)

                        VStack(alignment: .leading, spacing: 0) {
                            HStack(alignment: .bottom, spacing: 3) {
                                ForEach(0 ..< 20) { _ in
                                    RoundedRectangle(cornerRadius: 2)
                                        .frame(width: 3, height: 10)
                                }
                            }

                            HStack(spacing: 8) {
                                Text("Text 1")
                                    .fixedSize()
                                Spacer(minLength: 0)
                                Text("Text 2")
                                    .fixedSize()
                            }
                            .font(.bodyS)
                        }
                    }
                    .padding(.all, 16)
                    .background(
                        RoundedRectangle(cornerRadius: 16)
                            .fill(.gray)
                    )
                }
            }
            Spacer(minLength: 0)
                .layoutPriority(1)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(.horizontal, 24)
    }
}

struct Row_Preview: PreviewProvider {
    static var previews: some View {
        ScrollView {
            LazyVStack {
                Row()
            }
        }
    }
}

ios

来源：https://stackoverflow.com/questions/74423116/swiftui-avoid-foreach-hstack-overgrowth-container

1条答案

按热度按时间

deyfvvtc1#

您需要设置帧大小并使用.clipped()（并包含一个spacer()以确保它左对齐）。

import SwiftUI

struct Row: View {

    var numberOfItems: Int = 100  // <- determine the number of items in your data
    var body: some View {
        HStack(alignment: .bottom, spacing: 0) {
            Circle()
                .fill(.black)
                .frame(width: 41, height: 41)
                .padding(.trailing, 16)

            HStack {
                VStack(alignment: .leading, spacing: 8) {
                    Text("Text")
                        .font(.body)
                    HStack(spacing: 12) {
                        Circle()
                            .fill(.black)
                            .frame(width: 40, height: 40)

                        VStack(alignment: .leading, spacing: 0) {
                            HStack(alignment: .bottom, spacing: 3) {
                                ForEach(0 ..< getNumberOfItems(), id: \.self) { _ in
                                    RoundedRectangle(cornerRadius: 2)
                                        .frame(width: 3, height: 10)
                                }
                                Spacer() // <- HERE
                            }
                            .frame(maxWidth: 200) // <- HERE
                            .clipped() // <- HERE

                            HStack(spacing: 8) {
                                Text("Text 1")
                                    .fixedSize()
                                Spacer(minLength: 0)
                                Text("Text 2")
                                    .fixedSize()
                            }
                            .font(.body)
                        }
                    }
                    .padding(.all, 16)
                    .background(
                        RoundedRectangle(cornerRadius: 16)
                            .fill(.gray)
                    )
                }
            }

            Spacer(minLength: 0)
                .layoutPriority(1)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(.horizontal, 24)
    }

    func getSpacing(numItems: Int) -> CGFloat {
        return(10.0)
    }

    func getNumberOfItems() -> Int {
        return(numberOfItems)
    }
}

struct Row_Preview: PreviewProvider {
    static var previews: some View {
        ScrollView {
            LazyVStack {
                Row()
            }
        }
    }
}

赞(0）回复(0）举报 2022-11-19

我来回答

ios SwiftUI避免ForEach HStack容器过度增长

1条答案

相关问题

热门标签

最新问答