qml中toolbox控件、ComboBox控件、PlainText实现及美化

已于 2024-03-07 10:14:55 修改
阅读量2.6k 收藏 12
点赞数 11
分类专栏： QT 文章标签： qml
于 2024-03-07 09:59:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45179361/article/details/136525045
版权

一. 内容简介

qml中toolbox控件、ComboBox控件、PlainText实现及美化

二. 软件环境

2.1vsCode

2.2Anaconda

version: conda 22.9.0

2.3pytorch

安装pytorch(http://t.csdnimg.cn/GVP23)

2.4QT 5.14.1

新版QT6.4,，6.5在线安装经常失败，而5.9版本又无法编译64位程序，所以就采用5.14.1这个用的比较多也比较稳定的一个版本。

QT编译器采用的是MSVC2017 64bit。

链接：https://pan.baidu.com/s/1ER98DPAkTUPlIyCC6osNNQ?pwd=1234

三.主要流程

3.1 toolbox代码

下面是toollbox代码，没有每页的内容，代码如下，图片就是图标图片，位置都留好了，只换图就可可以了，可以上网自己下载
使用代码

ToolBox{
    Layout.preferredWidth: 300 - 16
    Layout.leftMargin: 8
    Layout.preferredHeight: 600
}

实现代码，里面每个页面我都单独创建一个qml文件写的，如果想在一个文件里面写的话，就是我注释的那个代码，换成那个就可以了


import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

// 这玩意是播放用的
import QtMultimedia 5.12
import Qt.labs.settings 1.1
import QtQuick.Layouts 1.3


Rectangle{
    ListView {
        // 禁止滚动，固定位置
        interactive: false
        id: listView
        anchors.fill: parent
        height: 400
        clip: true
        spacing: 0
        model: ListModel {
            ListElement { name: "     粒子群算法参数设置"; module: "Module1" }
            ListElement { name: "     优化结果选取"; module: "Module2" }
            ListElement { name: "     动压轴承性能计算"; module: "Module3" }
            // Add more items as needed
        }
        Component.onCompleted: {
            // 执行一些操作
            var currentItem = listView.contentItem.children[0];
            currentItem.children[0].children[1].visible = true;
            // 其他操作...
        }
        delegate:Rectangle {
            width: listView.width
            height: content.visible ? 500:40
            clip: true

            ColumnLayout{
                anchors.fill: parent
                spacing: 0
                Rectangle {
                    Layout.preferredWidth: parent.width
                    Layout.preferredHeight: 40
                    color: listView.currentIndex === index ? "#eff0ff" : "white"
                    radius: 8 // 设置圆角半径为 10
                    clip: true
                    Text {
                        anchors.fill: parent
                        text: model.name
                        font.pixelSize: 14 // 设置字体大小为 14 像素
                        font.family: "Arial" // 设置字体样式为 Arial
                        horizontalAlignment: Text.AlignLeft // 水平左对齐
                        verticalAlignment: Text.AlignVCenter // 垂直居中对齐
                        color: listView.currentIndex === index ? "#646cff" : "#333333"
                    }

                    Rectangle {
                        anchors.right: parent.right
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.rightMargin: 20 // 向左偏移 20 个像素
                        width: 24
                        height: 24


                        color: listView.currentIndex === index ? "#eff0ff" : "white"

                        Image {
                            anchors.centerIn: parent
                            source: listView.currentIndex === index ? "images/down.png" : "images/right.png"
                            width: 16
                            height: 16
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            for (var i = 0; i <= listView.count; ++i) {
                                var currentItem = listView.contentItem.children[i];
                                if (currentItem && currentItem.children.length > 0) {
                                    if( listView.currentIndex == index){
                                        continue;
                                    }
                                    currentItem.children[0].children[1].visible = false;
                                }
                            }

                            listView.currentIndex = index;
                            content.visible = !content.visible;
                            // console.log(content.visible);
                            // console.log("点击了");
                            // Handle item click event
                            // Handle item click event


                        }
                    }
                }
                Rectangle{
                    id: content
                    Layout.preferredWidth: parent.width
                    Layout.preferredHeight: 460
                    visible: false

                    // 在上面已经给定大小了
                    Loader{
                        id: loader
                        visible: true
                        anchors.fill: parent
//                        sourceComponent: {
//                            if (model.module === "module1") {
//                                return module1;
//                            } else if (model.module === "module2") {
//                                return module2;
//                            } else if (model.module === "module3") {
//                                return module3;
//                            }
//                            // Add more conditions as needed
//                        }
                        source: model.module+".qml"
                    }
                }
            }
        }
    }
}

3.2 页面代码Module2.qml

ComboBox的样式在这个页面里面


import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

// 这玩意是播放用的
import QtMultimedia 5.12
import Qt.labs.settings 1.1
import QtQuick.Layouts 1.3

Rectangle{
    id:module2
    clip: true
    anchors.fill: parent
    //     第一个-----------------------------------------------------------
    //     第1个-----------------------------------------------------------

    // 第一个-----------------------------------------------------------
    Rectangle{
        clip: true
        width: parent.width
        height: 40
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 10

        Rectangle{
            clip: true
            width: 100
            height: 40
            anchors.left: parent.left

            Text {
                anchors.fill: parent

                text: qsTr("承载力范围:")
                font.pixelSize: 14 // 设置字体大小为 14 像素
                font.family: "Arial" // 设置字体样式为 Arial
                horizontalAlignment: Text.AlignLeft // 水平左对齐
                verticalAlignment: Text.AlignVCenter // 垂直居中对齐
            }
        }
        // 输入框
        Rectangle{
            clip: true
            width: 60
            height:30
            anchors.left: parent.left
            anchors.leftMargin: 100


            anchors.verticalCenter: parent.verticalCenter
            TextField{
                id: ffmin
                anchors.fill: parent
                text: "50" // 设置默认值
                placeholderText: qsTr("下限")
                background: Rectangle {
                    border.color: "#646cff" // 设置边框颜色
                    radius: 5
                }
            }

        }
        Rectangle{
            clip: true
            width: 60
            height:30
            anchors.left: parent.left
            anchors.leftMargin: 180
            anchors.verticalCenter: parent.verticalCenter
            TextField{
                id: ffmax
                anchors.fill: parent
                text: "51" // 设置默认值
                placeholderText: qsTr("上限")
                background: Rectangle {
                    border.color: "#646cff" // 设置边框颜色
                    radius: 5
                }
            }
        }

    }

    // 第二个-----------------------------------------------------------
    Rectangle{
        clip: true
        width: parent.width
        height: 40
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 10 + 40 * 1

        Rectangle{
            clip: true
            width: 100
            height: 40
            anchors.left: parent.left

            Text {
                anchors.fill: parent

                text: qsTr("温升范围:")
                font.pixelSize: 14 // 设置字体大小为 14 像素
                font.family: "Arial" // 设置字体样式为 Arial
                horizontalAlignment: Text.AlignLeft // 水平左对齐
                verticalAlignment: Text.AlignVCenter // 垂直居中对齐
            }
        }
        // 输入框
        Rectangle{
            clip: true
            width: 60
            height:30
            anchors.left: parent.left
            anchors.leftMargin: 100


            anchors.verticalCenter: parent.verticalCenter
            TextField{
                id: ttmin
                anchors.fill: parent
                text: "30" // 设置默认值
                placeholderText: qsTr("下限")
                background: Rectangle {
                    border.color: "#646cff" // 设置边框颜色
                    radius: 5
                }
            }

        }
        Rectangle{
            clip: true
            width: 60
            height:30
            anchors.left: parent.left
            anchors.leftMargin: 180
            anchors.verticalCenter: parent.verticalCenter
            TextField{
                id: ttmax
                anchors.fill: parent
                text: "30" // 设置默认值
                placeholderText: qsTr("上限")
                background: Rectangle {
                    border.color: "#646cff" // 设置边框颜色
                    radius: 5
                }
            }
        }

    }

    // 第三个-----------------------------------------------------------
    Rectangle{
        clip: true
        width: parent.width
        height: 40
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 10 + 40 * 2

        Rectangle{
            clip: true
            width: 100
            height: 40
            anchors.left: parent.left

            Text {
                anchors.fill: parent

                text: qsTr("气膜厚度范围:")
                font.pixelSize: 14 // 设置字体大小为 14 像素
                font.family: "Arial" // 设置字体样式为 Arial
                horizontalAlignment: Text.AlignLeft // 水平左对齐
                verticalAlignment: Text.AlignVCenter // 垂直居中对齐
            }
        }
        // 输入框
        Rectangle{
            clip: true
            width: 60
            height:30
            anchors.left: parent.left
            anchors.leftMargin: 100


            anchors.verticalCenter: parent.verticalCenter
            TextField{
                id: hhmin
                anchors.fill: parent
                text: "30" // 设置默认值
                placeholderText: qsTr("下限")
                background: Rectangle {
                    border.color: "#646cff" // 设置边框颜色
                    radius: 5
                }
            }

        }
        Rectangle{
            clip: true
            width: 60
            height:30
            anchors.left: parent.left
            anchors.leftMargin: 180
            anchors.verticalCenter: parent.verticalCenter
            TextField{
                id: hhmax
                anchors.fill: parent
                text: "30" // 设置默认值
                placeholderText: qsTr("上限")
                background: Rectangle {
                    border.color: "#646cff" // 设置边框颜色
                    radius: 5
                }
            }
        }

    }
      // 第4个-----------------------------------------------------------
    Rectangle{
        clip: true
        width: parent.width
        height: 40
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 10 + 40*3

        Rectangle{
            clip: true
            width: 100
            height: 40
            anchors.left: parent.left

            Text {
                anchors.fill: parent
                text: qsTr("优先条件:")
                font.pixelSize: 14 // 设置字体大小为 14 像素
                font.family: "Arial" // 设置字体样式为 Arial
                horizontalAlignment: Text.AlignLeft // 水平左对齐
                verticalAlignment: Text.AlignVCenter // 垂直居中对齐
            }

        }

        // 按钮
        Rectangle{
            clip: true
            width: 120
            height:30
            anchors.left: parent.left
            anchors.leftMargin: 100


            anchors.verticalCenter: parent.verticalCenter
            radius: 20

            ComboBox{
                id:control
                anchors.fill:parent
                anchors.centerIn: parent
                font.pixelSize:18
                //                font{
                //                    pixelSize: 12 // 设置字体大小为 14 像素
                //                    family: "Arial" // 设置字体样式为 Arial


                //                    }

                contentItem:Text{
                    leftPadding: 24
                    id:showtext
                    text:control.model.get(0).mText
                    //                        color:"#646cff"
                    color:"#646cff"
                    //                        font.pixelSize: 10 // 设置字体大小为 14 像素
//                    font: control.font
                    elide: Text.ElideRight
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 14 // 设置字体大小为 14 像素


                }

                onActivated: {
                    // 用户选择后更改显示文本项的颜色
                    showtext.text = control.currentText; // 设置选中项的字体颜色为红色
                }
                //指定combobox的外形(椭圆)
                background:Rectangle{
                    implicitWidth: 200
                    implicitHeight: 40
                    color:"#eff0ff"
                    radius: 20
                }


                //添加数据
                model:ListModel{
                    ListElement{
                        mText:"最大温升"
                    }
                    ListElement{
                        mText:"气膜厚度"
                    }
                    ListElement{
                        mText:"承载力"
                    }

                }
                //                contentItem: Text {
                //                    id: displayText

                //                    color: "black" // 设置默认的字体颜色为黑色
                //                }
                //指定每一个数据项的展现形式
                delegate:ItemDelegate{
                    width: control.width

                    contentItem: Text{

                        text:mText
                        //                        color:"#646cff"
                        color:"#646cff"
                        //                        font.pixelSize: 10 // 设置字体大小为 14 像素
//                        font: control.font
                        elide: Text.ElideRight
                        verticalAlignment: Text.AlignVCenter
                        font.pixelSize: 14 // 设置字体大小为 14 像素

                        leftPadding: 12
                    }
                    //指定高亮显示
                    highlighted: control.highlightedIndex === index

                }

                //设计右侧的小图标的样式
                indicator: Canvas {
                    id: canvas
                    x: control.width - width - control.rightPadding
                    y: control.topPadding + (control.availableHeight - height) / 2
                    width: 15
                    height: 10
                    contextType: "2d"

                    Connections {
                        target: control
                        function onPressedChanged() { canvas.requestPaint(); }
                    }

                    onPaint: {
                        context.reset();
                        context.moveTo(0, 0);
                        context.lineTo(width, 0);
                        context.lineTo(width / 2, height);
                        context.closePath();
                        context.fillStyle = control.pressed ? "#d3d3d3" : "#778899";
                        context.fill();
                    }
                }
                //设计弹出框的样式(点击下拉按钮后的弹出框)
                popup: Popup {
                    y: control.height - 1
                    width: control.width
                    implicitHeight: contentItem.implicitHeight
                    padding: 1
                    //弹出框以listview的形式呈现
                    contentItem: ListView {
                        clip: true
                        implicitHeight: contentHeight
                        model: control.popup.visible ? control.delegateModel : null
                        currentIndex: control.highlightedIndex
                        ScrollIndicator.vertical: ScrollIndicator { }
                    }
                    //设计弹出框的外观
                    background: Rectangle {
                        border.color: "#eff0ff"
                        radius: 10
                    }
                }
            }


        }
    }



        // 第5个-----------------------------------------------------------
        Rectangle{
            clip: true
            width: parent.width
            height: 40
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.top: parent.top
            anchors.topMargin: 10 + 40 * 4

            Rectangle{
                clip: true
                width: 100
                height: 40
                anchors.left: parent.left

                Text {
                    anchors.fill: parent
                    text: qsTr("计算:")
                    font.pixelSize: 14 // 设置字体大小为 14 像素
                    font.family: "Arial" // 设置字体样式为 Arial
                    horizontalAlignment: Text.AlignLeft // 水平左对齐
                    verticalAlignment: Text.AlignVCenter // 垂直居中对齐
                }

            }

            // 按钮
            Rectangle{
                clip: true
                width: 120
                height:30
                anchors.left: parent.left
                anchors.leftMargin: 100


                anchors.verticalCenter: parent.verticalCenter

                Button {

                    text: "Calculate"
                    anchors.fill: parent
                    anchors.centerIn: parent
                    onClicked: {
                        texttt.words += "开始寻优计算！\n"

                    }
                    onPressed: bg.color="white"
                    onReleased: bg.color="#eff0ff"
                    background: Rectangle {
                        id: bg
                        color: "#eff0ff"
                        radius: 10 // 圆角半径
                    }

                    contentItem: Text {
                        text: "Calculate"
                        font.pixelSize: 16
                        color: "#646cff" // 文本颜色

                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }
                }

            }
        }

}

3.3 PlainText.qml代码


import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

// 这玩意是播放用的
import QtMultimedia 5.12
import Qt.labs.settings 1.1
import QtQuick.Layouts 1.3


Rectangle{
    id: cccc
    property string words: ""

    clip: true

    Rectangle{
        anchors.top: parent.top


        width: parent.width
        height: 1
        color: "#c5c5c5"

    }
    //    ScrollView {
    //         anchors.fill: parent
    //    TextEdit {
    //        id: textEdit
    //        width:parent.width
    //        height:parent.height - 4
    //        anchors.top: parent.top
    //        anchors.topMargin: 4 //  上面间距为20 个像素
    //        wrapMode: TextEdit.Wrap
    //        font.pixelSize: 14
    //        text: parent.words

    //    }}
    //  内容自动下移动
    Flickable {
        id: flickable
        width: parent.width
        height: parent.height - 4
        contentWidth: textEdit.width
        contentHeight: textEdit.contentHeight
        clip: true

        contentY: textEdit.contentHeight <= height ? 0 : textEdit.contentHeight - height
         boundsBehavior: Flickable.StopAtBounds // 禁用回弹效果
        TextEdit {
            id: textEdit

            height:parent.height - 8
            anchors.top: parent.top
            anchors.topMargin: 8 //  上面间距为20 个像素
            anchors.left: parent.left
            anchors.leftMargin: 8//  上面间距为20 个像素
            wrapMode: TextEdit.NoWrap
            font.pixelSize: 14
            text: cccc.words

        }

    }

}

3.4 效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四.参考

http://t.csdnimg.cn/2jfvK
http://t.csdnimg.cn/ks0Aj

Qt Quick qml自定义控件：qml实现电池控件
琅嬛福地
07-14 554
电量条使用矩形Rectangle来表示，用Repeater重复绘制10个矩形即可。在main.qml中使用定时器模拟电量数值，在实际开发中，需要接入实际的数值。以上代码在Qt6.7.1通过测试测试。
Qt Style Sheet实践（二）：组合框QComboBox的定制
weixin_34176694的博客
04-07 3213
导读      组合框是一个重要且应用广泛的组件，一般由两个子组件组成：文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下，组合框能够很好的满足我们的需求。如我们经常使用的聊天软件QQ登录框，便是一个很好的应用例子：      显然，用户既可以自己手动输入新的QQ号码，也可以在列表框中选择历史输入记录。对于提高用户体验是一个不错的手段。这篇博文重点讲述如何用QS...
qml之combox界面美化
qq_62975986的博客
12-25 399
combox界面美化
qml CheckBox 复选框
最新发布
gopher9511的博客
09-12 229
在QML中，CheckBox是一个用于表示二进制状态（选中或未选中）的控件。它通常用于允许用户从两个互斥的选项中进行选择，例如“是/否”或“开/关”。CheckBox属于QtQuick.Controls模块，继承自AbstractButton，因此它具有AbstractButton的所有属性和方法。
QML-自定义ComboBox
06-13
这里实现了一个多功能的ComboBox,具体实现内容可以看我博客http://blog.csdn.net/z609932088/article/details/73196172
qml控件都有哪些？
weixin_42588672的博客
02-15 364
QML(Qt Meta-Object Language)是一种用于创建用户界面的语言，它是Qt框架的一部分。以下是一些常见的QML控件： Rectangle(矩形)：用于绘制矩形或正方形的基本元素。 Text(文本)：用于在用户界面中显示文本。 Image(图片)：用于在用户界面中显示图像。 Button(按钮)：用于响应用户交互事件的控件。 TextInput(文本输入框)：用于接收用户输入的...
Qml控件：ComboBox
木牛的博客
02-19 1252
的类型作为代理，这一点是为了确保弹框能够正常的交互工作以及自动关闭，如果使用其他类型作为代理组件，那么一定需要自己关闭弹框。在此我们使用官方推荐的。去定制，因为你的数据是一个数组，并且更有可能是一个动态数组（可以支持增删改等操作）。是一个图片按钮，跟按钮的属性基本一致，只是多了一个图片，可以参考这骗文章：。类型去定义，但它不能使用其他类型定义，毕竟这是一个弹框，不可以用。对于每项的背景色的定制，通上述的定制背景一样，使用一个。，这个和上述的定制背景可以做一样的操作。来说，最重要的是要定制它弹出的内容，及。
QML之Text控件实现信息滚动显示
10-26
在本例中，我们探讨的是如何利用QML的Text控件来实现信息的滚动显示，特别是一种来回循环显示，并且能够从头重新开始的效果。在QT 5.12版本中，这种功能可以通过结合使用Text、SequentialAnimation和Property...
QML ComboBox自定义控件
11-19
本篇文章将深入探讨如何在QML中自定义ComboBox控件，以解决按键上下操作的问题。 首先，理解ComboBox的基本结构至关重要。ComboBox主要由两部分组成：一个可编辑的文本输入（通常称为Delegate）和一个下拉菜单，...
qml时间滚筒控件-使用PathView来实现
03-15
qml时间滚筒控件，使用PathView来实现
Qt-Qml-Calendar_qml_QT_qml日历控件_calendar_
10-04
描述中提到"QT/QML的日历控件，纯QML实现"，这意味着该日历控件完全由QML编写，无需借助C++扩展或额外的库。这使得代码更加简洁，易于阅读和维护，并且可以在任何支持QML的Qt平台上运行，如桌面、移动或嵌入式系统。...
ComboBox的美化
04-10
本案例介绍如和美化下拉列表框 需要的朋友请看
QML Material 风格的界面
04-29
QML 实现anroid风格的界面 主要是通过添加google的Material QML实现的类 通过Qt 编译 从而变成QML的第三方类
ComboBox中添加颜色和式样
08-21
最近研究GDI+做了些小东西，看到网上关于ComboBox里添加颜色和Brush式样的帖子不多，发一个上来供大家参考
【QML】Flat风格的QML按键美化
-凌凌漆-的博客
08-08 106
【代码】【QML】Flat风格的QML按键美化。
【Qt QML】ComboBox组件
wangyi463295828的博客
08-11 258
ComboBox是一种常用的图形用户界面（GUI）控件，它结合了文本框（TextBox）和下拉列表（DropDownList）的功能。用户可以从下拉列表中选择一个选项，也可以直接在文本框中输入内容。
QML控件类型：ComboBox
友善啊，朋友的博客
01-01 7752
一、描述 ComboBox 是一个组合按钮和弹出列表。 它提供了一种以占用最少屏幕空间的方式向用户呈现选项列表的方法。 ComboBox 填充有数据模型。数据模型通常是 JavaScript 数组、ListModel或整数，也支持其他类型的数据模型。 二、属性成员 1、[read-only]acceptableInput : bool 是否在可编辑文本字段中包含可接受的文本。 2、count : int 组合框中的项目数。 3、currentIndex : int 组合框中当..
【qml】使用Material风格对qml控件进行美化
xia0414的博客
07-10 464
Material样式允许自定义五个属性。：控件高度（控件阴影深度）
QML自定义ComboBox控件：解决按键操作难题
资源摘要信息:"在QML中，ComboBox是一个常用的控件，用于提供一个可选择的列表供用户进行选择。然而，随着应用程序需求的提高，标准的ComboBox控件可能无法完全满足特定的使用场景，比如需要处理按键上下操作的问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值