QML サイドバーナビゲーション実装ガイド【Qt】

QMLサイドバーナビゲーションを実現するには、 ColumnレイアウトとListViewコントロールを使用することができます。以下は簡単なサンプルコードです：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 800
    height: 600

    ColumnLayout {
        anchors.fill: parent

        ListView {
            model: ListModel {
                ListElement { text: "Option 1" }
                ListElement { text: "Option 2" }
                ListElement { text: "Option 3" }
            }

            delegate: Item {
                width: parent.width
                height: 50

                Rectangle {
                    color: ListView.isCurrentItem ? "lightblue" : "white"
                    width: parent.width
                    height: parent.height

                    Text {
                        text: model.text
                        anchors.centerIn: parent
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            listView.currentIndex = index
                        }
                    }
                }
            }
        }

        Rectangle {
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "lightgrey"
        }
    }
}

この例では、ColumnLayoutレイアウトを使用してListViewとその他のコンテンツを配置しています。ListViewには単純なListModelが含まれており、ナビゲーションバーの選択肢を表示するために使用されています。各選択肢はItemを使用して表示され、選択肢をクリックすると選択状態が切り替わります。さらに、例ではメインコンテンツ領域を示す灰色のRectangleも使用されています。

この方法で、簡単にシンプルなQMLのサイドバーナビゲーションを実現することができます。スタイルや機能を自分のニーズに合わせてカスタマイズすることができます。