Application Development : Selection Controls – SegmentedControl

SegmentedControl

A SegmentedControl displays a horizontal row of selectable options (in practice, you can display up to four visible options). A SegmentedControl is a great way of filtering content inside a view . Listing 1 shows you how to create a SegmentedControl in QML.

Listing 1.  SegmentedControl

Page {
    Container {
        SegmentedControl {
            id: segmented1
            Option {
                id: option1
                text: "Option 1"
                value: "option1"
                selected: true
            }
            Option {
                id: option2
                text: "Option 2"
                value: "option2"
            }
            Option {
                id: option3
                text: "Option 3"
                value: "option3"
            }
            onSelectedIndexChanged: {
                var value = segmented1.selectedValue
                console.debug("Selected value: " + value);
            }
        }
    }
}

And Figure 1 shows the corresponding UI.

Figure 1. SegmentedControl