QML/C++中常用功能整理（持续更新中...）

Posted 2021-11-11 火山上的企鹅

QML/C++中常用功能整理

• ● Qt Creator中最最常用快捷键
• ● 多线程编译
• ● 将一个数字转化成16进制字符串形式
• ● 小数点位数
• ● Math应用
• ● 打印
• ● 子项的批量操作
• ● 地图中经纬度总结
• ● 地图中取方位角和坐标
• ● Row、Column默认宽高
• ● 控件先确定底层大小

    【说明】 把一些QML中常用到的，做一个简单的总结，目前未分类，未细化，未添gif图和实例，想到什么写什么，后续再补…

● Qt Creator中最最常用快捷键

F1        			查看帮助（可直接在某个控件上）
F2        			跳转到函数定义（和Ctrl+鼠标左键一样的效果）
F4       	 		头文件和源文件之间切换
Ctrl + B        	编译工程
Ctrl + R        	运行工程
Ctrl + I        	自动对齐
Ctrl + /        	注释行，取消注释行
Ctrl + Shift + <    折叠代码块
Ctrl + Shift + >    展开代码块
Alt + 0    			关闭/打开左侧显示（方便编辑）

● 多线程编译

-j16 是开启16线程编译，主要得看自己的电脑核心数，稳妥一点 -j4 一般电脑都OK的。

据我测试，加不加编译时间都一样，应该新版本的QtCreator默认已经会根据电脑的核心自动设置多线程编译，比如识别到你的电脑是16核心的就会默认设置-j16参数进行编译

● 将一个数字转化成16进制字符串形式

function toHex(num){    
    return num<16?  "0x0"+num.toString(16).toUpperCase() : "0x"+num.toString(16).toUpperCase();
}

● 小数点位数

xxx.toFixed(x)，如：

property real _pi:    3.1415926
_pi.toFixed(2)  //保留两位小数 3.14

● Math应用

Math.min(x, y)  	//取最小值
Math.max(x, y)  	//取最大值
Math.round(x)		//返回一个数字四舍五入后接近的整数

● 打印

//QML中打印
console.log("index is: ")

//c++中打印
qDebug() << "No Internet Access";

● 子项的批量操作

利用 children 和 startsWith，如下，clearAllChecks() 函数可以批量操作 RowLayout 的 MyButton ，可以跳过 ColoredImage

function clearAllChecks() {
    for (var i=0; i<rowLayout.children.length; i++) {
       if (rowLayout.children[i].toString().startsWith("MyButton"))
            rowLayout.children[i].checked = false
        }
}

RowLayout {
     id:                     rowLayout
     ...
     //head
     ColoredImage {
         id:                 innerImage
         ...
     }
     //first Button
     MyButton {
         id:                 firstButton
         text:               qsTr("我是目录1")
         icon.source:        "/images/1"
         onClicked: {
             clearAllChecks()
             checked = true
         }
     }
     //second Button
     MyButton {
         text:               qsTr("我是目录2")
         icon.source:        "/images/2"
         onClicked: {
             clearAllChecks()
             checked = true
         }
     }
 }

● 地图中经纬度总结

// 经纬度常用定义：
property var   _coordinate:    QtPositioning.coordinate(0, 0) //先纬度后经度

//定义一个简单Plugin和Map
Plugin {
    id: mapPlugin
    name: "osm" // "mapboxgl", "esri", ...
}
Map {
	id： 			map
    anchors.fill: 	parent
    plugin: 		mapPlugin
    center: 		QtPositioning.coordinate(59.91, 10.75) // Oslo 先纬度后经度
    zoomLevel: 		14
}

//取地图中心经纬高的8位小数    
function mapCenter() {
    var coordinate = map.center
	coordinate.latitude  = coordinate.latitude.toFixed(8)
	coordinate.longitude = coordinate.longitude.toFixed(8)
	coordinate.altitude  = coordinate.altitude.toFixed(8)
	return coordinate
}

//取当前地图中鼠标位置的经纬高
Map {
	id：		map
	...
	MouseArea {
	anchors.fill: parent
	 onClicked: {
		var coordinate = map.toCoordinate(Qt.point(mouse.x, mouse.y), false )
	    coordinate.latitude = coordinate.latitude.toFixed(8)
	    coordinate.longitude = coordinate.longitude.toFixed(8)
	    coordinate.altitude = coordinate.altitude.toFixed(8)  //高一般是无效的
	    }
	}
}

● 地图中取方位角和坐标

azimuthTo、atDistanceAndAzimuth

property var    changChaCoordinate:    QtPositioning.coordinate(28.2, 113)    //长沙
property var    shangHaiCoordinate:    QtPositioning.coordinate(31.2, 121.5)  //上海
property var 	targetCoordinate:	   QtPositioning.coordinate(0, 0) //目标经纬度，距离长沙100km，在长沙到上海的方向上

//上海相对于长沙的方位角：
var azimuth =  changChaCoordinate.azimuthTo(shangHaiCoordinate)
//计算目标经纬度，给一个距离和方位角，就可以确定另外一个经纬度：
targetCoordinate = changChaCoordinate.atDistanceAndAzimuth(1000000, azimuth)

● Row、Column默认宽高

经过测试，Row和Column中可以不指定宽高；

Column 中的默认宽为子控件中最宽的， 默认高为所有子控件高之和加上间隙 ；
另外width = implicitWidth height = implicitHeight；

Row中默认高为子控件中最高的，默认宽为子控件宽之和加上间隙；
另外width = implicitWidth height = implicitHeight；

● 控件先确定底层大小

未完待续…