Customising ScrollView scroll bars
-
I made a custom
ScrollBar, mainly changing thecontentItemto be bigger than the default one and changing some of the colours. This worked fine in the context I first used it but then I tried to replace the scroll bars with it in an existingScrollView-based component (wrapping aTextArea).The documentation suggests that one can customise the scroll bars via the attached properties, thus:
ScrollView { ... ScrollBar.horizontal: ScrollBar { ... } ScrollBar.vertical: ScrollBar {...} }so I initially tried assigning my custom scroll bar here. This worked for the horizontal but not the vertical scrollbar. Although both were visible and the correct size, I could not 'grab' the vertical bar and the expected colour change on pressed did not occur.
Inspecting in GammaRay, I see that the
ScrollViewactually has four scroll bars attached. I presume that these are the two original attached bars plus the two I have assigned.I have found two approaches that seem to work but I don't know which is 'better' or even if there is a more correct way to do this:
- Assign an instance of my scrollbar to each of the
ScrollBar.horizontalandScrollBar.verticalattached properties as I tried before, but set theirzto 1. - Don't try to replace the attached scrollbars but just replace their content items with that of my custom
ScrollBar. i.e, setScrollBar.vertical.contentItem, etc.
I do not have a good mental model of how attached properties work and what is allowed and what isn't. Certainly, I think the documentation could be clearer about what is going on though because it does imply that one can simply assign a new
ScrollBarto the attached properties.Is anyone able to offer any advice or explanation here please?
- Assign an instance of my scrollbar to each of the
-
I made a custom
ScrollBar, mainly changing thecontentItemto be bigger than the default one and changing some of the colours. This worked fine in the context I first used it but then I tried to replace the scroll bars with it in an existingScrollView-based component (wrapping aTextArea).The documentation suggests that one can customise the scroll bars via the attached properties, thus:
ScrollView { ... ScrollBar.horizontal: ScrollBar { ... } ScrollBar.vertical: ScrollBar {...} }so I initially tried assigning my custom scroll bar here. This worked for the horizontal but not the vertical scrollbar. Although both were visible and the correct size, I could not 'grab' the vertical bar and the expected colour change on pressed did not occur.
Inspecting in GammaRay, I see that the
ScrollViewactually has four scroll bars attached. I presume that these are the two original attached bars plus the two I have assigned.I have found two approaches that seem to work but I don't know which is 'better' or even if there is a more correct way to do this:
- Assign an instance of my scrollbar to each of the
ScrollBar.horizontalandScrollBar.verticalattached properties as I tried before, but set theirzto 1. - Don't try to replace the attached scrollbars but just replace their content items with that of my custom
ScrollBar. i.e, setScrollBar.vertical.contentItem, etc.
I do not have a good mental model of how attached properties work and what is allowed and what isn't. Certainly, I think the documentation could be clearer about what is going on though because it does imply that one can simply assign a new
ScrollBarto the attached properties.Is anyone able to offer any advice or explanation here please?
- Assign an instance of my scrollbar to each of the