重庆市企业网站建设,张家港高端网站制作,建设行业,网站专题页怎么做目录 QuickControl2简介风格设置control 配置文件图像浏览器案例component 组件报错问题StackViewSwipeView QuickControl2 简介
quickcontrol 用于快速构建风格化的用户界面
它包括了以下几个预制的组件风格
Default QT 默认风格Universal windows 桌面风格Material 谷歌推… 目录 QuickControl2简介风格设置control 配置文件图像浏览器案例component 组件报错问题StackViewSwipeView QuickControl2 简介
quickcontrol 用于快速构建风格化的用户界面
它包括了以下几个预制的组件风格
Default QT 默认风格Universal windows 桌面风格Material 谷歌推出的 MaterialDesign 风格FusionImagine 风格设置 官方文档对于风格设置提供了两种方式此处就采用其中的一种即使用 QQuickStyle 首先在 pro 文件内添加对应库 QT quick quickcontrols2
之后来到 main.cpp 设置我们的整体风格 注意风格必须在 qml 初始化前设置且一旦设置则全局使用此风格不可变换
#include QGuiApplication
#include QQmlApplicationEngine// 第一步导入头文件
#include QQuickStyleint main(int argc, char *argv[])
{
#if QT_VERSION QT_VERSION_CHECK(6, 0, 0)QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endifQGuiApplication app(argc, argv);// 第二步应用风格// 这里使用了google的material风格QQuickStyle::setStyle(Material);...return app.exec();
}最后回到我们的 qml 主文件写一段简单的代码测试一下风格
main.qml 代码清单
import QtQuick 2.12
import QtQuick.Controls 2.12// 默认此处根组件应该是Window我这里用了ApplicationWindow效果是一致的
ApplicationWindow {visible: truewidth: 640height: 480// 创建一个列表包含三个单选按钮Column {anchors.centerIn: parentRadioButton { text: qsTr(Small) }RadioButton { text: qsTr(Medium); checked: true }RadioButton { text: qsTr(Large) }}
}如下图展示效果风格成功应用上去了 control 配置文件
对于普通项目为便于开发我们可以额外新建一个配置文件用于管理当前应用的整体风格
在与 main.qml 同级的目录下新建配置文件 qtquickcontrols2.conf (必须是这个名字)
填入下方配置
; This file can be edited to change the style of the application
; Read Qt Quick Controls 2 Configuration File for details:
; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html; 配置全局风格为MaterialDesign2
[Controls]
StyleMaterial图像浏览器案例 推荐风格选择 Fusion 功能很简单添加菜单栏和工具栏选择文件并打开 主要关注点为 FileDialog 的使用
下面是 main.qml 的完整代码
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Dialogs 1.2ApplicationWindow {visible: truewidth: 640height: 480title: qsTr(Image Viewer)// 顶部菜单栏menuBar: MenuBar {// 主菜单项Menu {title: qsTr(File)// 子菜单项MenuItem {text: qsTr(Open...)icon.name: document-open// 点击后触发对应FileDialogonTriggered: fileOpenDialog.open()}}Menu {title: qsTr(Help)MenuItem {text: qsTr(About...)onTriggered: aboutDialog.open()}}}// 顶部工具栏header: ToolBar {// 流式布局Flow {anchors.fill: parent// 工具项ToolButton {text: qsTr(Open)icon.name: document-openonClicked: fileOpenDialog.open()}}}// 设置背景颜色background: Rectangle {color: darkGray}// 图片显示组件Image {id: imageanchors.fill: parentfillMode: Image.PreserveAspectFitasynchronous: true}// 打开文件对话框FileDialog {id: fileOpenDialogtitle: Select an image filefolder: shortcuts.documentsnameFilters: [Image files (*.png *.jpeg *.jpg),]onAccepted: {image.source fileOpenDialog.fileUrl}}// About对话框Dialog {id: aboutDialogtitle: qsTr(About)Label {anchors.fill: parenttext: qsTr(QML Image Viewer\nA part of the QmlBook\nhttp://qmlbook.org)horizontalAlignment: Text.AlignHCenter}standardButtons: StandardButton.Ok}
}运行结果 component 组件报错问题
当我们在需要使用 Component 定义一个组件时通常会发现编辑器报错 Unknown component (M300)
解决方法很简单点击编辑器菜单栏的 工具-QML/JS-重置代码模型 即可解决 StackView StackView 可以实现多页面的堆栈管理类似于 android 中的 view 下方代码实现效果点击界面实现 push 和 pop 效果并附带自定义界面切换效果 由于要使用动画过渡属性故导入头文件时control 需要使用 1.4 版本的 import QtQuick.Controls 1.4
简要介绍下方代码展示的主要内容及其对应含义
initialItem 设置初始展示页面/组件delegate 设置当新页面 push 或者被 pop 后的过渡动画Component 组件根据 id 被 stackview 使用
代码清单 main.qml
import QtQuick 2.12// 请使用1.4版本
import QtQuick.Controls 1.4ApplicationWindow {visible: truewidth: 640height: 480title: qsTr(Image Viewer)StackView {id:svanchors.fill: parentinitialItem: mainView // 设置初始页面// 设置页面push或pop后过渡动画// 动画设置中有两个可用变量exitItem正在退出的元素enterItem正在加入的元素delegate: StackViewDelegate {// 当动画结束后执行的对应方法function transitionFinished(properties){properties.exitItem.x 0properties.exitItem.rotation 0}// push插入动画// 动画内容是让当前组件从界面左侧移动走然后自身再旋转360度pushTransition: StackViewTransition {// 顺序动画SequentialAnimation {ScriptAction {script: enterItem.rotation 90}PropertyAnimation {target: enterItemproperty: xfrom: enterItem.widthto: 0}PropertyAnimation {target: enterItemproperty: rotationfrom: 90to: 0}}PropertyAnimation {target: exitItemproperty: xfrom: 0to: -exitItem.width}}// pop弹出动画// 动画内容组件颜色渐变非常实用建议copypopTransition: StackViewTransition {PropertyAnimation {target: enterItemproperty: opacityfrom: 0to: 1}PropertyAnimation {target: exitItemproperty: opacityfrom: 1to: 0}}}// 在stackview内部定义组件Component{id: mainViewMouseArea{Rectangle{id:mvRectwidth: 100; height: 100anchors.centerIn: parentcolor: orange}onClicked: sv.push(sideView) // 点击后插入新页面}}// 定义的另一个组件Component{id: sideViewMouseArea{Rectangle{id:svRectwidth: 100; height: 100anchors.centerIn: parentcolor: deepskyblue}onClicked: sv.pop() // 点击后弹出当前页面}}}
}外部界面文件调用案例
注意这里全部需要使用 import QtQuick.Controls 2.2
当然了我们不可能把所有组件或者页面都以 Component 的形式写到 stackview 里面去我们需要对其进行充分的解构
首先来看看主文件 main.qml
import QtQuick 2.12
import QtQuick.Controls 2.2ApplicationWindow {visible: truewidth: 640height: 480title: qsTr(Image Viewer)StackView {id:svanchors.fill: parent// 加载外部组件HomeViewinitialItem: HomeView{}}
}主页面代码清单 HomeView.qml
import QtQuick 2.0
import QtQuick.Controls 2.2// Page表示页面
Page{title: qsTr(Home)MouseArea{anchors.fill: parentLabel {text: qsTr(Home Screen)}// sv就是我们在主页面定义的stackview组件// push内部直接写同级目录下的qml文件就可以插入了onClicked: sv.push(SideView.qml)}
}副页面代码清单 SideView.qml
import QtQuick 2.0
import QtQuick.Controls 2.2Page{title: qsTr(Home)Button{id:btnwidth: 120; height: 40anchors.centerIn: parenttext: qsTr(点击返回home)onClicked: sv.pop() // 弹出}
}这里就实现了调用外部 qml 文件来执行 push 和 pop 操作 SwipeView 类似前端中的轮播图 同样的需要注意导入 import QtQuick.Controls 2.2
import QtQuick 2.9
import QtQuick.Controls 2.2ApplicationWindow {// ...visible: truewidth: 640height: 480title: qsTr(Side-by-side)// 滑动视图SwipeView {id: swipeViewanchors.fill: parent// 这是三个外部Page组件用于组成视图Current {}UserStats {}TotalStats {}// ...}// 导航指示点PageIndicator {anchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCentercurrentIndex: swipeView.currentIndexcount: swipeView.count}// ...}我们随机找一个 swipeview 用到的外部组件该组件很简单根部是 Page点击按钮返回第一个轮播项
代码清单 TotalStats.qml
import QtQuick 2.9
import QtQuick.Controls 2.2// 和stackview一样这里的外部组件依然需要使用page定义
Page {header: Label {text: qsTr(Community Stats)font.pixelSize: Qt.application.font.pixelSize * 2padding: 10}Column {anchors.centerIn: parentspacing: 10Label {anchors.horizontalCenter: parent.horizontalCentertext: qsTr(Community statistics)}Button {anchors.horizontalCenter: parent.horizontalCentertext: qsTr(Back)onClicked: swipeView.setCurrentIndex(0); // 点按钮回到第一个轮播项}}
}由于内容比较简单其余的两个轮播项就不一一展示代码了反正也就是对应的使用 Page 组件即可
