• FluentUI Reference Documentation
• FluentUI.Controls
• FlipView
• FluentUI 1.0

FlipView QML Type

A flip-style items control that displays one item at a time. More...

• List of all members, including inherited members

Properties

• count : int
• currentIndex : int
• currentItem : Item
• delegate : Component
• items : list<Item>
• model : var
• navigationButtonsVisible : bool
• orientation : enumeration
• useTouchAnimationsForAllNavigation : bool

Signals

• selectionChanged()

Detailed Description

FlipView is a data-driven control that displays one item at a time and enables "flip" behavior for traversing its collection of items. It supports both direct children and model-delegate binding.

 // Direct children mode
 FlipView {
     width: 480
     height: 300
     Image { source: "banner_1.webp" }
     Image { source: "banner_2.webp" }
 }

 // Model-delegate mode
 FlipView {
     width: 480
     height: 300
     model: myListModel
     delegate: Image { source: model.url }
 }

Property Documentation

count : int

The number of items in the FlipView. Read-only.

currentIndex : int

The index of the currently visible item. Corresponds to WinUI SelectedIndex.

currentItem : Item

The currently visible Item instance. Read-only. Corresponds to WinUI SelectedItem.

delegate : Component

The delegate component used to render each item when model is set.

items : list<Item>

The default property. Holds the list of child items that serve as pages. Use this when declaring pages directly in QML.

model : var

The data model for the FlipView. Supports ListModel, JS Array, int, or any model that can be consumed by a Repeater. When set, items are created using the delegate component.

navigationButtonsVisible : bool

Whether the previous/next navigation buttons are visible. Default is true.

orientation : enumeration

The orientation of the flip navigation.

• Qt.Horizontal - horizontal flipping (default)
• Qt.Vertical - vertical flipping

useTouchAnimationsForAllNavigation : bool

Whether transition animations are used for all navigation types. When true (default), animations play for touch, button, and programmatic navigation. When false, only touch navigation uses animation.

Signal Documentation

selectionChanged()

Emitted when the currentIndex changes.