Init
This commit is contained in:
121
07-Other/Qt/QtQuick/QtQuick中QML文件间的通讯问题.md
Normal file
121
07-Other/Qt/QtQuick/QtQuick中QML文件间的通讯问题.md
Normal file
@@ -0,0 +1,121 @@
|
||||
## 前言
|
||||
本人发现有关QML文件之间的通讯的资料不多，而且都不太好找，所以在这里总结一下方便后续的开发者
|
||||
|
||||
## 直接导入qml
|
||||
目录结构：
|
||||
```
|
||||
myapp
|
||||
|- mycomponents
|
||||
|- CheckBox.qml
|
||||
|- DialogBox.qml
|
||||
|- Slider.qml
|
||||
|- main
|
||||
|- application.qml
|
||||
```
|
||||
那么可以：
|
||||
```
|
||||
import "../mycomponents"
|
||||
|
||||
DialogBox {
|
||||
CheckBox {
|
||||
// ...
|
||||
}
|
||||
Slider {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
但是创建一个命名空间来导入会更好
|
||||
```
|
||||
import "../mycomponents" as MyComponents
|
||||
|
||||
MyComponents.DialogBox {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## qml文件间通讯
|
||||
3.题回正传，直接上代码（以StackView管理页面为例）
|
||||
(1)page1.qml跳转到page2.qml传值
|
||||
```
|
||||
page1.qml
|
||||
|
||||
Rectangle
|
||||
{
|
||||
id:rect1
|
||||
...
|
||||
MouseArea {
|
||||
id: maStartQuery
|
||||
anchors.fill: parent
|
||||
onClicked:
|
||||
{
|
||||
if(!stackView.busy)
|
||||
stackView.push(Qt.resolvedUrl("qrc:///qml/page2.qml"),
|
||||
{name:"张三"})//给page2.qml的name传值“张三”,name必须在page2.qml中定义成属性
|
||||
}
|
||||
}
|
||||
...
|
||||
}
|
||||
|
||||
page2.qml定义如下
|
||||
|
||||
Rectangle
|
||||
{
|
||||
id:rect2
|
||||
...
|
||||
property string name:""//要传的值
|
||||
...
|
||||
|
||||
}
|
||||
```
|
||||
(2)page2.qml点击"确定"按钮时将结果返回给page1.qml
|
||||
|
||||
A.在page1.qml中增加一个函数clickedfunc，当点击page2.qml中"确定"按钮时调用；
|
||||
B.在page2.qml中增加一个属性containerqml，用来记录page1.qml；
|
||||
C.在从page1.qml跳转到page2.qml时，将rect1传给page2.qml的containerqml属性。
|
||||
```
|
||||
page1.qml
|
||||
Rectangle
|
||||
{
|
||||
id:rect1
|
||||
...
|
||||
MouseArea {
|
||||
id: maStartQuery
|
||||
anchors.fill: parent
|
||||
onClicked:
|
||||
{
|
||||
if(!stackView.busy)
|
||||
stackView.push(Qt.resolvedUrl("qrc:///qml/page2.qml"),
|
||||
{name:"张三",containerqml:rect1})
|
||||
}
|
||||
}
|
||||
|
||||
//当点击page2.qml中"确定"按钮时调用
|
||||
function clickedfunc(temp)
|
||||
{
|
||||
console.log("改成了："+temp);
|
||||
stackView.pop();//返回到本页
|
||||
}
|
||||
...
|
||||
}
|
||||
|
||||
page2.qml
|
||||
Rectangle
|
||||
{
|
||||
id:rect2
|
||||
...
|
||||
property variant containerqml: null
|
||||
property string name:""//要传的值
|
||||
...
|
||||
MouseArea {
|
||||
id: btnOK
|
||||
anchors.fill: parent
|
||||
onClicked:
|
||||
{
|
||||
containerqml.clickedfunc("李四");//调用page1.qml中的函数，实现了传返回值。
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
另一种就是信号与槽
|
||||
163
07-Other/Qt/QtQuick/QtQuick基础笔记.md
Normal file
163
07-Other/Qt/QtQuick/QtQuick基础笔记.md
Normal file
@@ -0,0 +1,163 @@
|
||||
## color属性
|
||||
可以使用"blue"、"#RRGGBB"、Qt.rgba()来赋值。具体可以参考QML Basic Type:color
|
||||
|
||||
## 手机的横屏模式与竖屏模式
|
||||
需要修改AndroidManifest.xml中的activity元素的android:screenOrientation属性为"landscape"或"portrait"
|
||||
## Item组件
|
||||
1. Item是所有可视元素的基类。
|
||||
2. 其中一个用处就是可以分组其他可见图元。
|
||||
3. clip属性如果为true可以裁剪子组件。
|
||||
4. 通过附加属性Keys来处理按键。详情：Keys QML Type
|
||||
|
||||
## Text
|
||||
可以使用HTML修饰过的文本
|
||||
|
||||
## Image
|
||||
1. 如何设置了width与height，图片可能会被拉伸，此时fillMode属性就可以设置填充模式了。
|
||||
2. Image默认是阻塞式加载，可以通过把asynchronous设为true开启异步模式。可以先显示一个加载图标，当status的值为Image.Ready时再显示。
|
||||
3. source属性是url，网络模式会默认开启异步加载，此时Image的Progress（0。0~1.0）、status都会实时更新。
|
||||
```
|
||||
import QtQuick 2.9
|
||||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Controls.Styles 1.4
|
||||
|
||||
ApplicationWindow {
|
||||
visible: true
|
||||
width: 640
|
||||
height: 480
|
||||
title: qsTr("App")
|
||||
|
||||
BusyIndicator{
|
||||
id:busy;
|
||||
running: true;
|
||||
anchors.centerIn: parent;
|
||||
z:2
|
||||
}
|
||||
|
||||
Text{
|
||||
id:stateLabel;
|
||||
visible:false;
|
||||
anchors.centerIn: parent;
|
||||
z:3
|
||||
}
|
||||
|
||||
Image{
|
||||
id:imageViewer;
|
||||
asynchronous: true;
|
||||
cache:false;
|
||||
anchors.fill: parent;
|
||||
fillMode: Image.PreserveAspectFit;
|
||||
onStatusChanged: {
|
||||
if(imageViewer.status===Image.Loading){
|
||||
busy.running=true;
|
||||
stateLabel.visible=false;
|
||||
}else if (imageViewer.status===Image.Ready){
|
||||
busy.running=false;
|
||||
}else if(imageViewer.status===Image.Error){
|
||||
busy.running=false;
|
||||
stateLabel.visible=true;
|
||||
stateLabel.text="error";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
imageViewer.source="http://img.zcool.cn/community/01d881579dc3620000018c1b430c4b.JPG@3000w_1l_2o_100sh.jpg";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Object类是所有ECMAScript类的基类，它具有以下属性：
|
||||
1. constructor：指向创建对象的函数，对于Object类，它指向object()函数。
|
||||
2. prototype：对该对象原型类型的引用，可以在运行时改变原型。
|
||||
3. hasOwnPropety：是否拥有某个属性
|
||||
4. isPrototypeOf：判断对象是否为另一个对象的原型。
|
||||
5. ptopertyIsEnumerable：判断给定的杏树是否可以用for in进行枚举。
|
||||
6. toString()
|
||||
7. valueOf()，返回最适合该对象的原始值。
|
||||
|
||||
## Qt对象
|
||||
Qt是QML提供的一个全局宿主对象，整合了常用的属性、方法与枚举类型。
|
||||
Qt.application 应用的全局状态
|
||||
## Connections
|
||||
适用对象：
|
||||
1. 你需要将多个对象连接到同一个QML信号上。
|
||||
2. 你需要在发出信号的对象的作用域之外来建立连接
|
||||
3. c++导出对象
|
||||
```
|
||||
Connections{
|
||||
target:area;//目标控件（它的信号触发）
|
||||
on<Signal>:function or code block;//执行代码
|
||||
}
|
||||
```
|
||||
|
||||
## 连接信号的方式
|
||||
```
|
||||
Rectangle {
|
||||
id: relay
|
||||
|
||||
signal messageReceived(string person, string notice)
|
||||
|
||||
//可以连接信号或者函数
|
||||
Component.onCompleted: {
|
||||
relay.messageReceived.connect(sendToPost)
|
||||
relay.messageReceived.connect(sendToTelegraph)
|
||||
relay.messageReceived.connect(sendToEmail)
|
||||
relay.messageReceived("Tom", "Happy Birthday")
|
||||
}
|
||||
|
||||
function sendToPost(person, notice) {
|
||||
console.log("Sending to post: " + person + ", " + notice)
|
||||
}
|
||||
function sendToTelegraph(person, notice) {
|
||||
console.log("Sending to telegraph: " + person + ", " + notice)
|
||||
}
|
||||
function sendToEmail(person, notice) {
|
||||
console.log("Sending to email: " + person + ", " + notice)
|
||||
}
|
||||
}
|
||||
```
|
||||
## component
|
||||
### 嵌入式组件：
|
||||
```
|
||||
Component {
|
||||
id: redSquare
|
||||
|
||||
Rectangle {
|
||||
color: "red"
|
||||
width: 10
|
||||
height: 10
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
只能包含一个顶层item与id<br>
|
||||
### 单文件组件
|
||||
单文件组件不需要加Component
|
||||
#### 使用Loader
|
||||
```
|
||||
Item {
|
||||
Component {
|
||||
id: redSquare
|
||||
Rectangle { color: "red"; width: 10; height: 10 }
|
||||
}
|
||||
|
||||
Loader { sourceComponent: redSquare }
|
||||
Loader { sourceComponent: redSquare; x: 10 }
|
||||
}
|
||||
```
|
||||
通过sourceComponent加载组件，source则可以通过url加载单文件组件。<br>
|
||||
在加载完成后(onLoaded)后可以通过Loader的item操作已经加载的组件<br>
|
||||
如果Loader加载的Item想要处理按键事件，那么久必须将Loader对象的focus属性设置为true，同时也需要对它加载的Item的accepted属性设置为true，以免已经被吃掉的事件再传递给Loader。
|
||||
### ECMAScript中动态创建对象
|
||||
```
|
||||
var newObject = Qt.createQmlObject('import QtQuick 2.0; Rectangle {color: "red"; width: 20; height: 20}',
|
||||
parentItem,
|
||||
"dynamicSnippet1");
|
||||
```
|
||||
或者
|
||||
```
|
||||
var component = Qt.createComponent("Button.qml");
|
||||
if (component.status == Component.Ready)
|
||||
component.createObject(parent, {"x": 100, "y": 100});
|
||||
```
|
||||
113
07-Other/Qt/QtQuick/QtQuick大坑笔记之Http的Get与Post操作（带cookie）.md
Normal file
113
07-Other/Qt/QtQuick/QtQuick大坑笔记之Http的Get与Post操作（带cookie）.md
Normal file
@@ -0,0 +1,113 @@
|
||||
## 前言
|
||||
最近在为单位做一个简单的手机App，基于Qt技术栈的选择了QtQuick来开发。不得不说QtQucik开发的确舒服，很多东西都不用写就可以只用，UI定义起来也比较自由。但是本人想通过cookie来作为登陆验证时就发现，QtQuick实现起来相当麻烦。（主要是没有文档，资料只找到一篇qyvlik写的。我也不想直接用WebEngine）
|
||||
|
||||
## 不带cookie
|
||||
可以使用XMLHttpRequest，比较坑的是官方竟然没有任何案例，不过Api都是与js的XmlHttpRequest一样的，以下是qyvlik封装的一套分辨操作函数：
|
||||
```
|
||||
//通过Json对象输出url的query字符串
|
||||
function urlQuery(jsonObject) {
|
||||
var query = "";
|
||||
var i = 0;
|
||||
for(var iter in jsonObject) {
|
||||
|
||||
if(i > 0) {
|
||||
query += "&";
|
||||
}
|
||||
query += iter +"=" + encodeURI(jsonObject[iter]);
|
||||
i++;
|
||||
}
|
||||
// console.log("url query:", query);
|
||||
return query;
|
||||
}
|
||||
//设置头
|
||||
function setHeader(xhr, headers) {
|
||||
//"Content-Type":"application/x-www-form-urlencoded"
|
||||
for(var iter in headers) {
|
||||
xhr.setRequestHeader(iter, headers[iter]);
|
||||
}
|
||||
}
|
||||
//这里我修改了一下函数的形参，从使用的角度来看，回调函数一般都会有，但是headers不一定要设置，所以调换了一下位置
|
||||
function ajax(method, url, callable,headers,data) {
|
||||
headers = headers || {};
|
||||
callable = callable || function(xhr) {
|
||||
console.log("没有设置callable，使用默认log函数")
|
||||
console.log(xhr.status);
|
||||
console.log(xhr.responseText);
|
||||
}
|
||||
var xhr = new XMLHttpRequest;
|
||||
xhr.onreadystatechange = function() {
|
||||
if(xhr.readyState == xhr.DONE) {
|
||||
callable(xhr);
|
||||
}
|
||||
}
|
||||
xhr.open(method, url);
|
||||
setHeader(xhr, headers);
|
||||
if("GET" === method) {
|
||||
xhr.send();
|
||||
} else {
|
||||
xhr.send(data);
|
||||
}
|
||||
}
|
||||
```
|
||||
为了能够重复利用，本人将这些代码都放入一个js文件中，之后使用导入的方式重复利用。（注意：导入的命名控件首字母需要大写）
|
||||
```
|
||||
import "xmlhttprequest.js" as XmlHttpRequest
|
||||
```
|
||||
使用：
|
||||
```
|
||||
var jsonObject={user:"admin",password:Qt.md5("123")};
|
||||
|
||||
XmlHttpRequest.ajax("GET","http://192.168.3.108:3000/landing"+"?"+XmlHttpRequest.urlQuery(jsonObject),function(xhr){
|
||||
console.log(xhr.status);
|
||||
console.log(xhr.responseText);
|
||||
if(JSON.parse(xhr.responseText).message==="ok") {
|
||||
stack.push("qrc:/resource/qml/listview.qml",{stack:stack,uifont:uifont});
|
||||
}else{
|
||||
message.show("用户名或者密码错误！",2000);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 带cookie
|
||||
因为XmlHttpRequest是不能带有cookie的，所以只能通过c++导出QNetworkAccessManager、QNetworkRequest、QNetworkReply，具体的代码可以参考https://github.com/qyvlik/QmlNetwork。qyvlik封装了一套QML对象，我直接拿来用了，很可惜他的使用说明写的不太详细，有一些操作需要直接看他写的微信案例才能搞定。
|
||||
```
|
||||
NetworkAccessManager { id: manager }
|
||||
NetworkResponse { id: response }
|
||||
NetworkRequest { id: request }
|
||||
Buffer { id: buffer }
|
||||
|
||||
function initWebWeiXinInfo() {
|
||||
var url = "http://192.168.3.108:3000/landing";
|
||||
var data = {
|
||||
user:"admin",
|
||||
password:"123"
|
||||
};
|
||||
|
||||
if(buffer.isOpen()) {
|
||||
buffer.close();
|
||||
}
|
||||
buffer.data = JSON.stringify(data);
|
||||
if(!buffer.open(IODevice.ReadOnly)) {
|
||||
console.log(buffer.errorString());
|
||||
}
|
||||
request.clear();
|
||||
request.url = url;
|
||||
// request.setHeader("Cookie", cookie);
|
||||
request.setHeader("Content-Type", "application/json")
|
||||
request.ioDevice = buffer;
|
||||
|
||||
connectSignalOnce(response.finished,function() {
|
||||
console.log("data:", buffer.data)
|
||||
var headers = response.getAllResponseHeaders();
|
||||
for(var iter in headers) {
|
||||
console.log(headers[iter]);
|
||||
}
|
||||
console.log(response.responseContent);
|
||||
});
|
||||
|
||||
manager.post(request, response);
|
||||
}
|
||||
```
|
||||
|
||||
## 结语
|
||||
感觉qyvlik封装的东西比较多，需求上本人也就用用Get与Post以及cookie，以后有时间会重新封装一个简单版本。
|
||||
118
07-Other/Qt/QtQuick/QtQuick自定义主题以及控件样式.md
Normal file
118
07-Other/Qt/QtQuick/QtQuick自定义主题以及控件样式.md
Normal file
@@ -0,0 +1,118 @@
|
||||
## 自定义控件样式
|
||||
请在Qt帮助索引中输入Customizing a Control进行查看<br>
|
||||
不过实际用下来感觉除非你想自己实现一套效果复杂的UI或是创造一个全新控件，比如：给UI添加模糊、虚化等ShaderEffect效果。不然不推荐用这个。比如本人就是想把CheckBox的大小改小，同时不改变显示样式，这个就很难办到。<br>
|
||||
## 系统自带的几种主题风格
|
||||
1. Default Style
|
||||
2. Fusion Style
|
||||
3. Imagine Style
|
||||
4. Material Style
|
||||
5. Universal Style
|
||||
其中Imagine Style是使用图片定制风格，图片需要按照指定的命名来放置，具体操作请看文档：
|
||||
http://doc.qt.io/qt-5/qtquickcontrols2-imagine.html
|
||||
|
||||
### 在c++中使用QQuickStyle
|
||||
```
|
||||
QQuickStyle::setStyle("Material");
|
||||
```
|
||||
具体内容请在帮助索引中搜索 QQuickStyle
|
||||
### 命令行中设置
|
||||
```
|
||||
./app -style material
|
||||
```
|
||||
### 在Qt的环境变量中设置
|
||||
```
|
||||
QT_QUICK_CONTROLS_STYLE=universal ./app
|
||||
```
|
||||
### 使用配置文件
|
||||
```
|
||||
[Controls]
|
||||
Style=Material
|
||||
```
|
||||
官方的gallery案例用的是这种。
|
||||
网上有个哥们用的是：
|
||||
```
|
||||
if (sty == "mat") {
|
||||
qputenv("QT_QUICK_CONTROLS_CONF", ":/qtquickcontrols2material.conf");
|
||||
} else {
|
||||
qputenv("QT_QUICK_CONTROLS_CONF", ":/qtquickcontrols2universal.conf");
|
||||
}
|
||||
```
|
||||
本人用的是gallery案例中的方式，感觉通过设置环境变量来指定对应的conf不太灵活，所以上述方式仅供参考。<br>
|
||||
想要看懂conf文件需要看以下两篇文档
|
||||
## Qt Quick Controls 2 Configuration File
|
||||
文档：http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
|
||||
在默认情况下将文件放置于:/qtquickcontrols2.conf（也就是根目录）就会生效（需要设置QQuickStyle）
|
||||
### Controls Section
|
||||
Style：定义全局控件样式
|
||||
### XXXX Section
|
||||
对对应的style进行设置
|
||||
### Font Configuration
|
||||
设置字体,有以下几个属性：
|
||||
1. Family
|
||||
2. PointSize
|
||||
3. PixelSize
|
||||
4. StyleHint
|
||||
5. Weight
|
||||
6. Style
|
||||
### Palette Configuration
|
||||
Palette我不太清楚是干什么的
|
||||
## Material Style
|
||||
文档：http://doc.qt.io/qt-5/qtquickcontrols2-material.html#material-theme-attached-prop<br>
|
||||
你可以单独给某一些控件设置style,以下是对应的属性：
|
||||
### accent
|
||||
```
|
||||
Button {
|
||||
text: qsTr("Button")
|
||||
highlighted: true
|
||||
Material.accent: Material.Orange
|
||||
}
|
||||
```
|
||||
### background
|
||||
```
|
||||
Button {
|
||||
text: qsTr("Button")
|
||||
highlighted: true
|
||||
Material.background: Material.Teal
|
||||
}
|
||||
```
|
||||
### elevation
|
||||
控制阴影的属性
|
||||
```
|
||||
Pane {
|
||||
width: 120
|
||||
height: 120
|
||||
|
||||
Material.elevation: 6
|
||||
|
||||
Label {
|
||||
text: qsTr("I'm a card!")
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
```
|
||||
### foreground
|
||||
```
|
||||
Button {
|
||||
text: qsTr("Button")
|
||||
Material.foreground: Material.Pink
|
||||
}
|
||||
```
|
||||
### primary
|
||||
### theme
|
||||
三个可选项：
|
||||
1. Material.Light
|
||||
2. Material.Dark
|
||||
3. Material.System
|
||||
```
|
||||
Pane {
|
||||
Material.theme: Material.Dark
|
||||
|
||||
Button {
|
||||
text: qsTr("Button")
|
||||
}
|
||||
}
|
||||
```
|
||||
## 自定义主题
|
||||
文档：http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#creating-a-custom-style
|
||||
推荐：http://www.cnblogs.com/Fuss/archive/2015/03/20/4353698.html<br>
|
||||
代码没怎么看，Control用的是1.0，可以作为参考，Github上有关这种UI定制的代码还是比较多，建议先去知乎搜索 “请问有哪些优质又开源的qml应用”
|
||||
291
07-Other/Qt/QtQuick/Qt：解决QtQuick（QML）程序，在虚拟机或者某些环境下，动画速度过快的问题.md
Normal file
291
07-Other/Qt/QtQuick/Qt：解决QtQuick（QML）程序，在虚拟机或者某些环境下，动画速度过快的问题.md
Normal file
@@ -0,0 +1,291 @@
|
||||
## 参考网址
|
||||
https://blog.csdn.net/wsj18808050/article/details/54234956
|
||||
|
||||
Qt：获取屏幕物理长度和宽度（CM）
|
||||
https://blog.csdn.net/wsj18808050/article/details/54345537
|
||||
|
||||
Qt：5.8新特新，QtLite使用方法，以及缩减应用体积的效果
|
||||
https://blog.csdn.net/wsj18808050/article/details/55808104
|
||||
|
||||
QML 中的屏幕适配问题
|
||||
https://blog.csdn.net/qyvlik/article/details/51241425
|
||||
|
||||
QT5（9）HTTP POST GET COOKIE 网络编程
|
||||
```c++
|
||||
#include <QNetworkCookie> //单个cookie
|
||||
#include <QNetworkCookieJar> //储存cookie
|
||||
```
|
||||
https://blog.csdn.net/qq_16234613/article/details/53783391
|
||||
|
||||
qt 获取部分的cookie信息 如何把获取的cookie转换为QString类型 正则表达式
|
||||
https://blog.csdn.net/qq_22403265/article/details/51333226
|
||||
|
||||
### cookiebrowser使用webview载入cookie
|
||||
```
|
||||
m_store = m_webview->page()->profile()->cookieStore();
|
||||
m_store->loadAllCookies();
|
||||
```
|
||||
|
||||
### QML Settings 小的示例
|
||||
Setting 可以存储一些变量就想配置文件一样
|
||||
https://www.cnblogs.com/hbrw/p/6744094.html
|
||||
|
||||
### 直接导入qml
|
||||
Importing QML Document Directories
|
||||
目录结构：
|
||||
```
|
||||
myapp
|
||||
|- mycomponents
|
||||
|- CheckBox.qml
|
||||
|- DialogBox.qml
|
||||
|- Slider.qml
|
||||
|- main
|
||||
|- application.qml
|
||||
```
|
||||
那么可以：
|
||||
```
|
||||
import "../mycomponents"
|
||||
|
||||
DialogBox {
|
||||
CheckBox {
|
||||
// ...
|
||||
}
|
||||
Slider {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
但是创建一个命名空间来导入会更好
|
||||
```
|
||||
import "../mycomponents" as MyComponents
|
||||
|
||||
MyComponents.DialogBox {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
### qml文件间通讯
|
||||
3.题回正传，直接上代码（以StackView管理页面为例）
|
||||
(1)page1.qml跳转到page2.qml传值
|
||||
```
|
||||
page1.qml
|
||||
|
||||
Rectangle
|
||||
{
|
||||
id:rect1
|
||||
...
|
||||
MouseArea {
|
||||
id: maStartQuery
|
||||
anchors.fill: parent
|
||||
onClicked:
|
||||
{
|
||||
if(!stackView.busy)
|
||||
stackView.push(Qt.resolvedUrl("qrc:///qml/page2.qml"),
|
||||
{name:"张三"})//给page2.qml的name传值“张三”,name必须在page2.qml中定义成属性
|
||||
}
|
||||
}
|
||||
...
|
||||
}
|
||||
|
||||
page2.qml定义如下
|
||||
|
||||
Rectangle
|
||||
{
|
||||
id:rect2
|
||||
...
|
||||
property string name:""//要传的值
|
||||
...
|
||||
|
||||
}
|
||||
```
|
||||
(2)page2.qml点击"确定"按钮时将结果返回给page1.qml
|
||||
|
||||
A.在page1.qml中增加一个函数clickedfunc，当点击page2.qml中"确定"按钮时调用；
|
||||
B.在page2.qml中增加一个属性containerqml，用来记录page1.qml；
|
||||
C.在从page1.qml跳转到page2.qml时，将rect1传给page2.qml的containerqml属性。
|
||||
```
|
||||
page1.qml
|
||||
Rectangle
|
||||
{
|
||||
id:rect1
|
||||
...
|
||||
MouseArea {
|
||||
id: maStartQuery
|
||||
anchors.fill: parent
|
||||
onClicked:
|
||||
{
|
||||
if(!stackView.busy)
|
||||
stackView.push(Qt.resolvedUrl("qrc:///qml/page2.qml"),
|
||||
{name:"张三",containerqml:rect1})
|
||||
}
|
||||
}
|
||||
|
||||
//当点击page2.qml中"确定"按钮时调用
|
||||
function clickedfunc(temp)
|
||||
{
|
||||
console.log("改成了："+temp);
|
||||
stackView.pop();//返回到本页
|
||||
}
|
||||
...
|
||||
}
|
||||
|
||||
page2.qml
|
||||
Rectangle
|
||||
{
|
||||
id:rect2
|
||||
...
|
||||
property variant containerqml: null
|
||||
property string name:""//要传的值
|
||||
...
|
||||
MouseArea {
|
||||
id: btnOK
|
||||
anchors.fill: parent
|
||||
onClicked:
|
||||
{
|
||||
containerqml.clickedfunc("李四");//调用page1.qml中的函数，实现了传返回值。
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
另一种就是信号与槽
|
||||
|
||||
### QtQuick 母版页
|
||||
```
|
||||
//~ Panel.qml
|
||||
Item {
|
||||
|
||||
property alias headerHeight: headerLoader.height
|
||||
property alias footerHeight: footerLoader.height
|
||||
|
||||
property Component headerComponent: null
|
||||
readonly property Item headerItem: headerLoader.item
|
||||
|
||||
Loader {
|
||||
id: headerLoader
|
||||
width: parent.width
|
||||
height: 40
|
||||
sourceComponent: headerComponent
|
||||
Binding {
|
||||
target: headerLoader.item
|
||||
property: "anchors.fill"
|
||||
value: headerLoader
|
||||
}
|
||||
}
|
||||
|
||||
property Component footerComponent: null
|
||||
readonly property Item footerItem: footerLoader.item
|
||||
|
||||
Loader {
|
||||
id: footerLoader
|
||||
width: parent.width
|
||||
height: 40
|
||||
anchors.bottom: parent.bottom
|
||||
Binding {
|
||||
target: footerLoader.item
|
||||
property: "anchors.fill"
|
||||
value: footerLoader
|
||||
}
|
||||
}
|
||||
|
||||
property Component contentComponent: null
|
||||
readonly property Item contentItem: contentLoader.item
|
||||
|
||||
Loader {
|
||||
id: contentLoader
|
||||
width: parent.width
|
||||
anchors.top: headerLoader.bottom
|
||||
anchors.bottom: footerLoader.top;
|
||||
Binding {
|
||||
target: contentLoader.item
|
||||
property: "anchors.fill"
|
||||
value: contentLoader
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Panel {
|
||||
headerComponent: Rectangle {
|
||||
color: "black"
|
||||
}
|
||||
footerComponent: Rectangle {
|
||||
color: "black"
|
||||
}
|
||||
contentComponent: ListView {
|
||||
delegate: Rectangle { width: parent.width; height: 40; color: "green" }
|
||||
model: 10
|
||||
}
|
||||
}
|
||||
```
|
||||
### 全局单例模式
|
||||
|
||||
1. 入口文件的 id 和属性
|
||||
2. 静态 JavaScript 文件
|
||||
3. qml 单例，QML 实现
|
||||
4. qml 单例，c++ 实现
|
||||
5. 注册上下文属性
|
||||
|
||||
### 表单提交（不包括cookies）
|
||||
```
|
||||
function urlQuery(jsonObject) {
|
||||
var query = "";
|
||||
var i = 0;
|
||||
for(var iter in jsonObject) {
|
||||
|
||||
if(i > 0) {
|
||||
query += "&";
|
||||
}
|
||||
query += iter +"=" + encodeURI(jsonObject[iter]);
|
||||
i++;
|
||||
}
|
||||
// console.log("url query:", query);
|
||||
return query;
|
||||
}
|
||||
```
|
||||
```
|
||||
function setHeader(xhr, headers) {
|
||||
//"Content-Type":"application/x-www-form-urlencoded"
|
||||
for(var iter in headers) {
|
||||
xhr.setRequestHeader(iter, headers[iter]);
|
||||
}
|
||||
}
|
||||
|
||||
function ajax(method, url, headers, data, callable) {
|
||||
headers = headers || {};
|
||||
callable = callable || function(xhr) {
|
||||
console.log(xhr.responseText);
|
||||
}
|
||||
var xhr = new XMLHttpRequest;
|
||||
xhr.onreadystatechange = function() {
|
||||
if(xhr.readyState == xhr.DONE) {
|
||||
callable(xhr);
|
||||
}
|
||||
}
|
||||
xhr.open(method, url);
|
||||
setHeader(xhr, headers);
|
||||
if("GET" === method) {
|
||||
xhr.send();
|
||||
} else {
|
||||
xhr.send(data);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果带有指定名称的头部已经被指定了，这个头部的新值就是：之前指定的值，加上逗号、空白以及这个调用指定的值。
|
||||
如果 open() 调用指定了认证资格，XMLHttpRequest 自动发送一个适当的 Authorization 请求头部。但是，你可以使用 setRequestHeader() 来添加这个头部。类似地，如果 Web 服务器已经保存了和传递给 open() 的 URL 相关联的 cookie，适当的 Cookie 或 Cookie2 头部也自动地包含到请求中。可以通过调用 setRequestHeader() 来把这些 cookie 添加到头部。XMLHttpRequest 也可以为 User-Agent 头部提供一个默认值。如果它这么做，你为该头部指定的任何值都会添加到这个默认值后面。
|
||||
有些请求头部由 XMLHttpRequest 自动设置而不是由这个方法设置，以符合 HTTP 协议。这包括如下和代理相关的头部：
|
||||
Host
|
||||
Connection
|
||||
Keep-Alive
|
||||
Accept-charset
|
||||
Accept-Encoding
|
||||
If-Modified-Since
|
||||
If-None-Match
|
||||
If-Range
|
||||
Range
|
||||
|
||||
### XMLHttpRequest设置cookie的问题
|
||||
https://segmentfault.com/a/1190000004322487
|
||||
|
||||
### 如何获取指定objectName的QObject
|
||||
23
07-Other/Qt/QtQuick/c++与QML混合编程笔记.md
Normal file
23
07-Other/Qt/QtQuick/c++与QML混合编程笔记.md
Normal file
@@ -0,0 +1,23 @@
|
||||
## 信号与槽
|
||||
信号与槽都可以在qml中访问
|
||||
### Q_INVOKABLE宏
|
||||
在定义一个类的成员函数时使用Q_INVOKABLE宏来修饰，就可以让该方法被元对象系统调用。（也就是注册到元对象系统中）
|
||||
例如：
|
||||
```
|
||||
Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);
|
||||
```
|
||||
### Q_ENUMS宏
|
||||
使用Q_ENUMS(枚举名)的方式来注册枚举类型
|
||||
### Q_PROPERTY宏
|
||||
Q_PROPERTY宏用来定义可通过元对象系统访问的属性，通过它定义的属性，可以在QML中访问、修改，也可以通过在属性变化时发射特定信号。
|
||||
### 注册一个QML可用类型
|
||||
1. 实现c++类
|
||||
2. 注册QML类型
|
||||
3. 在QML中导入类型
|
||||
4. 在QML中创建由c++导出的类型的实例并使用
|
||||
|
||||
#### 注册QML类型
|
||||
1. qmlRegisterSingletonType() 用来注册单例类型
|
||||
2. qmlRegisterType() 注册非单例类型
|
||||
3. qmlRegisterTypeNotAvailable() 注册一个类型用来占位
|
||||
4. qmlRegisterUncreateableType() 注册具有附加属性的附加类型
|
||||
Reference in New Issue
Block a user