QtCreate软件中的教程-----英转中(一，二）_qt create

目录

前言说明

第一章

第二章 创建移动应用程序

传送门

---

大佬说学习QT的模型视图框架可以参考qt示例，然后我刚好发现有Qt教程。

奈何本人英文不好，故决定用在线翻译弄一下。

这里决定每一小节代表一章的内容，从左往右依次排序

前言说明

Qt Creator手册4.10.2

配置Qt创建者教程

第一章

Qt创建者手册

构建和运行示例

---------------------------

您可以通过打开现有的示例应用程序项目来测试Qt安装是否成功。

要在Android或iOS设备上运行示例应用程序，必须为Android或iOS设置开发环境。有关更多信息，请参阅连接Android设备和连接iOS设备。

要在嵌入式设备上运行示例应用程序，必须在开发主机上为设备创建设置Qt，并在主机和设备之间创建连接。有关更多信息，请参阅Qt中的设备创建文档中的安装指南。

1、在欢迎模式中，选择示例（1）。

如果未列出任何示例，请检查是否安装并配置了Qt版本。 

2、在示例列表中选择一个示例。

        您还可以搜索示例。在搜索字段（2）中输入android或ios关键字，以列出针对android或ios测试的所有示例。要列出可在嵌入式设备上运行的示例，请在搜索字段中输入Boot2Qt关键字（仅限商业）。

3、要检查是否可以为设备编译和链接应用程序代码，请单击套件选择器并为设备选择套件。

       如果您将Qt Creator作为Qt安装的一部分安装，它应该会自动检测到已安装的工具包。如果没有可用的套件，请参阅添加套件。

4、点击 （运行）以生成并运行应用程序。

5、要查看编译进度，请按Alt+4打开“编译输出”窗格。

        如果出现构建错误，请检查是否安装并配置了Qt版本和编译器，以及是否配置了必要的工具包。如果您正在为Android设备或iOS设备构建，请检查开发环境是否已正确设置。

项目成功生成后，工具栏上的生成进度栏将变为绿色。应用程序将在设备上打开。

第二章 创建移动应用程序

        本教程介绍使用Qt Quick控件为Android和iOS设备开发Qt Quick应用程序。我们使用QtCreator实现了一个QtQuick应用程序，该应用程序根据不断变化的加速度计值加速SVG（可缩放矢量图形）图像。

 有关用户界面选择的更多信息，请参阅用户界面。

建立发展环境

为了能够为移动设备构建应用程序并在其上运行，必须为设备平台设置开发环境，并配置Qt Creator与移动设备之间的连接。

要为Android设备开发，您必须下载并安装最新的Android NDK和SDK工具，然后更新或安装开发所需的工具和软件包。此外，必须安装JavaSE开发工具包（JDK）。安装完所有这些工具后，必须在Qt Creator中指定它们的路径。有关详细说明，请参阅Qt For Android和连接Android设备。

要为iOS设备开发，必须安装Xcode并使用它配置设备。为此，您需要一个Apple开发者帐户和从Apple获得的iOS开发者程序证书。有关更多信息，请参阅连接iOS设备。

创建项目

1、选择文件>新建文件或项目>应用程序>Qt快速应用程序-滑动>选择。

2、在名称字段中，输入应用程序的名称。

3、在“创建位置”字段中，输入项目文件的路径，然后选择“下一步”（或在macOS上继续）。

4、在“生成系统”字段中，选择用于生成和运行项目的生成系统：qmake、CMake或Qbs。

5、在Qt快速控制样式字段中，选择要使用的预定义UI样式之一，然后选择下一步。

6、为要为其构建应用程序的平台选择工具包。要为移动设备构建应用程序，请选择Android ARM和iPhone操作系统套件，然后单击下一步。

        注意：如果工具包已在工具>选项>工具包（Windows和Linux上）或Qt Creator>首选项>工具包（macOS上）中指定，则会列出这些工具包。

7、选择下一步。

8、查看项目设置，然后单击完成（或在macOS上完成）。

Qt Creator生成两个UI文件Page1Form.UI.qml和Page2Form.UI.qml，以及一个qml文件main.qml。可以在表单编辑器中修改Page1Form.ui.qml以创建应用程序主视图，在文本编辑器中修改main.qml以添加应用程序逻辑。在本例中，您可以忽略Page2Form.ui.qml。

创建Accelbubble主视图

        应用程序的主视图显示一个SVG气泡图像，当您倾斜设备时，该图像会在屏幕上移动。

要在项目中使用Bluebubble.svg，请将其复制到项目目录（与QML文件相同的子目录）。该图像显示在参考资料中。您也可以使用任何其他映像或QML类型。

要在设计模式下创建UI，请执行以下操作：

1、在“项目”视图中，双击Page1Form.ui.qml文件以在设计模式下打开它。

2、在导航器中，选择标签并按Delete键将其删除。

3、在库>QML类型中，选择矩形并将其拖放到导航器中的页面。

4、在导航器中选择矩形以编辑其属性：

        在Id字段中输入mainWindow，以便能够从其他位置引用矩形。

        选择布局选项卡，然后单击 （填充到父项）按钮将矩形定位到项目。

5、在Library>Resources中，选择Bluebubble.svg并将其拖放到navigator的Main窗口中。

在“属性”窗格的“Id”字段中，输入bubble，以便能够从其他位置引用图像。

选择 导航器中的（导出）按钮，将主窗口和气泡作为属性导出。

6、在“属性”窗格的“Id”字段中，输入bubble，以便能够从其他位置引用图像。

7、选择 导航器中的（导出）按钮，将主窗口和气泡作为属性导出。

我们希望以设计模式不支持的方式修改气泡的属性，因此我们为其创建自定义QML类型：

1、在图像上单击鼠标右键，然后选择“将零部件移动到单独的文件中”。

2、在“零部件名称”字段中，输入Bubble。

3、l取消选中x、y和ui.qml文件复选框。

4、选择“确定”以创建Bubble.qml。

Qt Creator在Page1Form.ui.qml中创建对气泡类型的引用。

要检查代码，可以将Page1Form.ui.qml与Page1Form.ui.qml示例文件进行比较，将Bubble.qml与Bubble.qml示例文件进行比较。

UI现在已准备就绪，您可以切换到在文本编辑器中编辑Bubble.qml和main.qml文件，如以下部分所述。

在文本编辑器中，编辑Bubble.qml以添加用于定位图像的属性：

Image {
      source: "Bluebubble.svg"
      smooth: true
      property real centerX
      property real centerY
      property real bubbleCenter
  }

在文本编辑器中，编辑main.qml以指定应用程序标题，如以下代码段所示：

 ApplicationWindow {
      visible: true
      width: 640
      height: 480
      title: qsTr("Accelerate Bubble")

指定气泡特性以定位图像：

SwipeView {
          id: swipeView
          anchors.fill: parent
          currentIndex: tabBar.currentIndex
 
          Page1Form {
              bubble {
                  id: bubble
                  centerX: mainWindow.width / 2
                  centerY: mainWindow.height / 2
                  bubbleCenter: bubble.width / 2

然后根据新属性设置图像的x和y位置：

                  x: bubble.centerX - bubble.bubbleCenter
                  y: bubble.centerY - bubble.bubbleCenter
 
  }

然后根据加速计传感器值添加代码以移动气泡：

1、将以下导入语句添加到main.qml：

import QtSensors 5.9

2、添加具有必要属性的加速计类型：

 Accelerometer {
         id: accel
         dataRate: 100
         active: true
         }

3、添加以下JavaScript函数，根据当前加速计值计算气泡的x和y位置：

      function calcPitch(x, y, z) {
          return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);
      }
      function calcRoll(x, y, z) {
          return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
      }

4、为onReadingChanged signal（加速度计类型的改变信号）添加以下JavaScript代码，以在加速度计值改变时使气泡移动：

  onReadingChanged: {
             var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
             var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
 
             if (isNaN(newX) || isNaN(newY))
                 return;
 
             if (newX < 0)
                 newX = 0
 
             if (newX > mainWindow.width - bubble.width)
                 newX = mainWindow.width - bubble.width
 
             if (newY < 18)
                 newY = 18
 
             if (newY > mainWindow.height - bubble.height)
                 newY = mainWindow.height - bubble.height
 
                 bubble.x = newX
                 bubble.y = newY
         }

我们希望确保气泡的位置始终在屏幕范围内。如果加速计返回的不是数字（NaN），则忽略该值，气泡位置不会更新。

5、在气泡的x和y属性上添加平滑化行为，使其运动看起来更平滑。

                  Behavior on y {
                      SmoothedAnimation {
                          easing.type: Easing.Linear
                          duration: 100
                      }
                  }
                  Behavior on x {
                      SmoothedAnimation {
                          easing.type: Easing.Linear
                          duration: 100
                      }
                  }

锁定装置定位

默认情况下，当设备方向在纵向和横向之间变化时，设备显示会旋转。在本例中，屏幕方向最好是固定的。

要在Android上将方向锁定为纵向或横向，请在可在Qt Creator中生成的AndroidManifest.xml中指定它。有关详细信息，请参见编辑清单文件。

在iOS上，您可以在.pro文件中指定为QMAKE_Info_plist变量值的Info.plist文件中锁定设备方向。

添加依赖项

使用以下库依赖项信息更新accelbubble.pro文件：

QT += quick sensors svg xml

在iOS上，必须静态链接到上述库，方法是将插件名称显式添加为QTPLUGIN变量的值。为iOS生成指定qmake作用域（也可以包含QMAKE_INFO_PLIST变量）：

 ios {
  QTPLUGIN += qsvg qsvgicon qtsensors_ios
  QMAKE_INFO_PLIST = Info.plist
  }

添加依赖项后，选择Build>runqmake将更改应用于项目的Makefile。

增加资源

您需要将Bluebubble.svg图像文件添加到应用程序资源中，以便部署到移动设备：

1、在“项目”视图中，双击qml.qrc文件以在资源编辑器中打开它。

2、选择Add（添加）以添加Bluebubble.svg。

运行应用程序

应用程序已完成并准备部署到设备：

1、在Android设备上启用USB调试，或在iOS设备上启用开发者模式。

2、将设备连接到开发PC。

        如果您正在使用运行Android v4.2.2的设备，它应该提示您验证连接，以允许从其连接的PC进行USB调试。要避免每次连接设备时出现此类提示，请选中“计算机中始终允许”复选框，然后选择“确定”。

3、要在设备上运行应用程序，请按Ctrl+R。

文件夹：

详细文件qml信息请查询帮助文档
accelbubble/Bluebubble.svg
accelbubble/Bubble.qml
accelbubble/Page1Form.ui.qml
accelbubble/Page2Form.ui.qml
accelbubble/accelbubble.pro
accelbubble/main.qml
accelbubble/qml.qrc

传送门

        未完待续。