Qt第十三章：QML之基础组件Rectangle、Text、Image、TextInput、TextEdit、Shape

缺乏、安全感 2024-04-01 08:24 72阅读 0赞

**目录**

1.Rectangle矩形

2.Text 文本

3.Image 图片

4.TextInput单行文本输入框

5.TextEdit多行文本输入框

--------------------

#### 1.Rectangle矩形 ####

import QtQuick 6.3
    
    Rectangle{
        id:rect1
        width:300
        height:300
        //背景色
        color:"red"
    
        //边框颜色、边框宽度、圆角度
        border.color:"yellow"
        border.width:10
        radius:30
    
        //添加一个渐变色
        gradient:Gradient{
            GradientStop{position:0.0;color:"green"}
            GradientStop{position:1.0;color:"cyan"}
        }
    
        //内嵌一个小矩形
        Rectangle{
            id:rect2
            width:150
            height:150
            //透明色
            color:"transparent"
            //边框
            border.color:"blue"
            border.width:10
            radius:10
            //显示坐标
            x:25
            y:25
            //为小矩形添加一个点击事件
            MouseArea{
                anchors.fill:rect2
                onClicked:{
                    //退出
                    Qt.quit()
                }
            }
        }
    }

![5651a2d8c1b64cfa9b590882d3313bc1.png][]

#### 2.Text 文本 ####

import QtQuick 6.3
    
    Text{
        id: text1
        width: 300
        height: 100
    
        //字体颜色、大小、内容...
        color: "red"
        font.pointSize: 12
        text: "<b>Hello</b> <i>World!</i>"
    
        //点击事件
        MouseArea{
            anchors.fill: text1
            onClicked:{
                Qt.quit()
            }
        }
    
    }

![a156642d13d64d3985f6d2d42e5a3e00.png][]

#### 3.Image 图片 ####

import QtQuick 6.3
    
    Image{
        id: image1
        width: 300
        height:300
        //图片地址
        source: "./DeepBlue.png"
        //填充模式
        fillMode: Image.PreserveAspectFit
    }

####    ![bc5011a8687e4b938af18c452638624d.png][] ####

#### 4.TextInput单行文本输入框 ####

import QtQuick 6.3
    
    TextInput{
        id: in1
        width: 100
        height: 30
        color:"red"
        text:"hello world"
    }

#### ![b70f81da385a44b7b78f96eea6cf1af1.png][]   5.TextEdit多行文本输入框 ####

import QtQuick 6.3
    
    TextEdit{
        id: in1
        width: 200
        height: 100
        color:"red"
        //格式【纯文本PlainText、自动AutoText、富文本RichText、MarkdownText】
        textFormat: TextEdit.AutoText
        text:"hello world \n anybody"
    }

![e6392e2e0ae84487902c86c3c06142cf.png][]

6.Shape形状

import QtQuick 6.3
    import QtQuick.Shapes 6.3
    
    Shape {
        id: s1
        width: 200
        height: 150
        //形状路线
        ShapePath {
            //画笔宽度
            strokeWidth: 4
            //画笔颜色
            strokeColor: "red"
            //起始位置
            startX: 20; startY: 20
            //从起始位置划到坐标(180,130)->再划到坐标(20,130)->最终回到起点(20,20)
            PathLine { x: 180; y: 130 }
            PathLine { x: 20; y: 130 }
            PathLine { x: 20; y: 20 }
         }
     }

![ac6ffc17e2404824880f67445e66636f.png][]

[5651a2d8c1b64cfa9b590882d3313bc1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0672ce1119514b6dbc95f6b7e3e927bb.png
[a156642d13d64d3985f6d2d42e5a3e00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1054dcd68b4e402caaf5fa95b4d5f996.png
[bc5011a8687e4b938af18c452638624d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8c35cf359b0b483ca7e56ff39362b0b5.png
[b70f81da385a44b7b78f96eea6cf1af1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/97e566abfeb040de97334395feaeaaa8.png
[e6392e2e0ae84487902c86c3c06142cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/482bdabfbbbc497cb2cb0b63b7670ffe.png
[ac6ffc17e2404824880f67445e66636f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e41d714524844c769405dcde0b6628d5.png