Solved QML radio button enable disable panel component
-
Hi
I have a radio button group one radio button for serial panel and other for tcpip panel in the UI_connect_top.qml
serial and tcpip panel are defined in separate qml.files and are used as components in UI_connect_top.qmlI have made property alias for tcip_panel and serial_panel for enable.
when I click on the radio buttons the enable and disable of panels does not work. here is my code
UI_connect_top.qml
import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4Item {
id: ui_connect_top_item
width: 1200
height: 800UI_serial{ //title: qsTr ("Serial ports(%1)").arg(index) id:panel_serial y: 0 width: 470 height: 70 anchors.leftMargin: 10 anchors.left: serial_radio.right serial_en: true Component.onCompleted: console.log("----Serial Panel populated!") }
UI_tcp_ip{
//title: qsTr ("Serial ports(%1)").arg(index)
y:86
id:panel_tcpip
anchors.right: parent.right
anchors.rightMargin: 700
anchors.left: tcpip_radio.right
anchors.leftMargin: 10
tcpip_en: false
Component.onCompleted: console.log("----Tcp/ip Panel populated!")
//anchors.left: panel_connect.Right
}UI_log{
//title: qsTr ("Serial ports(%1)").arg(index)
id:panel_log
y: 0
anchors.right: parent.right
anchors.rightMargin: 5
anchors.left: panel_serial.right
anchors.leftMargin: 10
anchors.top: panel_serial.Bottom;
Component.onCompleted: console.log("----Log Panel populated!")
}UI_info{
//title: qsTr ("Serial ports(%1)").arg(index)
id:panel_info
x: 515
y: 86
width: 670
height: 270
Component.onCompleted: console.log("----Info Panel populated!")
//anchors.top: panel_log.Bottom;
}RadioButton {
id: serial_radio
checked: true
y: 30
width: 20
height: 20
text: qsTr("")
anchors.verticalCenterOffset: 5
anchors.verticalCenter: panel_serial.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
onCheckableChanged: checked? panel_serial.serial_en=true:panel_tcpip.tcpip_en=false
}RadioButton {
id: tcpip_radio
checked: false
y: 150
width: 20
height: 20
text: qsTr("")
anchors.verticalCenterOffset: 10
anchors.verticalCenter: panel_tcpip.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
onCheckableChanged: checked? panel_serial.serial_en=false:panel_tcpip.tcpip_en=true
}
}UI_serial.qml
import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4Item {
id: serial_panel_item
width: 470
height: 70property alias serial_en: serial_port_group.enabled GroupBox { id: serial_port_group x: 0 y: 0 width: 470 height: 70 clip: true enabled: serial_en transformOrigin: Item.BottomLeft contentHeight: 30 title: qsTr("Serial ports") Switch { id: serial_connect_id x: 306 y: -1 width: 140 height: 30 text: checked? qsTr("Connected"):qsTr("Disconnected") checked: false indicator: Rectangle { implicitWidth: 48 implicitHeight: 26 x: serial_connect_id.leftPadding y: parent.height / 2 - height / 2 radius: 13 color: serial_connect_id.checked ? "#00ff00" : "#ff0000" border.color: serial_connect_id.checked ? "#17a81a" : "#cccccc" Rectangle { x: serial_connect_id.checked ? parent.width - width : 0 width: 26 height: 26 radius: 13 color: serial_connect_id.down ? "#cccccc" : "#ffffff" border.color: serial_connect_id.checked ? (serial_connect_id.down ? "#17a81a" : "#21be2b") : "#999999" } } onCheckedChanged:connect_serial_port.callback_connect(serial_port_list_id.currentText,serial_connect_id.text,serial_connect_id.checked) } Button { id: serial_scan_id x: 242 y: -2 width: 50 height: 30 text: qsTr("Scan") onClicked: connect_serial_port.scan_for_ports() } ComboBox { id: serial_port_list_id x: -5 y: -2 model: connect_serial_port.port_list width: 235 height: 30 currentIndex: -1 onAccepted: { if (editableCombo.find(currentText) === -1) { model.append({text: editText}) currentIndex = editableCombo.find(editText) } } } }
}
UI_tcp_ip.qml
import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4Item { id: tcpip_panel_item width: 470 height: 120 property alias tcpip_en: tcpip_port_group.enabled GroupBox { id: tcpip_port_group x: 0 y: 0 width: 470 height: 120 clip: true enabled: tcpip_en transformOrigin: Item.BottomLeft contentHeight: 30 title: qsTr("TCP/IP client") Text { id: server_name_txt_id x: 0 y: 10 width: 100 height: 30 text: qsTr("Server name") verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft font.pixelSize: 12 } TextField { id: server_name_id x: 106 y: 10 text: qsTr("rk2_2018002.eu.socionext.com") width: 340 height: 30 } Text { id: server_port_txt_id x: 0 y: 51 width: 100 height: 30 text: qsTr("Server port") horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter font.pixelSize: 12 } TextField { id: server_port_id x: 106 y: 50 width: 192 height: 30 text: qsTr("12345") horizontalAlignment: Text.AlignHCenter } Switch { id: tcpip_connect_id x: 306 y: 50 width: 140 height: 30 text: checked? qsTr("Connected"):qsTr("Disconnected") anchors.right: parent.right anchors.rightMargin: -3 anchors.bottom: parent.bottom anchors.bottomMargin: -4 checked: false indicator: Rectangle { color: tcpip_connect_id.checked ? "#00ff00" : "#ff0000" implicitWidth: 48 implicitHeight: 26 radius: 13 border.color: tcpip_connect_id.checked ? "#17a81a" : "#cccccc" Rectangle { x: tcpip_connect_id.checked ? parent.width - width : 0 width: 26 height: 26 radius: 13 color: tcpip_connect_id.down ? "#cccccc" : "#ffffff" border.color: tcpip_connect_id.checked ? (tcpip_connect_id.down ? "#17a81a" : "#21be2b") : "#999999" } } onCheckedChanged:tcpip_client.tcpConnect(server_name_id.text,server_port_id.text,tcpip_connect_id.checked); }
}
} -
you are doing your conditionnal operations if ''checkableChanged()" signal is emitted, do it on clicked() or onCheckedChanged()
RadioButton { id: tcpip_radio checked: false y: 150 width: 20 height: 20 text: qsTr("") anchors.verticalCenterOffset: 10 anchors.verticalCenter: panel_tcpip.verticalCenter anchors.left: parent.left anchors.leftMargin: 5 //onCheckableChanged: checked? panel_serial.serial_en=false:panel_tcpip.tcpip_en=true onClicked : checked ? panel_serial.serial_en=false : panel_tcpip.tcpip_en=true //or onCheckedChanged } }
Note : also your conditional function leaves me skeptical, what it must do ?
For now if you check panel_serial.serial_en will be unvisible
if you uncheck panel_tcpip.tcpip_en will be visible
So i don't realy understand this -
thanks worked !