yglukhov / nimx

GUI library
MIT License
1.08k stars 76 forks source link

makeLayout and CollectionView #495

Open jerous86 opened 2 years ago

jerous86 commented 2 years ago

I'm trying to use a CollectionView using makeLayout. However, all items get mapped to the same position, and its contents are sort of ignored. Consider the example below, where the const WITH_LAYOUT indicates what method to use for creating the collection view. With WITH_LAYOUT=true, all items get mapped to (x,y)=(0,0) and there are no buttons, while with WITH_LAYOUT=false I get the expected result, a nicely organized list.

import nimx/[window,view,layout,layout_vars,collection_view,button]

const WITH_LAYOUT=true
#const WITH_LAYOUT=false

runApplication:
    const WIN_W=1200
    const WIN_H=200
    const ITEM_H=20

    let w = newWindow(newRect(40, 40, WIN_W, WIN_H))
    const collection = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven"]

    when WITH_LAYOUT:
        w.makeLayout:
            - CollectionView as list:
                layoutDirection: LayoutDirection.TopDown
                height == WIN_H
                width == WIN_W
                layoutWidth: 1
    else:
        let list = newCollectionView(newRect(0, 0, WIN_W, WIN_H), newSize(WIN_W, ITEM_H), LayoutDirection.TopDown, 1)
        w.addSubview(list)

    list.numberOfItems = proc(): int = return collection.len()
    list.itemSize = newSize(WIN_W, ITEM_H)
    list.viewForItem = proc(i: int): View =
        result = newView(newRect(0,0,0,0))
        discard newButton(result, newPoint(0,0), newSize(WIN_W, ITEM_H), collection[i])
        result.backgroundColor = newColor(1.0, 0.0, 0.0, 0.8)
    list.backgroundColor = newColor(1.0, 1.0, 1.0, 1.0)
    list.updateLayout()