2014年6月8日 星期日

在QML使用Rectangle原件 ( Rectangle Element In QML )

介紹:
  • 如何使用QML的Rectangle原件
Introduction:
  • How to used Rectangle in QML 

開發環境:
  • QT 5.2
  • QtQuick 2.1

import QtQuick 2.0

Rectangle {
    id      : root
    width   : 290
    height  : 100
    color   : "#D8D8D8"
    
    Row{
        x       : 20
        y       : 25
        spacing : 20
        
        Rectangle {
            id      : rect1     
            width   : 50                //矩形寬度
            height  : 50                //矩形長度
            color   : "lightsteelblue"  //矩形顏色
        }
        
        Rectangle {
            id      : rect2          
            width   : 50
            height  : 50
            border.color: "#b0c5de" //邊框顏色
            border.width: 4         //邊框寬度
            radius: 8               //邊框圓弧程度
        }
        
        Rectangle {
            id      : rect3         
            width   : 50
            height  : 50
            gradient: Gradient {    //從紅色至綠色的階層變化
                GradientStop {
                    position: 0.0   
                    color   : "red" }
                GradientStop {
                    position: 1.0
                    color   : "green" }
            }
            border.color: "blue"    //邊框顏色
        }
        Rectangle {
            id      : rect4      
            width   : 50
            height  : 50
            rotation: 90            //旋轉矩形90度
            gradient: Gradient {    //從紅色至綠色的階層變化
                GradientStop {
                    position: 0.0   
                    color   : "red" }
                GradientStop {
                    position: 1.0
                    color   : "green" }
            }
            border.color: "blue"    //邊框顏色
        }
    }  
}

以上顯示效果如下,由左至右分別是rect1....rect4



參考來源:http://qt-project.org/doc/qt-5/qml-qtquick-text.html


~~Next~~ 

0 意見:

張貼留言