04_ コンパイラの簡単な紹介

導入

Qt Quick Designer: Qt の新しい推奨インターフェイス デザイナー。qml と組み合わせて美しいインターフェイスを設計できます。
インターフェースはデザイナー内でドラッグすることで設計でき、すべての設計プロセスは対応する qml ファイルに同時に表示されます。同時に、qml ファイルを直接変更し、変更された効果をデザイナーで表示できます。

手順：

qml ファイルを選択した後、「デザイン」をクリックして qml エディターに入ります。
編集機のインターフェースの共通機能：

設計例:

1. ライブラリから長方形を選択します
2. 右側のプロパティで要素の基本スタイルを設計します (レイアウトでレイアウト スタイルを設計し、背景フォームで特定の属性を設計します)。
3. このようなグラデーションパターンもデザイン可能です
   

対応する qml コードは次のとおりです。

import QtQuick 2.4


Item {
    
    
    width: 200
    height: 200
    property alias buttonColor: button.color
    property alias displayText: display.text


    Rectangle {
    
    
        id: button
        radius: width * 0.5
        anchors.fill: parent
        gradient: Gradient {
    
    
            GradientStop {
    
    
                position: 0
                color: "#970a0a"
            }


            GradientStop {
    
    
                position: 1
                color: "#000000"
            }
        }


        Text {
    
    
            id: display
            x: 60
            y: 75
            width: 80
            height: 50
            color: "#fef3f3"
            text: qsTr("Text")
            font.pixelSize: 24
            font.family: "Arial"
            font.bold: true
            minimumPixelSize: 27
            rotation: -0.595
        }
    }
    
    BackgroundForm {
    
    
        id: backgroundForm
        x: -132
        y: -91
    }
}

長方形の丸い角は半径で設定できます