Skip to content

HI, I Find a bug of Layout #46

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions