QML基础控件(一)

最新推荐文章于 2025-03-24 20:49:38 发布

旺代

最新推荐文章于 2025-03-24 20:49:38 发布

阅读量795

点赞数 25

文章标签：开发语言 qt

本文链接：https://blog.youkuaiyun.com/2301_82023822/article/details/145430251

版权

1.Rectangle

Rectangle是一个用于创建矩形的基本元素。

属性：

width和height：用于指定矩形的宽度和高度。
x和y：用于指定矩形在父容器中的位置。
color：用于设置矩形的填充颜色。
border.color和border.width：用于设置矩形边框的颜色和宽度。
radius：用于设置矩形的圆角半径。
gradient：用于设置矩形的渐变填充效果。
opacity：用于设置矩形的透明度。
scale和rotation：用于设置矩形的缩放倍数和旋转角度。
antialiasing：用于设置是否抗锯齿。

功能：

创建矩形：Rectangle用于在QML界面中创建矩形区域。
布局管理：Rectangle可以作为布局容器的子元素，参与各种布局管理，如水平布局、垂直布局等。
交互和效果：Rectangle支持鼠标事件，如单击、双击、鼠标移动等，可以通过信号处理器来响应这些事件。同时，也可以使用QML的动画系统对Rectangle的属性进行动画处理，实现动态效果，如淡入淡出、移动、缩放等。
继承和扩展：Rectangle继承自Item，因此它继承了Item的所有属性和方法，同时也可以在其基础上进行扩展。例如，可以通过添加自定义属性和方法来扩展Rectangle的功能，以满足特定的需求。

示例：

Rectangle {
    width: 200
    height: 200
    anchors.centerIn: parent
    color: "blue"

    border.color: "black"
    border.width: 3

    radius: 15
    //radius: width/2  //圆形

    gradient: Gradient {
        orientation: Gradient.Horizontal
        GradientStop { position: 0.0; color: "aliceblue" }
        GradientStop { position: 0.33; color: "skyblue" }
        GradientStop { position: 1.0; color: "blue" }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("mouse clicked");
    }
}

2.Label

Label是一个用于显示文本的控件。

属性：

background：用于设置Label的背景项目。如果背景项没有明确指定大小，它会自动遵循控件的大小。
bottomInset和leftInset：用于设置Label的底部和左侧的内边距。
text：用于设置Label显示的文本内容。
color：用于设置Label的文本颜色。
font：用于设置Label的字体。
style：用于设置Label的文本样式。
wrapMode：用于设置Label的文本换行模式。

功能：

显示文本：Label用于在QML界面中显示文本信息。
支持HTML格式：Label的text属性支持HTML格式的字符串解析，例如可以使用<b>、<i>等标签来设置文本的加粗、斜体等样式。
可作为其他控件的子元素：Label可以作为其他QML控件的子元素，参与布局和交互。
支持信号和槽机制：Label可以通过信号和槽机制与其他QML对象进行交互，例如可以在Label的信号处理器中响应鼠标点击、文本变化等事件。

示例：

import QtQuick
import QtQuick.Controls

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

    Item {
        anchors.fill: parent

        Label {
            anchors.centerIn: parent
            text: "Hello World!"
            font.pixelSize: 20
            font.italic: true
            font.bold: true
            color: "black"
        }
    }
}

3.Button

Button是一个用于创建按钮的基本元素。

属性：

text：用于设置按钮上显示的文本内容。
width和height：用于指定按钮的宽度和高度。
x和y：用于指定按钮在父容器中的位置。
color：用于设置按钮的前景颜色，即文本颜色。
background：用于设置按钮的背景，可以是一个Rectangle或其他可视化元素。
enabled：用于设置按钮是否可用，默认为true。
flat：用于设置按钮是否为扁平样式，默认为false。
highlighted：用于设置按钮是否突出显示，默认为false。
font.pointSize：用于设置按钮上文本的字体大小。

功能：

创建按钮：Button用于在QML界面中创建按钮，用户可以通过点击按钮来执行相应的操作。
响应点击事件：Button提供了clicked信号，当按钮被点击时会发出该信号，可以通过连接到这个信号来执行按钮的动作。
支持多种交互方式：Button支持鼠标事件，如单击、双击、鼠标移动等，还可以通过设置hoverEnabled属性来支持鼠标悬停效果。
自定义样式：Button的背景和文本样式可以通过设置相应的属性进行自定义，也可以通过继承Button来创建自定义的按钮样式。
与其他控件结合使用：Button可以与其他QML控件结合使用，如与Text、Rectangle等组合实现更复杂的界面布局和交互效果。

示例：

import QtQuick
import QtQuick.Controls.Basic

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

    Button {
        id: button
        anchors.centerIn: parent
        text: "clicked"
        implicitWidth: 80
        implicitHeight: 50

        onClicked: console.log("clicked")
        background: Rectangle {
            color: button.down ? "blue" : "aliceblue"
            radius: 20
        }
    }
}

、

4.CheckBox

CheckBox是一个用于创建复选框的基本元素。

属性：

checked：用于设置或获取复选框的选中状态，是一个布尔值，默认为false。
tristate：用于设置复选框是否为三态复选框，默认为false。如果设置为true，复选框将有三种状态：未选中、部分选中和完全选中。
text：用于设置复选框旁边显示的文本内容。
width和height：用于指定复选框的宽度和高度。
x和y：用于指定复选框在父容器中的位置。
color：用于设置复选框的前景颜色，即文本颜色。
background：用于设置复选框的背景，可以是一个Rectangle或其他可视化元素。
enabled：用于设置复选框是否可用，默认为true。
font.pointSize：用于设置复选框上文本的字体大小。

示例：

Column {
    ButtonGroup {
        id: group
        exclusive: false
        checkState: parentBox.checkState
    }

    CheckBox {
        id: parentBox
        text:"all"
        checkState: group.checkState
    }

    CheckBox {
        text: "child_1"
        leftPadding: indicator.width
        ButtonGroup.group: group
    }

    CheckBox {
        text: "child_2"
        leftPadding: indicator.width
        ButtonGroup.group: group
    }
}

5.RadioButton

RadioButton是一个用于创建单选按钮的基本元素。

属性：

checked：用于设置或获取单选按钮的选中状态，是一个布尔值，默认为false。
text：用于设置单选按钮旁边显示的文本内容。
width和height：用于指定单选按钮的宽度和高度。
x和y：用于指定单选按钮在父容器中的位置。
color：用于设置单选按钮的前景颜色，即文本颜色。
background：用于设置单选按钮的背景，可以是一个Rectangle或其他可视化元素。
enabled：用于设置单选按钮是否可用，默认为true。
font.pointSize：用于设置单选按钮上文本的字体大小。

示例：

Column {
    RadioButton {
        checked: true
        text: "Btn_1"
    }

    RadioButton {
        text: "Btn_2"
    }

    RadioButton {
        text: "Btn_3"
    }
}

6.ComboBox

ComboBox是一种用于显示下拉列表的控件。

属性：

count：类型为整数，表示ComboBox中选项的数量。
currentIndex：整数类型，确定当前选中选项的索引。
currentText：字符串类型，代表当前选中选项的文本内容。
currentValue：类型为var，用于存储当前选中项的相关值。
delegate：组件类型，可能用于定制ComboBox中每个选项的显示样式等。
displayText：字符串类型，用于显示的文本内容。
down：表示ComboBox是否处于下拉展开状态。
editText：在可编辑ComboBox中与用户输入的文本相关。
editable：确定ComboBox是否可编辑。
model：用于定义ComboBox的选项数据来源。
popup：与ComboBox的弹出部分（如下拉菜单部分）相关。

信号：

accepted() ：当输入被接受（例如可编辑ComboBox输入完成且输入合法）时发出。
activated(int index)：当某个选项被激活（如选中）时发出，同时传递被激活选项的索引。
highlighted(int index)：当某个选项被高亮显示（如鼠标悬停）时发出，传递被高亮显示选项的索引。

示例：

ComboBox {
    id: comboBox
    anchors.centerIn: parent
    model: ["Apple", "Banana", "Cherry"]
    currentIndex: 0
    onActivated: console.log("Selected: ",model[currentIndex])
}


ComboBox {
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: parent.top
    model: ListModel {
        id: fruitModel
        ListElement { name: "Apple" }
        ListElement { name: "Banana" }
        ListElement { name: "Cherry" }
    }
    editable: true
    onAccepted: {
        if(find(editText) === -1)
            fruitModel.append({name: editText})
    }
}