QT6中QML常用控件使用示例

Qt6 中 QML 常用控件使用示例详解

QML (Qt Meta-Object Language) 是 Qt 框架中用于构建用户界面的声明式语言，它提供了丰富的控件来快速构建现代化的用户界面。本文将详细介绍 Qt6 中 QML 的常用控件，并通过代码示例展示它们的用法。

一、基础控件

1.1 Text (文本显示)

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "Text 控件示例"

    Text {
        id: myText
        text: "Hello, Qt6!"
        font.pixelSize: 24
        color: "blue"
        anchors.centerIn: parent
    }
}

常用属性​​：

• text: 显示的文本内容
• font: 字体设置（可设置大小、粗细、样式等）
• color: 文本颜色
• horizontalAlignment: 水平对齐方式
• verticalAlignment: 垂直对齐方式

1.2 Rectangle (矩形)

Rectangle {
    width: 200
    height: 100
    color: "lightblue"
    radius: 10  // 圆角半径
    
    Text {
        text: "矩形区域"
        anchors.centerIn: parent
    }
}

常用属性​​：

• width/height: 尺寸
• color: 填充颜色
• radius: 圆角半径
• border.width/border.color: 边框宽度和颜色

1.3 Image (图片显示)

Image {
    source: "https://example.com/image.png"
    width: 200
    height: 200
    fillMode: Image.PreserveAspectFit  // 保持宽高比
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("图片被点击")
        }
    }
}

常用属性​​：

• source: 图片路径（本地或网络）
• fillMode: 填充模式（保持比例、拉伸等）
• asynchronous: 是否异步加载
• mipmap: 是否使用mipmap

二、输入控件

2.1 TextField (单行文本输入)

TextField {
    id: textField
    width: 200
    placeholderText: "请输入内容"
    font.pixelSize: 16
    
    onTextChanged: {
        console.log("输入内容:", text)
    }
    
    background: Rectangle {
        radius: 5
        border.color: textField.activeFocus ? "blue" : "gray"
        border.width: 1
    }
}

常用属性​​：

• text: 当前文本内容
• placeholderText: 占位提示文本
• validator: 输入验证器
• echoMode: 显示模式（正常、密码等）

2.2 TextArea (多行文本输入)

TextArea {
    width: parent.width - 20
    height: 100
    anchors.horizontalCenter: parent.horizontalCenter
    placeholderText: "请输入多行文本..."
    
    onTextChanged: {
        console.log("多行文本内容:", text)
    }
}

2.3 ComboBox (下拉选择框)

ComboBox {
    width: 200
    model: ["选项1", "选项2", "选项3"]
    
    onCurrentIndexChanged: {
        console.log("当前选择:", currentIndex, model[currentIndex])
    }
}

常用属性​​：

• model: 数据模型（可以是列表或ListModel）
• currentIndex: 当前选中的索引
• editable: 是否可编辑

三、布局控件

3.1 Column (垂直布局)

Column {
    anchors.centerIn: parent
    spacing: 10
    
    Text { text: "第一行" }
    Text { text: "第二行" }
    Text { text: "第三行" }
}

常用属性​​：

• spacing: 子项间距
• anchors: 布局位置
• width/height: 布局尺寸

3.2 Row (水平布局)

Row {
    anchors.centerIn: parent
    spacing: 10
    
    Rectangle { width: 50; height: 50; color: "red" }
    Rectangle { width: 50; height: 50; color: "green" }
    Rectangle { width: 50; height: 50; color: "blue" }
}

3.3 Grid (网格布局)

Grid {
    columns: 3
    rows: 3
    spacing: 10
    anchors.centerIn: parent
    
    Repeater {
        model: 9
        delegate: Rectangle {
            width: 50
            height: 50
            color: index % 2 == 0 ? "lightgray" : "white"
            Text { text: index+1; anchors.centerIn: parent }
        }
    }
}

四、容器控件

4.1 ListView (列表视图)

ListView {
    width: parent.width
    height: 200
    anchors.horizontalCenter: parent.horizontalCenter
    model: ListModel {
        ListElement { name: "项目1" }
        ListElement { name: "项目2" }
        ListElement { name: "项目3" }
    }
    
    delegate: ItemDelegate {
        text: name
        width: parent.width
        onClicked: {
            console.log("点击了:", name)
        }
    }
}

4.2 ScrollView (滚动视图)

ScrollView {
    width: parent.width - 20
    height: 200
    anchors.horizontalCenter: parent.horizontalCenter
    
    Rectangle {
        width: 600
        height: 400
        color: "lightgray"
        
        Text {
            text: "这是一个很长的文本内容..." + 
                  "这里有很多很多文字..." +
                  "需要滚动才能看到全部内容..."
            anchors.fill: parent
            wrapMode: Text.Wrap
        }
    }
}

五、交互控件

5.1 Button (按钮)

Button {
    text: "点击我"
    width: 100
    height: 40
    anchors.centerIn: parent
    
    background: Rectangle {
        radius: 5
        color: parent.down ? "lightblue" : "blue"
    }
    
    contentItem: Text {
        text: parent.text
        color: "white"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
    
    onClicked: {
        console.log("按钮被点击")
    }
}

5.2 CheckBox (复选框)

CheckBox {
    text: "同意条款"
    checked: false
    anchors.centerIn: parent
    
    onCheckedChanged: {
        console.log("复选框状态:", checked)
    }
}

5.3 RadioButton (单选按钮)

Row {
    anchors.centerIn: parent
    spacing: 20
    
    RadioButton {
        text: "选项1"
        checked: true
        onCheckedChanged: {
            if (checked) console.log("选择了选项1")
        }
    }
    
    RadioButton {
        text: "选项2"
        onCheckedChanged: {
            if (checked) console.log("选择了选项2")
        }
    }
}

六、自定义控件示例

6.1 自定义按钮组件

​​CustomButton.qml​​:

import QtQuick 2.15
import QtQuick.Controls 2.15

Button {
    id: root
    property color normalColor: "blue"
    property color hoverColor: "lightblue"
    property color pressedColor: "darkblue"
    
    background: Rectangle {
        radius: 5
        color: {
            if (root.down) pressedColor
            else if (mouseArea.containsMouse) hoverColor
            else normalColor
        }
    }
    
    contentItem: Text {
        text: root.text
        color: "white"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
    
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
    }
}

使用自定义按钮​​:

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "自定义控件示例"
    
    CustomButton {
        text: "自定义按钮"
        normalColor: "green"
        hoverColor: "lightgreen"
        pressedColor: "darkgreen"
        anchors.centerIn: parent
        onClicked: {
            console.log("自定义按钮被点击")
        }
    }
}

七、高级特性应用

7.1 动画效果

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "动画示例"
    
    Rectangle {
        id: rect
        width: 100
        height: 100
        color: "red"
        anchors.centerIn: parent
        
        SequentialAnimation on x {
            id: anim
            NumberAnimation { to: 200; duration: 1000 }
            NumberAnimation { to: 0; duration: 1000 }
            loops: Animation.Infinite
        }
        
        MouseArea {
            anchors.fill: parent
            onClicked: anim.start()
        }
    }
}

7.2 状态管理

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "状态管理示例"
    
    Rectangle {
        id: rect
        width: 200
        height: 100
        color: "blue"
        anchors.centerIn: parent
        
        states: [
            State {
                name: "highlighted"
                PropertyChanges { target: rect; color: "yellow" }
                AnchorChanges { target: rect; anchors.horizontalCenter: undefined; x: 50 }
            }
        ]
        
        transitions: Transition {
            ColorAnimation { duration: 500 }
            AnchorAnimation { duration: 500 }
        }
        
        MouseArea {
            anchors.fill: parent
            onClicked: rect.state = rect.state === "highlighted" ? "" : "highlighted"
        }
    }
}

八、最佳实践建议

1. ​​组件化设计​​：将常用UI元素封装为自定义组件，提高代码复用性
2. ​​样式分离​​：使用样式表或属性绑定管理外观，便于统一修改
3. ​​性能优化​​：
   • 对于大量数据列表，使用ListView而非Repeater
   • 合理使用visible和opacity控制元素显示
4. ​​响应式设计​​：使用锚定系统和布局容器实现自适应界面
5. ​​状态管理​​：合理使用states和transitions实现复杂交互效果

通过本文的介绍和示例代码，读者应该能够掌握Qt6中QML常用控件的基本用法和高级特性。在实际开发中，建议结合具体项目需求，灵活运用这些控件和技巧，构建高效、美观的用户界面。