概要

この例では Qt Quick Ultralite Layouts.

この例では、GridLayout 、ColumnLayout 、RowLayout を示す3つのタブがあります。各ページの右側には、レイアウト・プロパティを操作するコントロールがあります。レイアウトの子アイテムである）カラーボックスの位置は、レイアウト・プロパティの値に応じて変化します。

対象プラットフォーム

• MIMXRT1050
• MIMXRT1064
• MIMXRT1170
• STM32H750B
• RH850 D1M1A
• Infineon TRAVEO T2G

プロジェクト構造

メイン・アプリケーション

メイン・アプリケーション・ウィンドウには、上部に3つのタブがあります。タブを選択すると、指定されたレイアウトデモを含むページがロードされます。

GridLayoutページ

GridLayout.qml には、以下のレイアウト・プロパティを更新するためのコントロールがいくつかあります：

• GridLayout::columns
• GridLayout::flow
• GridLayout::layoutDirection
• GridLayout::columnSpacing
• GridLayout::rowSpacing

プロパティの値を変更することで、レイアウトは右側のカラーボックスの位置を更新します。

ColumnLayoutページとRowLayoutページ

ColumnLayout.qml とRowLayout.qml はGridLayout.qml と同じ構造ですが、これらのレイアウトはGridLayout よりも機能が少ないため、コントロールが減少しています。

• ColumnLayout::spacing またはRowLayout::spacing
• ColumnLayout::layoutDirection またはRowLayout::layoutDirection

レイアウトのプロパティを変更することでも、更新されたレイアウトを見ることができます。

ファイル

• layouts/CMakeLists.txt
• layouts/ColorBox.qml
• layouts/ColumnLayout.qml
• layouts/GridLayout.qml
• layouts/LayoutSelector.qml
• layouts/LayoutType.qml
• layouts/Main.qml
• layouts/MultiValueButton.qml
• layouts/RowLayout.qml
• layouts/StyledCheckBox.qml
• layouts/mcu_layouts.qmlproject
• layouts/mcu_layouts_ra8d1.qmlproject