[SailfishDevel] How to properly hide and show UI elements?

marmistrzmar at gmail.com marmistrzmar at gmail.com
Fri Jul 18 11:09:37 UTC 2014


Visible = false is instant so it can't be animated. It won't look really nice without animation


On 18.07.2014 12:42 Dmitriy Purgin wrote:

so you try to hide a component by setting its height = 0? have you
tried visible = false?


2014-07-18 16:30 GMT+06:00 Marcin M. <marmistrzmar at gmail.com>:
> I'm want to display some elements only when needed. So I did it like this
> (the components are inside a Column):
>
> TextSwitch
> {
> id: switchTextColor
> text: qsTr("Override text color")
> checked: settings.overrideTextColor
> states: State
> {
> name: "checked"; when: switchTextColor.checked == true;
> PropertyChanges { target: textColorButton; height:
> Theme.itemSizeSmall}
> }
> transitions: Transition
> {
> from: "*"; to: "checked"; reversible: true
> NumberAnimation { property: "height"; duration: 200;
> easing.type: Easing.InOutQuad }
> }
> }
>
> ColorButton
> {
> id: textColorButton
> height: 0
> }
>
> And the ColorButton component is:
> Row
> {
> id: root
> property string color: "transparent"
> width: parent.width
> Rectangle
> {
> id: colorIndicator
> color: root.color
> width: Theme.itemSizeSmall
> height: Theme.itemSizeSmall
> border.color: "black"
> border.width: 5
> }
>
> Button
> {
> id: button
> text: "Choose a color"
> onClicked:
> {
> var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog")
> dialog.accepted.connect(function() { root.color = dialog.color
> })
> }
> }
> }
>
> Instead of hiding, the textColorButton is at the top of the Page. If I check
> switchTextColor, then it goes where it should be. If then I uncheck the
> Switch, the component below goes up, but the textColorButton doesn't
> disappear (screenshot)?
>
> What am I doing wrong?
>
> --
> Marcin
>
> _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to marmistrzmar at gmail.com

_______________________________________________

SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to marmistrzmar at gmail.com






On 18.07.2014 12:42 Dmitriy Purgin wrote:

so you try to hide a component by setting its height = 0? have you
tried visible = false?


2014-07-18 16:30 GMT+06:00 Marcin M. <marmistrzmar at gmail.com>:
> I'm want to display some elements only when needed. So I did it like this
> (the components are inside a Column):
>
> TextSwitch
> {
> id: switchTextColor
> text: qsTr("Override text color")
> checked: settings.overrideTextColor
> states: State
> {
> name: "checked"; when: switchTextColor.checked == true;
> PropertyChanges { target: textColorButton; height:
> Theme.itemSizeSmall}
> }
> transitions: Transition
> {
> from: "*"; to: "checked"; reversible: true
> NumberAnimation { property: "height"; duration: 200;
> easing.type: Easing.InOutQuad }
> }
> }
>
> ColorButton
> {
> id: textColorButton
> height: 0
> }
>
> And the ColorButton component is:
> Row
> {
> id: root
> property string color: "transparent"
> width: parent.width
> Rectangle
> {
> id: colorIndicator
> color: root.color
> width: Theme.itemSizeSmall
> height: Theme.itemSizeSmall
> border.color: "black"
> border.width: 5
> }
>
> Button
> {
> id: button
> text: "Choose a color"
> onClicked:
> {
> var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog")
> dialog.accepted.connect(function() { root.color = dialog.color
> })
> }
> }
> }
>
> Instead of hiding, the textColorButton is at the top of the Page. If I check
> switchTextColor, then it goes where it should be. If then I uncheck the
> Switch, the component below goes up, but the textColorButton doesn't
> disappear (screenshot)?
>
> What am I doing wrong?
>
> --
> Marcin
>
> _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to marmistrzmar at gmail.com

_______________________________________________

SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to marmistrzmar at gmail.com



-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.sailfishos.org/pipermail/devel/attachments/20140718/aef170ca/attachment.html>


More information about the Devel mailing list