How to customize visual representation of text in textbox in Qt / QML
-
I'd like to change behaviour of Textbox control in QML so it will show each word surrounded with a rectangle (example is list of technologies in LinkedIn page: you can enter word in the same textbox, but when you hit comma, it changes to custom item). The question is how to implement such a custom item in QML textbox?
-
Hi,
Assuming using a TextArea,
- Create a Component with a Rectangle and Text element in it (custom item)
- Use onCursorPositionChanged handler in TextArea to track the current character using getText()
- Create an object instance of the Component via createObject (pass TextArea as the parent) as soon as you detect comma
- You can use positionToRectangle to get the dimensions of the text before comma
Note: I have not tested this myself, but it should give some basic idea.
-
[quote author="p3c0" date="1416827540"]
- Create a Component with a Rectangle and Text element in it (custom item)
- Use onCursorPositionChanged handler in TextArea to track the current character using getText()
- Create an object instance of the Component via createObject (pass TextArea as the parent) as soon as you detect comma
- You can use positionToRectangle to get the dimensions of the text before comma
[/quote]
Ok, that sounds fair, but what next? how to add that custom item to the TextArea? If there're more such elements than TextArea can contain, there should be a scrollbar. I didn't understand your last idea. You propose just to draw a custom element above the word?
-
bq. how to add that custom item to the TextArea?
When you pass the TextArea as parent to the dynamically created component it will be added to TextArea.
bq. If there’re more such elements than TextArea can contain, there should be a scrollbar.
Scrollbar should appear in TextArea but the main thing would be to set y position of the created Component as it scrolls down.
bq. You propose just to draw a custom element above the word?
I assumed that you want to replace the entered text with the custom element and hence if TextArea is passed as parent to that element, it should get added to TextArea provided x,y, and width for custom element is set.
Feel free to correct me if I misunderstood.
-
[quote author="p3c0" date="1416829082"]
I assumed that you want to replace the entered text with the custom element and hence if TextArea is passed as parent to that element, it should get added to TextArea provided x,y, and width for custom element is set.
Feel free to correct me if I misunderstood.[/quote]Absolutely correct. I want to replace entered text with custom element. So.. I should update "y" manually for each custom item in textbox on scroll? How do you think is there a better way (say, with some bindings)?
-
I didn't find any such property but positionToRectangle() gives the y position too.
