QT qml 编辑框使用

最近公司项目需要做图形界面，考虑到需要跨平台，最终选择了用qt。本人在此之前是个qt小白，水平停留在听说过的水平，但是公司的项目不会也得硬着头皮上不是，简单的编辑框内容设置和获取就把我给难住了，经过痛苦的百度和查看官网后终于搞定了，特在此记录下，希望为以后有同样需求的小伙伴减少痛苦。

第一步，建立VS工程

打开VS2019，选择“Qt Quick Application”，然后点击下一步

选择项目存放路径和设置项目名

点击创建，点击next，进行项目的基本设置，最后点击“finish”，至此一个项目创建完成，

建好的项目基本结构如下图

此时直接编译运行会出现一个名为“Hello World”的空白界面

第二步， 放置编辑框

用qtcreator打开main.qml文件，如下

 选择Imports导入“QtQuick.Controls 2.13”

下面正式进行编辑框放置，最终的界面设计如下

第三步，添加C++代码，实现获取和设置编辑框内容

设置编辑框属性和一些基本设置，截取了重点部分

C++代码部分

完整代码可参考如下代码段

// 头文件部分
#pragma once

#include 
#include 
#include 

class CTextInputImpl : public QWidget
{
    Q_OBJECT
        Q_PROPERTY(QString input READ getInput WRITE setInput NOTIFY inputTextChanged)
        Q_PROPERTY(QString output READ getOutput WRITE setOutput NOTIFY outputTextChanged)

public:
    explicit CTextInputImpl(QWidget * parent = nullptr);
    ~CTextInputImpl() = default;

    Q_INVOKABLE void onBtnClickedGet();
    Q_INVOKABLE void onBtnClickedSet();

    QString getInput() const;
    void setInput(const QString & str);

    QString getOutput() const;
    void setOutput(const QString & str);

signals:
    void inputTextChanged();
    void outputTextChanged();

private:
    QString m_strInput;
    QString m_strOutput;
};

// cpp部分
#include "texter.h"
#include 

CTextInputImpl::CTextInputImpl(QWidget * parent) :
    QWidget(parent)
{
}

void CTextInputImpl::onBtnClickedGet()
{
    QMessageBox::information(this, QStringLiteral("边界框内容"), m_strInput, QMessageBox::Ok);
}

void CTextInputImpl::onBtnClickedSet()
{
    setOutput(m_strInput);
}

QString CTextInputImpl::getInput() const
{
    return m_strInput;
}

void CTextInputImpl::setInput(const QString & str)
{
    if (m_strInput != str)
    {
        m_strInput = str;
        emit inputTextChanged();
    }
}

QString CTextInputImpl::getOutput() const
{
    return m_strOutput;
}

void CTextInputImpl::setOutput(const QString & str)
{
    if (m_strOutput != str)
    {
        m_strOutput = str;
        emit outputTextChanged();
    }
}

// 主函数 main.cpp
#include 
#include 
#include "texter.h"

int main(int argc, char * argv[])
{
#if defined(Q_OS_WIN)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("texter", new CTextInputImpl());
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.13

Window {
    visible: true
    width: 480
    height: 320
    title: qsTr("编辑框实验")

    Button {
        id: m_btnGet
        x: 60
        y: 133
        text: qsTr("get")
        onClicked: {
            texter.onBtnClickedGet()
        }
    }

    Button {
        id: m_btnSet
        x: 277
        y: 133
        text: qsTr("set")
        onClicked: {
            texter.onBtnClickedSet()
        }
    }

    Rectangle {
        width: 360
        height: 24
        color: "white"
        anchors.left: parent.left
        anchors.leftMargin: 60
        anchors.top: parent.top
        anchors.topMargin: 10
        border.color: "grey"

        TextInput {
            id: m_edtInput
            anchors.fill: parent
            anchors.margins: 2
            maximumLength: 25
            font.pointSize: 12
            focus: true
            text: m_edtInput.text
            onTextChanged: {
                texter.input = m_edtInput.text
            }
        }
    }

    Rectangle {
        width: 360
        height: 24
        color: "white"
        anchors.left: parent.left
        anchors.leftMargin: 60
        anchors.top: parent.top
        anchors.topMargin: 70
        border.color: "grey"

        TextInput {
            id: m_edtOutput
            anchors.fill: parent
            anchors.margins: 2
            maximumLength: 25
            font.pointSize: 12
            text: m_edtOutput.text
            onTextChanged: {
                texter.output = m_edtOutput.text
            }
        }
    }

    Text {
        id: m_stcInput
        x: 10
        y: 16
        text: qsTr("input:")
        font.pixelSize: 12
    }

    Text {
        id: m_stcOutput
        x: 10
        y: 76
        text: qsTr("output:")
        font.pixelSize: 12
    }

    Connections {
        target: texter
        onInputTextChanged: {
            m_edtInput.text = texter.input
        }

        onOutputTextChanged: {
            m_edtOutput.text = texter.output
        }
    }
}