首页 > 解决方案 > SwiftUI 步进器布局问题

问题描述

当我在一个包含许多行的列表中包含一个步进器时,它会在滚动时从屏幕上滚动出来,布局变得完全混乱。见附图。

有人遇到过这个问题并设法解决了吗?

在 Xcode 11.3.1 / iOS 13.3 中重现的代码

struct Item: Identifiable {
    let id: String
    let name: String

    init(_ name: String) {
        self.id = UUID().uuidString
        self.name = name
    }
}

struct ContentView: View {

    let items: [Item] = [
        Item("Car"),
        Item("Shoe"),
        Item("House"),
        Item("Pencil"),
        Item("Crayon"),
        Item("PC"),
        Item("Spoon"),
        Item("Box"),
        Item("Tennis Racket"),
        Item("Mobile Phone"),
        Item("Hat"),
        Item("Table"),
        Item("Chair"),
        Item("Painting"),
        Item("Couch"),
        Item("Desk"),
        Item("Fireplace"),
        Item("Stove"),
        Item("Kettle"),
        Item("Fork"),
        Item("Knife"),
        Item("Dinner Plate")
    ]

    var body: some View {
        List() {
            ForEach(items) { item in
                ItemRow(item: item)
            }
        }
    }
}

struct ItemRow: View {
    let item: Item

    @State private var quantity: Int = 1

    var body: some View {
        HStack(spacing: 10) {
            Text(item.name)
            Stepper(onIncrement: {
                self.quantity = self.quantity + 1
            }, onDecrement: {
                self.quantity = self.quantity - 1
            }, label: {
                Text("\(quantity)")
                    .padding()
            })
        }
    }
}

在此先感谢,马特

步进器布局问题

标签: swiftuistepper

解决方案


你不是有这个问题的人。列表存在一些问题,但仅在画布中。根据这个答案,您可以在真实设备上尝试您的列表,它应该看起来正常。所以我在 iPhone 7 上试了一下:

在此处输入图像描述


推荐阅读