Add `List` and `ListItem` using `QListWidget` and `QListWidgetItem`

[NinZine]

Can be used like this:

<List>
  <ListItem text="NodeGui is great" />
  <ListItem text="This item has a child">
    <View>
      <Text>Hello World</Text>
    </View>
  </ListItem>
</List>

[a7ul]

Looks good 👍🏽 Thanks

[liuqi-sun]

How is ListItem laid out in a List?How to use FlexLayout?

[NinZine]

How is ListItem laid out in a List?How to use FlexLayout?

I found it tricky to use FlexLayout inside the ListItem if you want to resize etc. Basically List will use QListWidget.setItemWidget with the child of the QListWidgetItem to tell the QListWidget how to display each child. That is how the sample code works, a flex View with Text child. If you want more, then instead of View you can use a BoxView with event listeners such as:

  const [size, setSize] = useState({ width: 180, height: 78 });

  return (
    <ListItem>
      {/* Using BoxView because View does not seem to propagate the resize */}
      <BoxView
        ref={container}
        on={{
          [WidgetEventTypes.Resize]: () => {
            const widget = container.current;
            if (!widget) { return; }
            setSize({ width: widget.width(), height: size.height });
          }
        }}
...

It is a bit cumbersome to discover these things, and it is quirky. But it is the nature of assuming how things work on the web, but this project is trying to marry it to Qt, which has its own way of doing things. In this case setItemWidget is for static items, not for dynamic, as the docs mention. I guess, it could be worth to explore a proper dynamic solution from there.

[liuqi-sun]

Basically List will use QListWidget.setItemWidget with the child of the QListWidgetItem to tell the QListWidget how to display each child. That is how the sample code works, a flex View with Text child.

I don't understand.For a View, who is the Flex container?List or ListItem?Can you give me an example with FlexLayout？