在线分享应用 在安卓上查看应用

创建单页面导航网页应用

本例解释了如何创建一个适合在Qt设计查看器中运行的单一页面导航网页应用。在本项目中，您将创建网页应用的结构和导航。

设置项目

要设置项目

  1. 在Qt设计工作室中，创建一个新项目，将
    • 预设设置为桌面 > 启动器。
    • 分辨率设置为1024 x 768。
    • 目标版本设置为6.2。
  2. 在导航器
    • 选择并删除文本。
    • 选择矩形，在属性中，将填充颜色设置为#ffffff。

添加组件

接下来，添加必要的组件以创建您的网页应用结构。

添加QtQuick Layouts模块

  1. 在组件中，选择
  2. 选择QtQuick.Layouts。

要将网页应用的结构添加，从组件中拖放以下组件到导航器中的矩形。

  • 矩形
    • 矩形
      • 行
        • 按钮
        • 按钮
        • 按钮
    • 可滑动
      • 列布局

创建网页应用页面

接下来，创建您的网页应用的独立页面。在这个例子中，您创建主页、关于我们和联系我们的页面。

您将每个页面作为单独的组件创建，然后将其添加到主应用中。

创建第一个页面

  1. 转到文件 > 新建文件。
  2. 在Qt Quick文件选项卡上，选择Qt Quick文件。
  3. 选择选择并输入名称，例如Page1。
  4. 将根项设置为矩形。

创建新页面后，在导航器中选择矩形，在属性视图中

  • 将大小 > H设置为1024。
  • 在大小 > W旁边，选择并选择重置。

接下来，为页面创建一个页眉

  1. 从组件拖动一个文本组件到导航器中的矩形。
  2. 在属性中，转到文本标签页并设置
    • 文本为欢迎。
    • 样式名称为粗体。
    • 大小为32像素。
  3. 在布局选项卡中设置锚点和边距为
    • 顶部，100
    • 左侧，50

现在，已经完成了第一页，以相同的方式创建另外两页。对于这些页面，将文本分别设置为关于我们和联系我们。

您可以从工具栏的下拉菜单中更改您正在操作的文件。现在，从该菜单中选择Screen01.ui.qml以返回主页面。

您可以在组件视图的我的组件中看到您创建的页面。要编辑组件，在组件中右键单击它并选择编辑组件

组织页面

要从垂直方向组织页面

  1. 从组件拖动每个页面到导航器中的columnLayout。

  2. 在导航器中选择columnLayout，并在属性中
    • 在大小 > W和大小 > H旁边，选择并选择重置。
    • 将列间距设置为0。
  3. 在导航器中选择flickable，并在属性中
    • 在大小 > W和大小 > H旁边，选择并选择重置。
    • 将内容大小 > H设置为3072。
    • 在布局选项卡中，选择填充父组件。

您还必须创建一个滚动条以滚动网页应用。您创建垂直和水平滚动条，仅在内容不适应窗口时才可见，类似于网络浏览器的滚动条。

要创建滚动条，请转到代码视图并将滚动条代码放入Flickable组件内

Flickable {
  id: flickable
  anchors.fill: parent
  contentHeight: 3072
 ScrollBar.vertical: ScrollBar {
      policy: flickable.contentHeight > flickable.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
      width: 20
  }
  ScrollBar.horizontal: ScrollBar {
      policy: flickable.contentWidth > flickable.width ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
      height: 20
  }
  ...

要将滚动条对齐到窗口的右侧和底部，设置主矩形的宽度和高度，以便它适应窗口大小。

  1. 在导航器中选择矩形。
  2. 在属性中，选择宽度旁边的并选择设置绑定。
  3. 输入Window.width

  4. 重复步骤2和3为高度设置值，设置为Window.height。

创建导航

最后一步是创建网页的导航。为此，使用您之前创建的按钮。

首先，创建一个动画，用于在不同页面之间滚动

  1. 从组件拖动一个数字动画到导航器中的矩形。
  2. 在属性中，设置
    • 目标为flickable。
    • 属性为contentY。
    • 持续时间为200。

接下来，将按钮连接到数字动画以垂直滚动内容到正确位置。

  1. 在导航器中选择矩形，并在属性中设置
    • 高度为40。
    • 填充颜色为#e0e0e0。
    • Z堆叠为1。
  2. 在宽度旁边选择并选择设置绑定。
  3. 输入parent.width。

  4. 在导航器
    1. 选择按钮并在按钮选项卡中的属性中，将文本设置为主页。
    2. 选择Button1并在按钮选项卡中的属性中，将名称设置为关于我们。
    3. 选择Button2并在按钮选项卡中的属性中，将名称设置为联系我们。
  5. 在代码中，为每个按钮输入connections，以便在按下时运行数字动画。
    Button {
          id: button
          text: qsTr("Home")
          Connections {
              target: button

              onPressed: {
                  numberAnimation.to = 0
                  numberAnimation.start()
              }
          }
      }

      Button {
          id: button1
          text: qsTr("About Us")
          Connections {
              target: button1

              onPressed: {
                  numberAnimation.to = 1024
                  numberAnimation.start()
              }
          }
      }

      Button {
          id: button2
          text: qsTr("Contact Us")
          Connections {
              target: button2

              onPressed: {
                  numberAnimation.to = 2048
                  numberAnimation.start()
              }
          }
      }

预览应用程序

要预览应用程序的实时预览，请选择Alt + P。您还可以转到文件 > 在线共享应用程序，在网页浏览器中共享和预览您的应用程序。

在线共享应用程序 在Android上查看应用程序

在某些Qt许可证下可用。
了解更多。