简介
使用QML实现AURT(串口)的通信
效果图
代码实现
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15// import obj2 1.0 //这是普通注册
// import obj3 1.0 //这是使用单例注册ApplicationWindow {width: 800height: 600visible: truetitle: qsTr("UART Debug Application")readonly property int fiexHeight: 25 //创建只读的数据//添加工具栏header: ToolBar{height: 35spacing: 5//网格布局GridLayout{columns: 3ToolButton{Layout.column: 0 //设置列Layout.preferredHeight: 32 //设置高度width: 32;height: 32// text: qsTr("Start")//ToolButton需要设置背景来设置图片background: Image{source: "/images/start.png"width:32;height: 32;fillMode: Image.PreserveAspectFit//图像按照比例缩放，不裁剪}}ToolButton{Layout.column: 1 //设置列Layout.preferredHeight: 32 //设置高度width: 32;height: 32// text: qsTr("stop")//ToolButton需要设置背景来设置图片background: Image{source: "/images/stop.png"width:32;height: 32;fillMode: Image.PreserveAspectFit//图像按照比例缩放，不裁剪}}ToolButton{Layout.column: 2 //设置列Layout.preferredHeight: 32 //设置高度width: 32;height: 32// text: qsTr("abort")//ToolButton需要设置背景来设置图片background: Image{source: "abort" //设置别名用别名加载width:32;height: 32;fillMode: Image.PreserveAspectFit//图像按照比例缩放，不裁剪}}} //end GridLayout}// end headerColumnLayout{anchors.fill: parentanchors.leftMargin: 5anchors.rightMargin: 5RowLayout{ //RowLayout todoLayout.fillHeight: trueLayout.fillWidth: true//left areaColumnLayout{Layout.preferredWidth: 260Layout.alignment: Qt.AlignTopGridLayout{rows: 5GroupBox{Layout.row: 0title: "Uart configuration"Layout.preferredWidth: 240GridLayout{columns: 2rows: 5Label{Layout.column: 0Layout.row: 0Layout.preferredHeight: fiexHeighttext: qsTr("uart port")}ComboBox{Layout.column: 1Layout.row: 0Layout.preferredHeight: fiexHeightmodel:["ttyWK0","ttyWK1","ttyWK2","ttyWK3"]}Label{Layout.column: 0Layout.row: 1Layout.preferredHeight: fiexHeighttext: qsTr("bit port ")}ComboBox{Layout.column: 1Layout.row: 1Layout.preferredHeight: fiexHeightmodel:["ttyWK0","ttyWK1","ttyWK2","ttyWK3"]}Label{Layout.column: 0Layout.row: 2Layout.preferredHeight: fiexHeighttext: qsTr("data bit")}ComboBox{Layout.column: 1Layout.row: 2Layout.preferredHeight: fiexHeightmodel:["5","6","7","8"]}Label{Layout.column: 0Layout.row: 3Layout.preferredHeight: fiexHeighttext: qsTr("parit bit")}ComboBox{Layout.column: 1Layout.row: 3Layout.preferredHeight: fiexHeightmodel:["None","Even","Odd","Mark","Space"]}Label{Layout.column: 0Layout.row: 4Layout.preferredHeight: fiexHeighttext: qsTr("stop bit")}ComboBox{Layout.column: 1Layout.row: 4Layout.preferredHeight: fiexHeightmodel:["1","2"]}}} //end GroupBox 0GroupBox{Layout.row: 1title: "receiving configuration"Layout.preferredWidth: 240GridLayout{columns: 2rows:2Row{Layout.preferredHeight: fiexHeight//这个按钮组可以不使用ButtonGroup{id:rcvradiogroup}RadioButton{id:id_rcvasciitext: "ASCII"checked: trueimplicitHeight: 25Layout.preferredHeight: fiexHeight}RadioButton{id:id_rcvhextext: "Hex"checked: falseimplicitHeight: 25Layout.preferredHeight: fiexHeight}}//end rowColumn{Layout.row: 1CheckBox{id:outonwlinetext: "auto lin free "checked: trueindicator: Rectangle{anchors.verticalCenter: parent.verticalCenterwidth: 20height: 15color: "transparent"border.color: "black"Rectangle{width: 10height: 8color: outonwline.checked?"green":"transparent"anchors.centerIn: parent}}}//checkbox 0CheckBox{id:outondisplaytext: "display transparent "checked: trueindicator: Rectangle{anchors.verticalCenter: parent.verticalCenterwidth: 20height: 15color: "transparent"border.color: "black"Rectangle{width: 10height: 8color: outondisplay.checked?"green":"transparent"anchors.centerIn: parent}}}//checkbox 1CheckBox{id:outondisplaytimetext: "display time "checked: trueindicator: Rectangle{anchors.verticalCenter: parent.verticalCenterwidth: 20height: 15color: "transparent"border.color: "black"Rectangle{width: 10height: 8color: outondisplaytime.checked?"green":"transparent"anchors.centerIn: parent}}}//checkbox 2}}} //end GroupBox 1GroupBox{Layout.row: 2title: "sending configuration"Layout.preferredWidth: 240GridLayout{columns: 2rows:2Row{Layout.preferredHeight: fiexHeight//这个按钮组可以不使用ButtonGroup{id:sendradiogroup}RadioButton{id:id_sendasciitext: "ASCII"checked: trueimplicitHeight: 25Layout.preferredHeight: fiexHeight}RadioButton{id:id_sendhextext: "Hex"checked: falseimplicitHeight: 25Layout.preferredHeight: fiexHeight}}//end rowColumn{Layout.row: 1CheckBox{id:inonwlinetext: "auto repeat "checked: trueindicator: Rectangle{anchors.verticalCenter: parent.verticalCenterwidth: 20height: 15color: "transparent"border.color: "black"Rectangle{width: 10height: 8color: outonwline.checked?"green":"transparent"anchors.centerIn: parent}}}//checkbox 1}RowLayout{Layout.columnSpan: 1Layout.preferredHeight: fiexHeightTextField{id:sendinputFieldLayout.preferredHeight: 30Layout.preferredWidth: 60validator: IntValidator{}text: "1000"}Label{text:"ms"}}}} //end GroupBox 2} //end GridLayout}// end ColumnLayout left areaColumnLayout{Layout.fillHeight: trueLayout.fillWidth: trueScrollView{Layout.fillHeight: trueLayout.fillWidth: truebackground: Rectangle{color: "transparent"border.color: "black"border.width: 2radius: 5Layout.fillHeight: trueLayout.fillWidth: true}//滚动条控件包裹TextAreaTextArea{id:rcvmsgtxtFieldLayout.fillHeight: trueLayout.fillWidth: true}}GroupBox{Layout.preferredHeight: 100Layout.fillWidth: trueScrollView{Layout.fillHeight: trueLayout.fillWidth: true//滚动条控件包裹TextAreaTextArea{id:sendmsgtxtFieldLayout.fillHeight: trueLayout.fillWidth: true}}}} //end ColumnLayout right}RowLayout{Layout.preferredHeight: 50TextField{Layout.fillWidth: trueplaceholderText: qsTr("Input Message...")}Button{text: qsTr("send")}}}//end ColumnLayout//设置页脚footer:Item{width:parent.widthheight: 35RowLayout{//这里宽度高度都需要设置一下，只设置一个会挤到一起。height: parent.heightwidth: parent.widthRectangle{Layout.fillWidth: trueLabel{text: "Recvived Bytes: 0"}}Rectangle{Layout.fillWidth: trueLabel{text: "send Bytes: 0"}}Rectangle{Layout.fillWidth: trueLabel{text: "author : Only"horizontalAlignment: Text.AlignRight}}}}
}