Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add List and ListItem using QListWidget and QListWidgetItem #364

Merged
merged 1 commit into from
Oct 14, 2021

Conversation

NinZine
Copy link
Contributor

@NinZine NinZine commented Oct 14, 2021

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>

```
<List>
  <ListItem text="NodeGui is great" />
  <ListItem text="This item has a child">
    <View>
      <Text>Hello World</Text>
    </View>
  </ListItem>
</List>
```
@a7ul
Copy link
Collaborator

a7ul commented Oct 14, 2021

Looks good 👍🏽 Thanks

@a7ul a7ul merged commit 45ccc31 into nodegui:master Oct 14, 2021
@liuqi-sun
Copy link

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

@NinZine
Copy link
Contributor Author

NinZine commented Feb 10, 2022

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
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants