QML入门教程(5)：Label、TextField用法介绍

Label用法代码

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Label
    {
        x:100
        y:100
        width: 100
        height: 50

        text: qsTr("我是标签")  //可被翻译
        color: "red"  //设置Label字体颜色
        font.pixelSize: 22 //字体大小
        font.italic: true  //斜体

        //字体对其方式
        horizontalAlignment:Text.AlignHCente
        verticalAlignment:Text.AlignVCenter

        //设置背景颜色
        background: Rectangle{
            color: "gray"
        }
    }
}

文本框控件 TextField 用法代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: Qt.rgba(230/255,250/255,250/255,1)

    Label{
        id:label
        x:20
        y:20
        text: "姓名"
        font.pixelSize: 22 //字体大小
    }

    TextField {
        id:nameText
        anchors.left: label.right
        anchors.leftMargin: 5
        anchors.top: label.top
        anchors.topMargin: -7

        placeholderText: qsTr("Enter name")
    }

    Button{
        anchors.top:nameText.bottom
        anchors.topMargin: 20
        anchors.left: nameText.left
        text: "获取文本框内容"
        onClicked: {
            console.log(nameText.text)
        }
    }
}

运行结果：