QML开发笔记(三):了解QML控件元素(一)


QML开发笔记(三):了解QML控件元素(一)


前言

带大家了解QML的一些基础控件,并说明一些基础属性,下面的属性大家可以复制代码去修改尝试一下效果。


附件

课程源码

Window(窗体)

透明窗口

Window {
	title: qsTr("一个完全透明的窗口") //窗口标题
    width: 640  //宽度
    height: 480  //高度
    visible: true  //是否可见
    color: "#00000000" //窗口背景色
    //#00000000 为窗口透明
    //QML支持black 等颜色样式(没有#)
    //QML支持#11cfff 等颜色样式
    //QML同样支持RGB格式
    flags:  Qt.Window | Qt.FramelessWindowHint //窗口标志 说明是什么窗口 使用 | 分割
    //Qt.Window 普通窗口模式,带标题栏
    //Qt.FramelessWindowHint 隐藏标题栏窗口
    opacity: 1 //透明度 数值区间为0~1 支持小数
    x:0 //位于父窗体的x位置 (此时window的父窗体就是桌面了)
    y:0 //位于父窗体的y位置 (此时window的父窗体就是桌面了)
}

效果:
嗯… 透明的 看不出来

普通标题窗口

Window {
	title: qsTr("一个普通标题窗口") //窗口标题
    width: 640  //宽度
    height: 480  //高度
    visible: true  //是否可见,缺省为true
    color: "#ffffff" //窗口背景色
    //#00000000 为窗口透明
    //QML支持black 等颜色样式(没有#)
    //QML支持#11cfff 等颜色样式
    //QML同样支持RGB格式
    flags:  Qt.Window  //窗口标志 说明是什么窗口 使用 | 分割,缺省为Qt.Window
    //Qt.Window 普通窗口模式,带标题栏
    //Qt.FramelessWindowHint 隐藏标题栏窗口
    opacity: 1 //透明度 数值区间为0~1 支持小数,缺省为1
    x:0 //位于父窗体的x位置,以左上角为起点,缺省为0 (此时window的父窗体就是桌面了)
    y:0 //位于父窗体的y位置,以左上角为起点,缺省为0 (此时window的父窗体就是桌面了)
}

效果:
在这里插入图片描述


Rectangle(矩形)

旋转矩形

Rectangle {
    x: 0;                  // 位于父窗体的x位置,以左上角为起点,缺省为0
    y: 0;                  // 位于父窗体的y位置,以左上角为起点,缺省为0
    width: 200;            // 宽度,缺省为0,其子对象仍会显示(相对于0)
    height:200;            // 高度,缺省为0,其子对象仍会显示(相对于0)
    color: "blue";         // 颜色,缺省为白色
    opacity: 0.5;          // 透明度,缺省为1
    rotation: 30;          // 旋转度,缺省为0,中心瞬时钟旋转
    radius: 10;            // 圆角度,缺省为0,从本元素最外框开始圆角
    border.width: 10;      // 边框宽度,缺省为0
    border.color: "white"; // 边框颜色,缺省为黑色"balck"
    z: 1;                  // 显示顺序,同一层的元素,越大越在上面,缺省则按照控件顺序显示,
    					   // 即代码中靠后的控件先显示
}

效果:
在这里插入图片描述

背景填充矩形

Window {
    width: 640  //宽度
    height: 480  //高度
    visible: true  //是否可见
    title: qsTr("Hello World") //窗口标题
    color: "#ffffff" //窗口背景色
    flags:  Qt.Window //窗口标志\类型 说明是什么窗口
    opacity: 1 //透明度 数值区间为0~1 支持小数

    Rectangle {
        x: 0;                  // 位于父窗体的x位置,以左上角为起点,缺省为0
        y: 0;                  // 位于父窗体的y位置,以左上角为起点,缺省为0
        width: parent.width;   // 宽度,此时Rectangle控件在Window控件内,属于Window的孩子,可以使用parent继承
        height: parent.height; // 高度,此时Rectangle控件在Window控件内,属于Window的孩子,可以使用parent
        color: "blue";         // 颜色,缺省为白色
        opacity: 0.5;          // 透明度,缺省为1
    }
}

效果:
在这里插入图片描述

矩形画圆

Window {
    width: 640  //宽度
    height: 480  //高度
    visible: true  //是否可见
    title: qsTr("Hello World") //窗口标题
    color: "#ffffff" //窗口背景色
    flags:  Qt.Window //窗口标志\类型 说明是什么窗口
    opacity: 1 //透明度 数值区间为0~1 支持小数

    Rectangle {
        x: 0;                  // 位于父窗体的x位置,以左上角为起点,缺省为0
        y: 0;                  // 位于父窗体的y位置,以左上角为起点,缺省为0
        width: 200;            // 宽度,此时Rectangle控件在Window控件内,属于Window的孩子,可以使用parent继承
        height: 200;           // 高度,此时Rectangle控件在Window控件内,属于Window的孩子,可以使用parent
        color: "blue";         // 颜色,缺省为白色
        opacity: 0.5;          // 透明度,缺省为1
        radius: 100;           // 圆角,通过圆角来画出一个圆形窗体出来
        clip: true;            // 截断,在Rectangle控件内的子控件,超出他本身大小后会被截断
    }
}

效果:
在这里插入图片描述


Text/Label(文本)

支持库 import QtQuick.Controls 1.4(重要)

普通文本显示

Rectangle {
        x: 0;                  // 位于父窗体的x位置,以左上角为起点,缺省为0
        y: 0;                  // 位于父窗体的y位置,以左上角为起点,缺省为0
        width: 200;            // 宽度,此时Rectangle控件在Window控件内,属于Window的孩子,可以使用parent继承
        height: 200;           // 高度,此时Rectangle控件在Window控件内,属于Window的孩子,可以使用parent
        color: "blue";         // 颜色,缺省为白色或透明(父窗口和其显示都是白色,未进一步判断)
        opacity: 0.5;          // 透明度,缺省为1
        radius: 100;           // 圆角,通过圆角来画出一个圆形窗体出来
        clip: true;            // 截断,在Rectangle控件内的子控件,超出他本身大小后会被截断
                               // 注意:clip的截断以大小为界限,不以圆角为界限

        Label {
            text: "Hello World" 			//文本内容
            color: "black" 					//文本颜色,缺省为黑色
            anchors.top: parent.top 		//顶部锚点,继承parent的顶部
            anchors.left: parent.left 		//左侧锚点,继承parent的左侧
            //anchors.right: parent.right   //右侧锚点,继承parent的右侧
            //anchors.bottom: parent.bottom //底部锚点,继承parent的底部
            anchors.topMargin: 5 			//顶部锚点距离,注意:必须有顶部锚点存在时,才可以使用此属性
            anchors.leftMargin: 5 			//左侧锚点距离,注意:必须有左侧锚点存在时,才可以使用此属性
            font.pixelSize: 13 				//字体像素大小,缺省为12
            font.bold: true  				//字体是否加粗,缺省为false
            font.underline: false 			//字体是否有下划线,缺省为false
        }
    }

效果:
在这里插入图片描述

文本居中显示

Rectangle {
        width: 200;            // 宽度,此时Rectangle控件在Window控件内,属于Window的孩子,可以使用parent继承
        height: 200;           // 高度,此时Rectangle控件在Window控件内,属于Window的孩子,可以使用parent
        color: "blue";         // 颜色,缺省为白色或透明(父窗口和其显示都是白色,未进一步判断)
        opacity: 0.5;          // 透明度,缺省为1
        radius: 100;           // 圆角,通过圆角来画出一个圆形窗体出来
        clip: true;            // 截断,在Rectangle控件内的子控件,超出他本身大小后会被截断
                               // 注意:clip的截断以大小为界限,不以圆角为界限

        Label {
            text: "Hello World" 	//文本内容
            color: "black" 			//文本颜色,缺省为黑色
            width: parent.width 	// 文本控件的宽度,缺省为0,但是会显示文字
            height: parent.height 	// 文本控件的高度,缺省为0,但是会显示文字
            font.pixelSize: 13 		//字体像素大小,缺省为12
            font.bold: true  		//字体是否加粗,缺省为false
            font.underline: false 	//字体是否有下划线,缺省为false
            verticalAlignment: Text.AlignVCenter 	//垂直居中,控件必须有height才可以使用
            horizontalAlignment: Text.AlignHCenter 	//水平居中,控件必须有width才可以使用
        }
    }

效果:
在这里插入图片描述


Button(按钮)

普通按钮

此按钮是QML自带按钮样式

Button {
        text: "按钮" 					//按钮中的文本
        width: 60 						//按钮宽度
        height: 40 						//按钮高度
        enabled: true 					//使能 true为正常,false为禁用该按钮,缺省为true
        anchors.right: parent.right   	//右侧锚点,继承parent的右侧
        anchors.bottom: parent.bottom 	//底部锚点,继承parent的底部
        anchors.rightMargin: 40			//右侧锚点距离,注意:必须有右侧锚点存在时,才可以使用此属性
        anchors.bottomMargin: 40		//底部锚点距离,注意:必须有底部锚点存在时,才可以使用此属性
    }

效果:
在这里插入图片描述

自定义样式按钮

支持库 import QtQuick.Controls.Styles 1.4(重要)
下方代码可以实现自定义鼠标悬浮时的按钮背景,和普通状态下的按钮背景,注意,control.hovered这个代码,有些人可能不会有引用,必须要全部手打出来,效果是一样的哦。

Button {
        width: 60 						//按钮宽度
        height: 40 						//按钮高度
        enabled: true 					//使能 true为正常,false为禁用该按钮,缺省为true
        anchors.right: parent.right   	//右侧锚点,继承parent的右侧
        anchors.bottom: parent.bottom 	//底部锚点,继承parent的底部
        anchors.rightMargin: 40			//右侧锚点距离,注意:必须有右侧锚点存在时,才可以使用此属性
        anchors.bottomMargin: 40		//底部锚点距离,注意:必须有底部锚点存在时,才可以使用此属性
        style: ButtonStyle { 			//style:样式 继承ButtonStyle 证明是按钮的样式设置
            background: Rectangle { 	//背景继承Rectangle
                color: {
                    if(control.hovered) //如果鼠标处于悬浮状态
                    {
                        "red"
                    }
                    else
                    {
                        "blue"
                    }
                } //颜色
                opacity: 0.5 //透明度

                Label {
                    text: "自定义"
                    width: parent.width 	// 文本控件的宽度,缺省为0,但是会显示文字
                    height: parent.height 	// 文本控件的高度,缺省为0,但是会显示文字
                    verticalAlignment: Text.AlignVCenter 	//垂直居中,控件必须有height才可以使用
                    horizontalAlignment: Text.AlignHCenter 	//水平居中,控件必须有width才可以使用
                }
            }
        }
    }

效果:
在这里插入图片描述


TextEdit(文本编辑框)

注意,TextEdit本身不存在边框的概念,需要用Rectangle自定义一个背景边框出来,属实有些麻烦了

普通文本编辑框

Rectangle{
        width: 100  					//宽度
        height: 30  					//高度
        anchors.right: parent.right   	//右侧锚点,继承parent的右侧
        anchors.bottom: parent.bottom 	//底部锚点,继承parent的底部
        anchors.rightMargin: 40			//右侧锚点距离,注意:必须有右侧锚点存在时,才可以使用此属性
        anchors.bottomMargin: 100		//底部锚点距离,注意:必须有底部锚点存在时,才可以使用此属性
        border.color: "black" 			//边框颜色
        border.width: 1 				//边框宽度
        TextEdit {
            width: parent.width  		//宽度
            height: parent.height  		//高度
            anchors.top: parent.top   	//顶部锚点
            anchors.left: parent.left 	//左侧锚点
            anchors.leftMargin: 10		//左侧锚点距离
            anchors.topMargin: 7		//顶部锚点距离
            text: "请输入游戏名称" 		//默认文字
            font.pixelSize: 12  		//文字大小
            selectByMouse: true 		//是否可以用鼠标操作
            wrapMode: Text.WrapAnywhere //自动换行
        }
    }

效果:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页