从零开始学习qml（三）——按钮、弹窗

从零开始学习qml（三）——按钮、弹窗

美好的事情即将发生

前言

我们继续开始今天的学习。今天实现最基础的界面交互功能。

从零开始学习qml（一）的连接：https://blog.csdn.net/weixin_37997214/article/details/109752388

从零开始学习qml（二）的连接：https://blog.csdn.net/weixin_37997214/article/details/109754591

版权所有，转载请注明出处。本文链接：https://blog.csdn.net/weixin_37997214/article/details/109827940

目录

从零开始学习qml（三）——按钮、弹窗

美好的事情即将发生

一、今天学什么

二、上图

1.实现效果

2.详细步骤

总结

---

---

一、今天学什么

废话不多说，第三章就是在咱们的程序界面上画个按钮点击后弹出一个窗口。

二、上图

1.实现效果

 

---

 

2.详细步骤

2.1打开咱们第一步弄的HappyLife工程。或者新建一个工程（可参考教程一）

2.2创建一个按钮

 

当我草率的直接写Button的时候，发现报错。

这么简单的控件为什么我用不了？于是我打开了帮助文档，查找QML的所有类型（帮助就是界面左侧最后一个按钮。选择下面索引，输入all qml type）

找到Button

点进去，看这句话

真相大白了，这东西要是想要用需要包含“头文件”（具体这叫啥如果有兄弟知道麻烦告诉我）在代码开头加入，就可以使用Button了

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 1000
    height: 618
    title: qsTr("Happy Life")
    color: "gray"


    Button{
        x:500
        y:100
        text: "Go!"
    }
}

（绘制新一的代码我没有写在这个里面）

运行效果如下：

可以看到我们在界面上创建了一个按钮，叫Go。可以点击，点一下还闪一下的。

2.3触发按钮的点击事件

（1）在程序中添加如下代码

    Button{
        x:500
        y:100
        text: "Go!"
        onClicked: setTitle("Happy Life 2")                   //点击按钮后就触发，程序名称变成 
                                                              //Happy Life 2
    }

（2）效果如下

2.4为了更好的表现按钮的触发，我们需要给每一个界面上的控件取名字。比如，我们新建一个Rectangle叫MyRectangle

    Rectangle{
        id:myRectangle                               //名字是myRectangle
        x:500
        y:300
        width:100
        height: 100
        color: "red"
    }

    Button{
        x:500
        y:100
        text: "Go!"
        onClicked: myRectangle.color="blue" ;        //鼠标点击后颜色变成“blue”
    }

效果如下：

2.5创建另一个界面

（1）在左侧选择这个文件右键，点新建。

选择Qt,QML File，起名SecondWindows

（2）更改里面的内容

import QtQuick 2.0
import QtQuick.Window 2.2

Window {
    width: 500
    height: 309
    title: qsTr("Happy Life 2")
    color: "yellow"
}

（3）在main.qml中更改如下

Window {
    visible: true
    width: 1000
    height: 618
    title: qsTr("Happy Life")
    color: "gray"
    SecondWindows{id:mySecondWindows}                 //调用一个刚刚新创建的控件，给他个名字

    Button{
        x:500
        y:100
        text: "Go!"
        onClicked: mySecondWindows.show();            //点击按钮后，界面弹出
    }
}

（4）效果如下：

 

---

总结

本章使用按钮来进行一些操作。