Custom Qml control CheckBox

 

A checkbox displays an option button that can be toggled (checked) or off (unchecked).

• Import method: file import
• Compatibility: QtQuick1.xwithQtQuick2.x
• Inheritance: Item

Attributes

• background: Item
• checked: bool
• contentItem: Item
• down: bool
• indicator: Item
• pressed: bool
• text: string

describe

A checkbox displays an option button that can be toggled (checked) or off (unchecked). Checkboxes are typically used to select one or more options from a set of options.

CheckBox {      checked: true     text: "Default" }

example

properties document

• background:Item This property holds the background item of the control.
• checked:bool This property holds whether the control is selected.
• contentItem:Item This attribute holds custom content elements.
• down:bool This property holds whether the button is visually down. For more information, please see pressed.
• indicator:Item This property holds the indicator item.
• pressed:bool This property holds whether the button was physically pressed. Buttons can be pressed via touch or key events. For more information, please check down.
• text:string This property holds the text description of the button. For more information, please refer to contentItem.

source code

 

	import QtQuick 2.0
	Item { id: root
	implicitWidth: backgroundId.item.width
	implicitHeight: backgroundId.item.height
	property bool checked: false
	property bool down: false
	property bool pressed: false
	property string text: "text"
	property Component indicator : Rectangle {
	implicitWidth: 20
	implicitHeight: 20
	radius: 3
	border.color: "gray"
	y: (root.height - height)/2
	Rectangle {
	anchors.centerIn: parent
	width: 10; height: 10
	radius: 2
	color: "gray"
	visible: root.checked
	}
	}
	property Component contentItem : Text {
	height: root.height
	text: root.text
	color: root.down ? "black" : "black"
	horizontalAlignment: Text.AlignHCenter
	verticalAlignment: Text.AlignVCenter
	x: 25
	}
	property Component background : Rectangle {
	width: 60; height: 20
	color: "#00000000"
	}
	Loader {
	id: backgroundId
	sourceComponent: background
	}
	Loader {
	id: indicatorId
	sourceComponent: indicator
	}
	Loader {
	id: contentItemId
	sourceComponent:
	contentItem
	}
	MouseArea {
	id: mouseArea
	anchors.fill: parent
	onClicked: {
	down = !down
	checked = down
	}
	}
	}

view raw Checkbox.qml hosted with ❤ by GitHub

	import QtQuick 2.15
	import QtQuick.Window 2.15
	Window {
	width: 640
	height: 480
	visible: true
	title: qsTr("https://dabreha.blogspot.com/")
	MyCheckBox{
	anchors.fill: parent
	}
	}

view raw main.qml hosted with ❤ by GitHub

	import QtQuick 2.0
	Rectangle { width: 70
	height: 150
	Row {
	anchors.centerIn: parent
	spacing: 150
	Column {
	spacing: 30
	/* Default */
	Repeater {
	model: ["gray", "red", "blue"]
	Checkbox {
	id: checkBox
	text: "default style" + (index + 1)
	indicator : Rectangle {
	implicitWidth: 20
	implicitHeight: 20
	radius: 3
	border.color: "gray"
	y: (checkBox.height - height)/2
	Rectangle {
	anchors.centerIn: parent
	width: 10; height: 10
	radius: 2
	color: modelData
	visible: checkBox.checked
	}
	}
	}
	}
	}
	Column {
	spacing: 30
	Repeater {
	model: ["gray", "red", "blue"]
	Checkbox {
	id: checkBox1
	text: "circular style" + (index + 1)
	indicator : Rectangle {
	implicitWidth: 20
	implicitHeight: implicitWidth
	radius: implicitWidth/2
	border.color: "#e4846c"
	y: (checkBox1.height - height)/2
	Rectangle {
	anchors.centerIn: parent
	width: 10; height: width
	radius: width/2
	color: modelData
	visible: checkBox1.checked
	}
	}
	}
	}
	}
	Column {
	spacing: 30
	Checkbox {
	id: checkBox2
	text: "Symbol Style 1"
	indicator : Rectangle {
	implicitWidth: 20
	implicitHeight: implicitWidth
	border.color: "lightblue"
	y: (checkBox2.height - height)/2
	Text {
	anchors.centerIn: parent
	font.pixelSize: 16
	text: "√"
	visible: checkBox2.checked
	}
	}
	}
	Checkbox {
	id: checkBox3
	text: "Symbol Style 2"
	indicator : Rectangle {
	implicitWidth: 20
	implicitHeight: implicitWidth
	border.color: "lightblue"
	y: (checkBox3.height - height)/2
	Text {
	anchors.centerIn: parent
	font.pixelSize: 16
	text: checkBox3.checked ? "√" : "×"
	}
	}
	}
	Checkbox {
	id: checkBox4
	text: "Symbol Style 3"
	indicator : Rectangle {
	implicitWidth: 20
	implicitHeight: implicitWidth
	border.color: "lightblue"
	y: (checkBox4.height - height)/2
	Text {
	anchors.centerIn: parent
	font.pixelSize: 16
	text: checkBox4.checked ? "" : "-"
	}
	}
	}
	}
	}
	}

view raw MyCheckBox.qml hosted with ❤ by GitHub