qml学习

qml项目

打开 Qt Creator 并创建一个新的项目，我们再次选择 Qt Quick Application Empty 作为我们的模板。

如您所见，我们现在处于与 Hello World 应用程序完全相同的位置。 开始新项目时，我总是做的第一件事是更新 main.qml 文件中的导入。 无论出于何种原因，Qt 都不会使用最新的导入创建 QML 文件，所以让我们更改它。

目前我们有 QtQuick 2.12 和 QtQuick.Window 2.12 作为我们在 main.qml 文件中的导入

QtQuick.Window。 我们需要的是 QtQuick.Controls 2.12 12 这对大多数 Qml 应用程序或多或少必不可少，因为它具有构建大多数应用程序所需的所有基本控件和功能。

添加

import QtQuick.Controls 2.12

把

Window 改为ApplicationWindow

我们将使用 ApplicationWindow，它基本上就像我们的窗口一样，我只是更喜欢它，因为它具有一些窗口没有的强大功能。 但在这种情况下，您使用的窗口并不重要。 接下来，我们将更改应用程序的标题。

    title: "Task Master"

如您所见，删除了qsTr（“”）。它是一个国际化工具,您可以将其赋予组件可能具有的任何标题和文本属性,如果来自其他国家/地区的用户使用您的应用程序，您可以使用 Qt 提供的翻译文件指定该文本的翻译。当您想要构建要在世界各地发布的应用程序时，这非常棒。 有翻译或多或少是必不可少的。最常见的是，您会发现翻译中使用了两种或多种语言。 您有一种主要语言是开发的主要重点.你有一种主要语言是开发的主要重点，很可能是开发人员的母语，然后你有另外两种主要语言，如英语、法语或普通话.这些将使地球上几乎所有人或多或少都能够理解您所写的内容。在我们的情况下，您不需要它，因为我们不想将我们的应用程序翻译成英语以外的任何其他语言。

Loading the Pages

现在到我们要在我们的应用程序中编写的第一个组件，一个堆栈视图。使用此堆栈视图，我们希望在加载所有数据时更改页面。我的意思是，堆栈视图将有一个初始项目，即我们的加载页面？在我们的加载页面中，我们将加载应用程序所需的所有数据。如果这是成功的，那么我们将切换到我们的主要内容页面。这是在 Qt 中制作加载页面的最简单方法。

但什么是堆栈视图。 好吧，想象它的最简单方法是一堆相互堆叠的页面，您可以更改哪个项目/页面位于该堆栈的前面。由于各种原因，它是最常用的组件之一，在我们的例子中用于加载另一个页面。 但是你也可以加载远程页面，或者图像抛出这个。

首先用相应的括号键入 Stack View。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

ApplicationWindow
{
    visible: true
    width: 640
    height: 480
    title: "Task-Master"
    StackView
    {
		id:contentFrame
    }
}

之后将 id 添加到我们的 Stack View，这里我选择 contentFrame 作为我们的 id。 主要是因为这是我们所有内容都将被带到的框架，以及我以这种方式学习的事实。Id 必须始终是唯一的。 你 可以从 QML 文件中的任何位置调用组件的 id

写入 id 后，让我们添加我们需要的下一个属性。 目前我们的组件没有 with 和 hight。 我们现在可以给它一个静态和高度，但这会导致用户调整窗口大小时出现问题，因此我们将使用锚点。对我们来说，最好的锚点就是这个。

anchors.fill: parent

我们可以使用它来填充我们的父级 ApplicationWindow我们的堆栈视图,这也可以使用它来完成。

height: parent.height
width: parent.width

这也是完全可以接受的，除了一行就只有两行。此外，当使用 anchors.fill 时，您还将元素定位在 0 处，0 处，宽度和高度不是这种情况.确实，它也将自己定位在 0, 0 上，但这也可能会改变，只有在有意使用边距时，锚点才能改变位置。 所以，在这种情况下，我会选择上面的选项使用第二个选项有一个用例抛出。 那就是当您从另一个 qml 文件导入页面时。 锚选项混淆了 Qt。 这并不意味着它不会起作用，但是您会收到一些关于在这种情况下不使用锚点的警告，我建议不要在那里使用它们。

qrc:/Main/Load_Page.qml:4:1: QML Load_Page: StackView has detected
conflicting anchors. Transitions may not execute properly.

像这样的警告，但您或多或少可以忽略它们。 至少直到你在使用它时遇到真正的问题。接下来，我们需要为 Stack View 设置 initialItem。 这是将成为我们的加载页面。转到可以找到项目树的左侧。 在那里你需要右键单击 qml.qrc。 这将打开一个菜单，您可以在其中找到添加新…当您单击它时，将打开一个向导创建Load_Page.qml,添加

import QtQuick.Controls 2.12

添加

width: parent.width
height: parent.height

您可以通过右键单击我们项目中的文件来获取 URL树，然后选择复制 URL。值得一提的是，您不需要此处 URL 前的 qrc:/。 由于我们的 Load_Page.qml 与 main.qml 位于同一目录和 Prefix 内，这意味着您可以在此处编写Load_Page.qml。我只是结束总是将它保留在即使它在同一目录和前缀中，因为我只是复制 URL，而且当你有一个不同的项目结构和多个不同的前缀甚至多个不同的 qrc 资源目录时，你将需要 像我们在这里一样使用完整的 URL。这样我们就完成了 main.qml 中的 Stack View。Load_Page 已加载，但问题是当前我们的 Load_Page 中没有任何内容。所以，让我们改变它。 首先，我们将为 Load_Page 制作背景。有几种方法可以做到这一点，一种是将项目标签更改为页面标签，然后添加背景属性。另一个在我看来更可取的选择。 添加一个矩形并使其与项目一样大。

对于宽度和高度，我们将再次使用锚点，就像堆栈视图一样。 主要是想省去再写一行，也因为这里是更合适、更优雅的解决问题的方法.

添加

anchors.fill: parent

现在要做的最后一件事是给矩形一个颜色。

color: "#2c3E50"

打开qt Designer

当您单击忽略警告时，您现在可以看到表单编辑器。表单编辑器基本上是一个拖放设计器。您在 Library Tap 的左侧拥有当前导入的所有组件。在那里您可以找到基本动画组件、图像、标签和按钮中的任何内容。稍后我们将讨论在表单编辑器和设计器中在哪里查找内容以及如何搜索内容。 现在，只需在 QML 类型下的搜索栏中键入并键入busy indicator。 现在只需将组件拖放到表单编辑器和我们的彩色背景上。

一旦你把它放在那里，回到我们的文本编辑器。 您可以通过再次将顶部的 Tap 切换到文本编辑器来完成此操作。 但是因为我们现在不打算使用 Designer， 转到左侧边栏并单击“编辑”，这将使我们回到正常的文本编辑器。

如果您现在调查我们的 Load_Page.qml，您会发现我们的文件中添加了一个新组件。

在这里，我们有两个迄今为止还没有的新属性。 这里X、Y 位置。 它们在定位方面非常有用。 如果您有不同类型的显示器和尺寸，就会出现问题。 如果你有固定的 x 或 y 位置，这将导致一个非常笨拙的 UI，甚至在某些方面会破坏整个应用程序。

为此，我们不会使用任何固定的 x 或 y 的位置，而是使用锚点。 有许多不同的锚点，但最常用和最有用的是：

• Anchors.Left
• Anchors.Right
• Anchors.Top
• Anchors.Bottom
• Anchors.verticelCenter
• Anchors.horizontelCenter
• Anchors.centerIn

正如他们的名字一样，他们能够将组件与一侧对齐或居中

在这种情况下，我们将使用 anchors.centerIn 锚点。我们希望将忙碌指示器放在中间的背景上。 我们现在可以像以前一样在普通的文本编辑器中编写它，但我想向您展示使用设计/属性编辑器执行此操作的方法。 再次打开 Form Editor 并从 Navigator 中选择 Busy Indicator。

添加一个Main_Page.qml

添加

import QtQuick.Controls 2.12

现在我们需要将 with 和 height 添加到我们的 中。

    width: parent.width
    height: parent.height

拷贝Load_Page的rectangle到Main_Page里面。

如果你问自己为什么我们的矩形使用相同的 id，那么我可以给你一个简单的答案。因为我们没有导入这些页面，也没有在它们之间使用任何组件，因为我们没有导入这些页面，也没有在它们之间使用任何组件，所以使用相同的 id 不会有问题。 如果应用程序已加载，页面将不会更改，它将始终停留在 Load_Page。 这没有帮助，所以让我们将页面更改添加到我们的 main.qml。

在我们的 main.qml 中，我们需要添加它以在加载后更改页面。

import QtQuick 2.0
import QtQuick.Controls 2.12
Item
{
    width: parent.width
    height: parent.height
    Rectangle
    {
        id:bgRec
        anchors.fill: parent
        color: "#2c3E50"
    }
}

是代码片段做了一件简单的事情。 当 main.qml 页面加载完毕并且所有内容都准备好在屏幕上呈现时，contentFrame 的项目将更改为我们的 Main_Page 的项目，因此我们的 Stack Views 项目将被更改。 现在我们只需要将我们的 Main_Page 的 URL 放在“”中，加载完成后我们就完成了页面的替换。

这应该是一个 Task Master 应用程序，我们要创建和删除任务。但是我们需要做什么呢？首先我们需要一个列表视图，这将显示我们创建的所有任务。接下来，我们需要一个按钮来为我们打开输入，最后，我们需要一个按钮来提交输入。这就是我们需要的所有功能，它并不多，也没有那么复杂。但是要多解释一下我们正在做什么以及我们将如何做到这一点。

列表视图和显示数据

由于现在很清楚我们想要实现的目标，让我们从构建我们需要的列表视图开始。列表视图是 Qt 最重要的元素之一，它基本上在任何应用程序中无处不在，我将更详细地介绍它。 首先将列表视图添加到我们的 Main_Page。

    ListView
    {

    }

接下来我们的列表视图需要一个 id，以及一个宽度和一个高度。

对于 id，我只选择列表视图，因为它非常具有描述性，我们只需要一个列表视图。 宽度和高度将再次由 anchors.fill: parent 处理。 它将填满整个屏幕，因为我们在整个应用程序中没有任何其他事情要做。

我们还需要一个页眉和一个页脚。 页眉将是我们应用程序的标题，页脚将包含我们的添加按钮。 首先我们要写我们的标题。

        header: Item
        {
            id: headerListView
            width: parent.width
            height: 50
        }

header 属性需要一个组件作为输入。 我们将给它一个 Item，有一个 id，一个跨越整个屏幕的宽度和 50 的高度。这将是一个顶部的栏，应该始终停留在我们的应用程序的顶部。如果我们希望标题始终位于列表视图的顶部，则需要添加 headerPositioning：ListView.OverlayHeader。目前，我们的标题中没有任何内容。 现在我们要添加标题。 为此，我们将使用标签。 这个标签来自 QtQuick.Controls 并且是一个简单的文本元素，在引擎盖下有更多的属性和能力。

对于那里的大多数标签，我们需要一个标签应该在的位置，一个标签应该显示的文本。 我们还为文本赋予了本例中不需要的颜色，因为标签的默认颜色始终为黑色。

    Label
    {
        anchors.centerIn: parent
        text: "Task-Master"
        color: "black"
    }

随着标题的出现，让我们向我们的列表视图添加一个模型和一个委托。这些是列表视图必不可少的一些属性以及宽度和高度。但究竟什么是模型或Delegate?模型简单来说就是数据。就像数组、列表或数组列表一样，如果您了解它们的工作原理，您也会理解模型。Qt 在 Model 下有自己的数据结构。现在让我们将它实现到我们的列表视图中。

model:ListModel
{
	id:myListModel
}

对于我们的模型，我们只需要一个 id，因此我们可以稍后与其进行交互。

delegate:Item
{
	id:myDelegate
}

委托属性需要一个组件才能工作。 所以，我们给它一个带有 id 的项目。 此 id 稍后将用于使委托可交互,我们将使用与 Header 相同的 with 和 height。 在delegate中添加：

width:parent.width
height:50

添加下面对文本锚点

anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter

为了缓解这个问题，我们需要添加一个anchor.leftMargin。 顾名思义，这为我们的左 Anchor 增加了一个边距。 将我们的内容向右推。 首先让我们将其添加到标题标签中。

anchors.leftMargin: 20

我们也可以将其添加到我们的数据标签中，但更好的解决方案是将锚点从左更改为右。

这会将我们的日期立即放在组件的右侧。 但是我们还应该为左锚点添加一个边距，这样它就不会与窗口的末尾齐平。带锚点的日期标签

Label
{
    id:date
    text: dateText
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    anchors.rightMargin: 20
}

delegate:Item
        {
            id:myDelegate
            width:parent.width
            height:50
            Label
            {
                id:titel
                text: titelText
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 20
            }

            Label
            {
                id:date
                text: dateText
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.rightMargin: 20
            }
        }

这样我们就完成了 Delegate 的原始版本。 它的工作方式是我们可以将模型与委托一起使用，并且当我们的模型中有东西时应该呈现数据。 接下来，我们将创建可以输入新任务的 Button。

向列表中添加数据

这几乎是项目中最重要的部分，如果我们不能向其中添加数据，那么拥有列表视图是没有意义的。如前所述，我们希望添加任务按钮位于 ListView 的页脚中。

如前所述，我们希望添加任务按钮位于 ListView 的页脚中。

footer:Item
{
	id:footerListView
}

我们还需要为此添加宽度和高度。 与标题一样，我们将设置宽度为父级。 我们设置的高度为 50。

footer: Item
{
    id:footerListView
        width:parent.width
        height: 50
}

但是只是一个 Item 不会符合我们想要的，所以我们将添加一个具有相应 id 的圆形按钮。圆形按钮基本上就是顾名思义的按钮。 我们可以点击它们。 而这正是我们所需要的。 稍后，我们将更多地讨论按钮的工作原理以及设置和使用它们的最佳方式。 现在，您可以使用我们在此处输入的内容。

        footer: Item
        {
            id:footerListView
            width:parent.width
            height: 50
            RoundButton
            {
                id:addTaskButton
            }
        }

圆形按钮也应该有一个宽度和一个高度。 现在，我们将这些设置为 40，作为我们页脚的高度。 如果这不合适或我们想更改它，我们可以稍后再做。

        RoundButton
        {
            id:addTaskButton
        	width:40
        	height:40
        }

目前，我们的按钮位于页脚的左上角，这并不是我们想要的方式。 将其置于正确位置的最佳方法是首先为其设置一个垂直于父级垂直中心的垂直中心。 另外，我们需要一个右边的锚点。

        footer: Item
        {
            id:footerListView
            width:parent.width
            height: 50
            RoundButton
            {
                id:addTaskButton
                width: 40
                height: 40
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
            }
        }

只是right的锚是不行的。 与我们的日期文本一样，我们需要将它定位到左边一点，所以它不完全与我们的窗口的一侧齐平。

anchors.rightMargin: 10

接下来添加AddTask_Drawer.qml

import QtQuick 2.0
import QtQuick.Controls 2.12
Drawer
{
	
}

我们的 Drawer 也需要一个 id，在这种情况下，我们应该使用 File 的名称作为 id，只需将第一个字母小写即可，作为 id，第一个字母需要始终为小写。

id:addTask_Drawer

我们Drawer的宽度应该是我们窗口的宽度，所以使用父级作为参考。 高度也应该来自父级，只是除以 2，所以它只增加了一半。

width: parent.width
height: parent.height / 2

现在我们有了一个基本的Drawer，我们应该可以在 Main_Page 中打开它。 在这种情况下，这可以非常容易地完成。 在我们的列表视图组件下方输入我们的Drawer文件的名称。

    AddTask_Drawer
    {
        id:addTaskDrawer
    }

有了这个Drawer可以在我们的 Main_Page 中使用，我们现在可以使用我们创建的按钮打开Drawer。

给RoundButton添加槽函数

RoundButton
{
    id:addTaskButton
    width: 40
    height: 40		
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    anchors.rightMargin: 10
    onClicked:
    {
    }
}

在这里，我们现在可以使用Drawer的 id 来打开它

onClicked:
{
	addTaskDrawer.open()
}

正如您所看到的，这非常简单，而且是关于如何在 Qt 中使用 id 的好处之一。 你可以从这个 id 调用任何你想要的函数或方法，让你只用一行代码就可以打开Drawer。

如果我们现在运行我们的应用程序，我们将被这个窗口创建。 如您所见，我们的页眉和页脚已呈现，如果我们单击页脚中的按钮，Drawer将打开。

但是Drawer是从屏幕左侧打开的。 这不是我们想要的，对于我们想要的页脚类型，它应该从底部打开。 此外，抽屉是白色的，这可能不会让你感到太多麻烦，但我发现它真的很分散注意力而且不好看，所以我们也需要改变背景。

进入我们的 AddTask_Drawer 文件并直接在Drawer中添加边缘。 但是我们想要什么边缘，以及我们想要抽屉从底部打开，我们应该添加 Qt.BottomEdge。

AddTask_Drawer
{
    id:addTaskDrawer
    edge: Qt.BottomEdge
}

这样Drawer将从底部打开，我们可以从底部向上拖动Drawer。 这是一项源自 Qt 移动开发方面的功能，但是如果我们想在移动设备上部署这个应用程序，这个功能就派上用场了。

现在可以通过使用一个简单的矩形并将其放置在Drawer中来再次完成背景，但我们使用背景属性来完成它。 因此，将背景作为属性添加到我们的Drawer中。 我们还在其中添加了一个矩形，因为背景属性需要一个组件才能运行。

在这个矩形内，我们将使用 anchors.fill: parent 使这个矩形与Drawer本身一样大。 颜色应与 Main_Page 的背景相同。 这可能看起来有点奇怪，但因为Drawer有一个默认的阴影，它看起来不错。

这样我们就完成了抽屉的背景。现在我们只需要制作我们用来让用户能够输入他们的内容的实际输入字段。输入包括我们用于标题的普通文本输入和日期的日期/时间输入。

    background: Rectangle
    {
        anchors.fill:parent
        color:"#2C3E50"
        Label
        {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 10
            text: "Add New"
            color: "white"
        }
    }

首先我们添加一个标签，这将是Drawer的标题，它只是说 Add New 水平移动到父级并位于父级的顶部。 我们还将它放置在父顶部下方一点点，以便在顶部和内容之间留出一点空间。 我们还给标签一个白色的文字颜色。 这只是为了使它更具可读性。

在标签下方，我们现在要添加一个文本字段。 这将是我们输入所需数据的方式。

    background: Rectangle
    {
        anchors.fill:parent
        color:"#2C3E50"
        Label
        {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 10
            text: "Add New"
            color: "white"
        }
        TextField
        {
            id:titleInput
            placeholderText: "Text Field"
        }
    }

我们的文本字段需要一个 id，以便我们可以记住并稍后调用，以及一个占位符文本。 此占位符文本应始终位于您的文本字段中，它告诉用户该文本字段的用途以及应输入的内容。 我们还应该将占位符文本更改为更适用的内容。

目前我们的文本字段固定在左上角。 这不是我们想要的地方。 要将其放置在正确的位置，我们需要三件事。 父级的水平中心、顶部锚点和顶部边距，它们应该足够大，以至于文本字段位于我们之前创建的标题下方。

目前我们的文本字段固定在左上角。 这不是我们想要的地方。 要将其放置在正确的位置，我们需要三件事。 父级的水平中心、顶部锚点和顶部边距，它们应该足够大，以至于文本字段位于我们之前创建的标题下方。

        TextField
        {
            id:titleInput
            placeholderText: "Your Task"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 50
        }

对于日期和时间输入，我们现在可以创建一些带有日历过滤选项,在此项目中，我们将有 2 个文本字段。 一个用于日期和
一个时间。

        Item
        {
            width: titleInput.width
            height: 50
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 125

            TextField
            {
                id: dateInput
                height: parent.height
                width: parent.width/3
                anchors.left: parent.left
                placeholderText: "0000-00-00"
            }
        }

我们的日期输入需要一个 id，以及一个宽度和一个高度。 高度与项目相同，宽度应为项目的三分之一。 我还在左侧添加了一个锚点，因此它保持在左侧。 还添加了占位符文本。 这是我们想要的预期格式，为用户提供某种操作指南。 接下来是时间输入，这基本上是相同的文本字段，唯一的区别是 id、锚点和占位符文本。

        Item
        {
            width: titleInput.width
            height: 50
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 125

            TextField
            {
                id: dateInput
                height: parent.height
                width: parent.width/3
                anchors.left: parent.left
                placeholderText: "0000-00-00"
            }

            TextField
            {
                id: timeInput
                height: parent.height
                width: parent.width / 3
                anchors.right: parent.right
                placeholderText: "00:00"
            }
        }

到目前为止，这看起来还不错，我们唯一需要调整的是日期输入的宽度。 目前太短导致我们的占位符文本被截断。 要更改此设置，请转到日期输入组件并将宽度设置为父级的 2.5 宽度。

现在唯一缺少的是一个按钮，当点击它时检查是否所有内容都已填写，然后在我们的列表视图中创建一个新项目。

对于我们的按钮，我们将再次使用圆形按钮。 这只是出于风格原因，在功能上，普通按钮或圆形按钮之间没有区别。 我们将水平居中我们的按钮，并把它放在我们视图的顶部。 上边距应该是大约 200，所以它在正确的位置。

        RoundButton
        {
            id:submitButton
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 200
            text:"Submit"
        }

该按钮需要添加在我们的项目下方。 此外，我们将给按钮设置 200 的宽度。这通常不是必需的，因为 Qt 会根据单词的长度为按钮提供一个程序。 200 对我们的按钮特别有用。

width: 200

现在我们来看看我们的点击功能,输入已执行，首先，我们需要检查文本字段中的输入。 通常你会有更多的测试，并检查执行了什么输入，但对于我们的用例，我们只需要检查输入是否为空。如果它们不为空，则程序可以继续。
我们应用程序的主要部分包括向我们的列表模型附加一个新项目。 这基本上是通过使用我们需要的数据的字段名并将我们的输入数据添加到它来工作的。 然后单击按钮时，输入将写入模型。
对于 dateText，我们正在做一些更困难的事情。 基本上，我们将日期输入和时间输入并将它们加在一起，我们将“ | ”在它们之间作为分隔符。 这基本上负责我们的输入。 这是向我们的列表模型添加内容的最简单方法。 这也可以与 for 循环一起使用以一次添加多个项目

        RoundButton
        {
            id:submitButton
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 200
            text:"Submit"
            width: 200
            onClicked:
            {
                if(titleInput.text !== "" &&
                   dateInput.text !== "" &&
                   timeInput.text !== "")
                {
                    myListModel.append({"titleText" : titleInput.text,
                                       "dateText" : dateInput.text + "|" + timeInput.text});
                }
            }
        }

但是如果我们现在使用它向我们的列表模型添加一个项目，输入仍然保留我们输入的数据。这不是真正应该发生的。 因此，我们清理输入，因此它们不会保留任何数据。

            onClicked:
            {
                if(titleInput.text !== "" &&
                   dateInput.text !== "" &&
                   timeInput.text !== "")
                {
                    myListModel.append({"titleText" : titleInput.text,
                                       "dateText" : dateInput.text + "|" + timeInput.text});
                    titleInput.clear();
                    dateInput.clear();
                    timeInput.clear();
                }
            }

我们还应该关闭drawer，因为当我们放入新物品时，它应该关闭。

addTaskDrawer.close(); //

            onClicked:
            {
                if(titleInput.text !== "" &&
                   dateInput.text !== "" &&
                   timeInput.text !== "")
                {
                    myListModel.append({"titleText" : titleInput.text,
                                       "dateText" : dateInput.text + "|" + timeInput.text});
                    titleInput.clear();
                    dateInput.clear();
                    timeInput.clear();
					
                    addTaskDrawer.close(); //
                }
            }

当我们的应用程序启动时，我们会看到我们的 Load_Page，当我们的应用程序加载后，我们会看到我们的 Main_Page。 在这里，我们创建了带有按钮的列表视图和带有标题的标题。 屏幕上显示的内容可能看起来不多，但与往常一样，拥有最佳视觉效果并不重要，但拥有最佳功能并不重要，只要这不是您的主要目标。 我们想学习 Qt，所以视觉效果有点重要，但主要关注的是功能。
如果我们现在点击按钮，我们的drawer就会打开，我们可以将数据放入输入中。 当我们没有在输入中放入任何东西时，点击按钮不会做任何事情。

在这里您可以看到带有相应数据的输入，目前我们没有检查输入是否为当前类型和/或具有正确含义的检查功能。 我们可以添加这一点，从实际应用程序的角度来看，您将始终检查您的输入，以便用户只能在您想要的输入中输入一些内容。 但这对于我们的第一个应用程序来说有点太复杂了，所以我们现在可以忽略它。
此外，只要输入不是关键任务，它就不是
如果用户输入了正确的东西，这很重要。 当您输入密码或电子邮件时，检查输入是否正确可能尤为重要，并且您不希望出现 SQL 注入或错误输入的数据

清理应用程序

为了使应用程序更漂亮，我们可以做的第一件事是为我们的应用程序使用另一个宽度。为您的应用程序提供合适的大小和组合确实可以提高用户可以获得的可用性。由于我们总是对所有内容使用锚点，因此我们只需要在一个地方更改应用程序的宽度。我们在我们的应用程序中拥有的称为响应式布局，因此无论显示器的大小如何，该应用程序都可用且有效。 可以在 main.qml 文件中更改应用程序的宽度

ApplicationWindow
{
    visible: true
    width: 360
    height: 720
    title: "Task-Master"

我们将在后面的章节中讨论我们可以使用的不同类型的分辨率，但请记住，有一些通用分辨率，如 1920x1080 或 720x480。

移动应用程序也是如此，请记住，对于某些智能手机，分辨率不是 16:9，这意味着您在为这些平台开发时需要考虑到这一点。
此外，我们应该更改文本的颜色。 具有深色背景和黑色文本并不是真正的可读性。 所以我们最好将其更改为白色文本颜色。

    Label
    {
        anchors.centerIn: parent
        text: "Task-Master"
        color: "white"
    }

        delegate:Item
        {
            id:myDelegate
            width:parent.width
            height:50
            Label
            {
                id:title
                text: titleText
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 20
                color:"white"
            }
            Label
            {
                id:date
                text: dateText
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.rightMargin: 20
                color:"white"
            }
        }