QML

Qt Quick with QML

All QML Types | Qt 6.5

---

TableWidget: editing

表

• setFlags()でReadonly等のState切替え

enum Qt::ItemFlag

項目	値	説明
NoItemFlags	0	プロパティなし
ItemIsSelectable	1	選択可能
ItemIsEditable	2	編集可能
ItemIsDragEnabled	4	ドラッグ可能
ItemIsDropEnabled	8	ドロップターゲット
ItemIsUserCheckable	16	チェック可能
ItemIsEnabled	32	利用可能
ItemIsAutoTristate	64	子に依る自動状態管理
ItemNeverHasChildren	128	非子持ち最適化
ItemIsUserTristate	256	3状態循環切り替え

TableView

example

import QtQuick 2.14
import Qt.labs.qmlmodels 1.0

TableView {
    anchors.fill: parent
    columnSpacing: 1
    rowSpacing: 1
    clip: true

    model: TableModel {
        TableModelColumn { display: "name" }
        TableModelColumn { display: "color" }

        rows: [
            {
                "name": "cat",
                "color": "black"
            },
            {
                "name": "dog",
                "color": "brown"
            },
            {
                "name": "bird",
                "color": "white"
            }
        ]
    }

    delegate: Rectangle {
        implicitWidth: 100
        implicitHeight: 50
        border.width: 1

        Text {
            text: display
            anchors.centerIn: parentk
        }
    }
}

ChartView@QTCharts

setup

.pro

QTにchartsを追加

QT += quick charts

.qml

import QtCharts

example

Item{ 
    ChartView {
        anchors.fill: parent
        margins.top: 50
        margins.bottom: 50
        margins.left: 100
        margins.right: 100
        theme: ChartView.ChartThemeDark
        antialiasing: true

        LineSeries {
            XYPoint { x: 0; y: 0 }
            XYPoint { x: 1.1; y: 2.1 }
            XYPoint { x: 1.9; y: 3.3 }
            XYPoint { x: 2.1; y: 2.1 }
            XYPoint { x: 2.9; y: 4.9 }
            XYPoint { x: 3.4; y: 3.0 }
            XYPoint { x: 4.1; y: 3.3 }
        }
    }
}

• 【PyQt】QtChartで複数軸のグラフを表示 - Qiita

Dialog

.ui作成時にテンプレートあり \(\hookrightarrow\) UI(フォーム)使用時はC++クラス作成の必要あり，

---

Qt Design Studio

Photoshop, Figmaなどのデザインツールで作成したデータからQMLを作成

Qt Design Studio - アプリケーション向けユーザーインターフェイスデザインツール

---

最終更新日: August 14, 2023
作成日: August 14, 2023