Skip to content

HI, I Find a bug of Layout #46

@averyhome

Description

@averyhome

Image

    DemoItem(color: Color.random, colums: 2, rows: 1),
    DemoItem(color: Color.random, colums: 2, rows: 1),
    DemoItem(color: .random, colums: 2, rows: 2, height: 160),
    DemoItem(color: .random, colums: 2, rows: 1),
    DemoItem(color: .random, colums: 2, rows: 2, height: 160),
    DemoItem(color: .random, colums: 2, rows: 1),

i think the first 6 items will fill the 4 rows, but it will a litter more space

let me show my codes

import ExyteGrid
import SwiftUI

struct DemoItem: Identifiable, Equatable {
var id: UUID = .init()
var color: Color = .red
var colums: Int = 2
var rows: Int = 1
var height: CGFloat = 80

init(id: UUID = UUID(), color: Color, colums: Int, rows: Int, height: CGFloat = 80) {
    self.id = id
    self.color = color
    self.colums = colums
    self.rows = rows
    self.height = height
}

}

struct PackingExample: View {
@State var gridPacking = GridPacking.sparse

@State var items: [DemoItem] = [
    DemoItem(color: Color.random, colums: 2, rows: 1),
    DemoItem(color: Color.random, colums: 2, rows: 1),
    DemoItem(color: .random, colums: 2, rows: 2, height: 160),
    DemoItem(color: .random, colums: 2, rows: 1),
    DemoItem(color: .random, colums: 2, rows: 2, height: 160),
    DemoItem(color: .random, colums: 2, rows: 1),
    DemoItem(color: .random, colums: 2, rows: 1),
    DemoItem(color: .random, colums: 4, rows: 2, height: 160),
    DemoItem(color: .random, colums: 2, rows: 1),
    DemoItem(color: .random, colums: 2, rows: 1),
    DemoItem(color: .random, colums: 2, rows: 1),
    DemoItem(color: .random, colums: 2, rows: 1),
    DemoItem(color: .random, colums: 2, rows: 1),
]

@State private var draggingItem: DemoItem?

private var packingPicker: some View {
    Picker("Packing", selection: $gridPacking) {
        withAnimation {
            ForEach([GridPacking.sparse, GridPacking.dense], id: \.self) {
                Text($0 == .sparse ? "SPARSE" : "DENSE")
                    .tag($0)
            }
        }
    }
    .pickerStyle(SegmentedPickerStyle())
}

var body: some View {
    VStack {
        packingPicker

        if #available(iOS 16.0, *) {
            Grid(tracks: 4, spacing: 0) {
                ForEach(items) { item in
                    Group {
                        item.color
                            .overlay {
                                Text(item.id.uuidString)
                            }
                    }
                    .gridItemAlignment(.top)
                    .gridSpan(column: item.colums, row: item.rows)



                    .frame(height: item.height)
                    //                        .frame(height: 80.0 * CGFloat(item.rows) + CGFloat(item.rows - 1) * 10)
                    .onDrag {
                        withAnimation {
                            draggingItem = item
                        }
                        return NSItemProvider(object: "\(item.id)" as NSString)
                    }
                    .onDrop(
                        of: [.text],
                        delegate: DragRelocateDelegate(item: item, list: $items, current: $draggingItem)
                    )
                    
                }
            }
            .gridPacking(gridPacking)
            .gridAnimation(.default)
            .gridContentMode(.scroll)
            .gridCommonItemsAlignment(.top)
            .gridContentAlignment(.top)

        } else {
            // Fallback on earlier versions
        }
    }
}

}

struct PackingExample_Previews: PreviewProvider {
static var previews: some View {
PackingExample()
}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions