[fusion_old_table] Properties, Description
BusyIndicator, A busy indicator
Button, Text push button.
Calendar, Calendar 날짜를 선택하는 방법 제공.
CheckBox, Text 체크박스.
ComboBox, Drop-down 목록의 기능 제공.
GroupBox, 그룹 상자 프레임 제공.
Label, Text 라벨.
ProgressBar, 진행 표시.
RadioButton, Text 라디오버튼.
Slider, Slider 컨트롤 제공.
SpinBox, Spin 상자 컨트롤 제공.
Switch, Switch
TextArea, Edit 가능한 텍스트를 여러 줄로 표시.
TextField, Edit 가능한 일반 텍스트 한 줄을 표시.
ToolButton, Toolbar 내에서 사용되는 버튼 타입 제공.
ExclusiveGroup, 체크 가능한 컨트롤을 선언 할 수 있는 방법 제공.[/table]

▷ Button
예, 아니오, 닫기, 취소, 적용, 도움말 단추, OK

▷ CheckBox
텍스트 레이블이 있는 체크 박스를 제공
확인, 해제 체크를 할 수 있음

[code language=”cpp”] RowLayout {
id: checkBoxLayout
// ********************************************** CheckBox
GroupBox {
id: checkBox
title: "식사"
Column {
spacing: 10 // 간격
CheckBox {
text: qsTr("Breakfast")
style: CheckBoxStyle {
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
radius: 10
border.color: control.activeFocus ? "darkblue" : "red"
border.width: 2
Rectangle {
visible: control.checked
color: "#555"
border.color: "#333"
radius: 10
anchors.margins: 4
anchors.fill: parent
}
}
}
}

CheckBox {
text: qsTr("Lunch")
style: CheckBoxStyle {
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
radius: 2
border.color: control.activeFocus ? "darkblue" : "gray"
border.width: 1
Rectangle {
visible: control.checked
color: "#555"
border.color: "#333"
radius: 2
anchors.margins: 4
anchors.fill: parent
}

}
}
}

CheckBox {
text: qsTr("Dinner")
style: CheckBoxStyle {
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
radius: 40
border.color: control.activeFocus ? "darkblue" : "blue"
border.width: 1
Rectangle {
visible: control.checked
color: "#555"
border.color: "#333"
radius: 40
anchors.margins: 4
anchors.fill: parent
}
}
}
}
}
}
}

[/code]

[실행화면]
4

▷ ComboBox
Model을 이용하여 콤보박스 상자에 항목을 추가 함
ListModel을 사용 할 수 있음[code language=”cpp”] GroupBox {
id: comboBox1
title: "과일을 선택 하시오. "
Layout.fillWidth: true
RowLayout {

anchors.fill: parent
ComboBox {
id: combo1
width: 200
model: [{ text: "Banana", color: "Yellow"}, { text: "Apple", color: "Yellow"}, "Coconut"] }

ComboBox {
id: combo2
currentIndex: 2
x: combo1.x+combo1.width+30
model: ListModel {
id: cbitems
ListElement { text: "Banana"; color: "Yellow"; cost: 2.45}
ListElement { text: "Apple"; color: "Green"; cost: 3.45}
ListElement { text: "Coconut"; color: "Brown"; cost: 1.45}
}
width: 200
onCurrentIndexChanged: console.debug(cbitems.get(currentIndex).text + ", " + cbitems.get(currentIndex).color)
}

ComboBox {
id: combo3
editable: true
model: ListModel {
id: model
ListElement { text: "Banana"; color: "Yellow"}
ListElement { text: "Apple"; color: "Green"}
ListElement { text: "Coconut"; color: "Brown"}
}
onAccepted: {
if(editableCombo.find(currentText) == -1) {
model.append({text: editText})
currentIndex = editableCombo.find(editText)
}
}
}
}
}

[/code]

[실행화면]
5

▷ GroupBox
프레임 상단에 제목 제공. 자체 내부에 컨트롤을 표시[code language=”cpp”] GroupBox {
title: qsTr("Package")
Column {
spacing: 2
CheckBox {
text: qsTr("Wine Package")
onClicked: {}
}
CheckBox {
text: qsTr("Coffee Package")
onClicked: {}
}
CheckBox {
text: qsTr("IceCream Package")
onClicked: {}
}
}
}[/code]

[실행화면]
6

▷ Label
라벨 시스템의 폰트 및 컬러 방식을 따름
라벨에 텍스트를 설정할 수 있으며, 속성은 TEXT 속성 사용

[code language=”cpp”] Label {
text: "Hello world"
font.pixelSize: 22
font.italic: true
color: "steelblue"
}[/code]

[실행화면]
7

▷ ProgressBar
작업의 진행을 표시하기 위해 사용

[code language=”cpp”] ProgressBar {
value: 100
style: ProgressBarStyle {
background: Rectangle {
radius: 2
color: "lightgray"
border.color: "gray"
border.width: 200
implicitWidth: 200
implicitHeight: 24
}

progress: Rectangle {
border.color: "steelblue"
color: "lightsteelblue"

Item {
anchors.fill: parent
anchors.margins: 1
visible: control.indeterminate
clip: true
Row {
Repeater {
Rectangle {
color: index % 2 ? "steelblue" : "lightsteelblue"
width: 20; height: control.height
}
model: control.width /20 + 2
}
XAnimator on x {
from: 0; to: -40
loops: Animation.Infinite
running: control.indeterminate
}
}
}
}
}
}

[/code]

[실행화면]
8

▷ RadioButton
확인 또는 해제 전활 할 수 있는 옵션 버튼
그룹에서 하나의 라디오 버튼만 선택할 수 있음

[code language=”cpp”] GroupBox {
title: qsTr("Radio Button!!")
Column {
ExclusiveGroup {id: group} // ExclusiveGroup 속성을 할당.
RadioButton {
text: qsTr("Radio Button – 1")
exclusiveGroup: group
checked: true
}
RadioButton {
text: qsTr("Radio Button – 2")
exclusiveGroup: group
}
RadioButton {
text: "Radio Button – 3"
exclusiveGroup: group
style: RadioButtonStyle {
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
radius: 9
border.color: control.activeFocus ? "darkblue" : "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#888"
radius: 9
anchors.margins: 4
}
}
}
}
}
}[/code]

[실행화면]
9

▷ TextArea[code language=”cpp”] TextArea {
id: textArea1
text: "추가주문사항입니다."
Layout.minimumHeight: 30
Layout.fillWidth: true
Layout.fillHeight: true
}[/code]

[실행화면]
10

▷ ToolButton[code language=”cpp”] ToolButton {
iconSource: "ugc.jpg"
}[/code]

[실행화면]
11

▷ Slider[code language=”cpp”] GroupBox {
id: sliderBox
title: "Slider"
Layout.fillWidth: true
Slider {
onValueChanged: print(value)
anchors.centerIn: parent
style: SliderStyle {
groove: Rectangle {
implicitWidth: 200
implicitHeight: 8
color: "gray"
radius: 8
}
handle: Rectangle {
anchors.centerIn: parent
color: control.pressed ? "white" : "lightgray"
border.color: "gray"
border.width: 2
implicitWidth: 34
implicitHeight: 34
radius: 12
}
}
}
}[/code]

[실행화면]
12

Navigation and Views     |   Menus 》