微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用列表而不是ScrollView的SwiftUI列表渲染问题

如何解决使用列表而不是ScrollView的SwiftUI列表渲染问题

我正在NSPopover中为以下UI使用SwiftUI:

enter image description here

正如人们所见,UI的行为不符合预期。

我使用以下SwiftUI代码

struct PaletteListUIView: View {
    @EnvironmentObject var colorPaletteManager: ColorPaletteManager
    
    var body: some View {
        List {
            if(colorPaletteManager.colorPalettes.count > 0) {
                ForEach(Array(self.colorPaletteManager.colorPalettes.enumerated()),id: \.element.id) { idx,palette in
                    PaletteListRowUIView(
                        colorPalette: palette,isSelected: self.colorPaletteManager.isSelected(index: idx),onDelete: { self.colorPaletteManager.removeColorPalette(at: idx) },onSelect: { self.colorPaletteManager.selectPalette(at: idx) },onRename: {
                            self.colorPaletteManager.synchronize()
                    })
                }.frame(height: 50)
            } else {
                NoElementsUIView(heading: "You Have no Color Palettes",subheading: nil)
            }
            Button(action: {
                self.colorPaletteManager.addEmptyColorPalette()
            }) {
                Image("Plus")
            }.buttonStyle(PlainButtonStyle()).padding(10)
        }.frame(width: 256)
    }
}

extension NSTableView {
    open override func viewDidMovetoWindow() {
        super.viewDidMovetoWindow()
        
        backgroundColor = NSColor.clear
        enclosingScrollView!.drawsBackground = false
    }
}
struct PaletteListRowUIView: View {
    @State var colorPalette: ColorPalette
    var isSelected: Bool
    var onDelete: () -> Void
    var onSelect: () -> Void
    var onRename: () -> Void
    
    var body: some View {        
        return vstack(alignment: .leading) {
            HStack {
                Group {
                    if(isSelected) {
                        Ellipse().fill(Color.white)
                    } else {
                        Ellipse().stroke(Color.white)
                    }
                }.contentShape(Ellipse())
                .aspectRatio(1,contentMode: .fit).frame(width: 10,height: 10)
                .gesture(TapGesture().onEnded(onSelect))

                Text(colorPalette.name)

                vstack(alignment: .trailing) {
                    Button(action: onDelete) {
                        Image("Trash").resizable().scaledToFit().frame(width: 10,height: 10)
                    }.buttonStyle(PlainButtonStyle()).padding(10)
                }
            }
            if(self.colorPalette.colors.count > 0) {
                HStack(spacing: 0) {
                    ForEach(self.colorPalette.colors) { color in
                        Rectangle().fill(Color(color))
                    }
                }.mask(RoundedRectangle(cornerRadius: 10))
            } else {
                RoundedRectangle(cornerRadius: 10).stroke(Color.gray)
            }
        }
    }
}

使用ScrollView代替List时不会发生此问题。 显然,ListScrollView的区别非常大,因为我还需要更改此内容

extension ColorPalette: Identifiable {
    public var id: String {
        return self.name
    }
}

...对此...

extension ColorPalette: Identifiable {
    public var id: UUID {
        return UUID()
    }
}

...否则,访问\.element.id(在第一个代码段的ForEach内)将导致Unexpectedly found nil while implicitly unwrapping an Optional value

我的posts中的另一个用户看到了SwiftUI List的很多问题。 可悲的是我仍然没有答案。我是在做根本上是错误的事情,还是SwiftUI仍然很不稳定?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。