QML-项目实战二
简介
使用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: 800
height: 600
visible: true
title: qsTr("UART Debug Application")
readonly property int fiexHeight: 25 //创建只读的数据
//添加工具栏
header: ToolBar{
height: 35
spacing: 5
//网格布局
GridLayout{
columns: 3
ToolButton{
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 header
ColumnLayout{
anchors.fill: parent
anchors.leftMargin: 5
anchors.rightMargin: 5
RowLayout{ //RowLayout todo
Layout.fillHeight: true
Layout.fillWidth: true
//left area
ColumnLayout{
Layout.preferredWidth: 260
Layout.alignment: Qt.AlignTop
GridLayout{
rows: 5
GroupBox{
Layout.row: 0
title: "Uart configuration"
Layout.preferredWidth: 240
GridLayout{
columns: 2
rows: 5
Label{
Layout.column: 0
Layout.row: 0
Layout.preferredHeight: fiexHeight
text: qsTr("uart port")
}
ComboBox{
Layout.column: 1
Layout.row: 0
Layout.preferredHeight: fiexHeight
model:["ttyWK0","ttyWK1","ttyWK2","ttyWK3"]
}
Label{
Layout.column: 0
Layout.row: 1
Layout.preferredHeight: fiexHeight
text: qsTr("bit port ")
}
ComboBox{
Layout.column: 1
Layout.row: 1
Layout.preferredHeight: fiexHeight
model:["ttyWK0","ttyWK1","ttyWK2","ttyWK3"]
}
Label{
Layout.column: 0
Layout.row: 2
Layout.preferredHeight: fiexHeight
text: qsTr("data bit")
}
ComboBox{
Layout.column: 1
Layout.row: 2
Layout.preferredHeight: fiexHeight
model:["5","6","7","8"]
}
Label{
Layout.column: 0
Layout.row: 3
Layout.preferredHeight: fiexHeight
text: qsTr("parit bit")
}
ComboBox{
Layout.column: 1
Layout.row: 3
Layout.preferredHeight: fiexHeight
model:["None","Even","Odd","Mark","Space"]
}
Label{
Layout.column: 0
Layout.row: 4
Layout.preferredHeight: fiexHeight
text: qsTr("stop bit")
}
ComboBox{
Layout.column: 1
Layout.row: 4
Layout.preferredHeight: fiexHeight
model:["1","2"]
}
}
} //end GroupBox 0
GroupBox{
Layout.row: 1
title: "receiving configuration"
Layout.preferredWidth: 240
GridLayout{
columns: 2
rows:2
Row{
Layout.preferredHeight: fiexHeight
//这个按钮组可以不使用
ButtonGroup{
id:rcvradiogroup
}
RadioButton{
id:id_rcvascii
text: "ASCII"
checked: true
implicitHeight: 25
Layout.preferredHeight: fiexHeight
}
RadioButton{
id:id_rcvhex
text: "Hex"
checked: false
implicitHeight: 25
Layout.preferredHeight: fiexHeight
}
}//end row
Column{
Layout.row: 1
CheckBox{
id:outonwline
text: "auto lin free "
checked: true
indicator: Rectangle{
anchors.verticalCenter: parent.verticalCenter
width: 20
height: 15
color: "transparent"
border.color: "black"
Rectangle{
width: 10
height: 8
color: outonwline.checked?"green":"transparent"
anchors.centerIn: parent
}
}
}//checkbox 0
CheckBox{
id:outondisplay
text: "display transparent "
checked: true
indicator: Rectangle{
anchors.verticalCenter: parent.verticalCenter
width: 20
height: 15
color: "transparent"
border.color: "black"
Rectangle{
width: 10
height: 8
color: outondisplay.checked?"green":"transparent"
anchors.centerIn: parent
}
}
}//checkbox 1
CheckBox{
id:outondisplaytime
text: "display time "
checked: true
indicator: Rectangle{
anchors.verticalCenter: parent.verticalCenter
width: 20
height: 15
color: "transparent"
border.color: "black"
Rectangle{
width: 10
height: 8
color: outondisplaytime.checked?"green":"transparent"
anchors.centerIn: parent
}
}
}//checkbox 2
}
}
} //end GroupBox 1
GroupBox{
Layout.row: 2
title: "sending configuration"
Layout.preferredWidth: 240
GridLayout{
columns: 2
rows:2
Row{
Layout.preferredHeight: fiexHeight
//这个按钮组可以不使用
ButtonGroup{
id:sendradiogroup
}
RadioButton{
id:id_sendascii
text: "ASCII"
checked: true
implicitHeight: 25
Layout.preferredHeight: fiexHeight
}
RadioButton{
id:id_sendhex
text: "Hex"
checked: false
implicitHeight: 25
Layout.preferredHeight: fiexHeight
}
}//end row
Column{
Layout.row: 1
CheckBox{
id:inonwline
text: "auto repeat "
checked: true
indicator: Rectangle{
anchors.verticalCenter: parent.verticalCenter
width: 20
height: 15
color: "transparent"
border.color: "black"
Rectangle{
width: 10
height: 8
color: outonwline.checked?"green":"transparent"
anchors.centerIn: parent
}
}
}//checkbox 1
}
RowLayout{
Layout.columnSpan: 1
Layout.preferredHeight: fiexHeight
TextField{
id:sendinputField
Layout.preferredHeight: 30
Layout.preferredWidth: 60
validator: IntValidator{}
text: "1000"
}
Label{
text:"ms"
}
}
}
} //end GroupBox 2
} //end GridLayout
}// end ColumnLayout left area
ColumnLayout{
Layout.fillHeight: true
Layout.fillWidth: true
ScrollView{
Layout.fillHeight: true
Layout.fillWidth: true
background: Rectangle{
color: "transparent"
border.color: "black"
border.width: 2
radius: 5
Layout.fillHeight: true
Layout.fillWidth: true
}
//滚动条控件包裹TextArea
TextArea{
id:rcvmsgtxtField
Layout.fillHeight: true
Layout.fillWidth: true
}
}
GroupBox{
Layout.preferredHeight: 100
Layout.fillWidth: true
ScrollView{
Layout.fillHeight: true
Layout.fillWidth: true
//滚动条控件包裹TextArea
TextArea{
id:sendmsgtxtField
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
} //end ColumnLayout right
}
RowLayout{
Layout.preferredHeight: 50
TextField{
Layout.fillWidth: true
placeholderText: qsTr("Input Message...")
}
Button{
text: qsTr("send")
}
}
}//end ColumnLayout
//设置页脚
footer:Item{
width:parent.width
height: 35
RowLayout{
//这里宽度高度都需要设置一下，只设置一个会挤到一起。
height: parent.height
width: parent.width
Rectangle{
Layout.fillWidth: true
Label{
text: "Recvived Bytes: 0"
}
}
Rectangle{
Layout.fillWidth: true
Label{
text: "send Bytes: 0"
}
}
Rectangle{
Layout.fillWidth: true
Label{
text: "author : Only"
horizontalAlignment: Text.AlignRight
}
}
}
}
}