step3:界面设计

summer__7777

已于 2024-06-27 15:12:21 修改

阅读量297

点赞数 6

分类专栏： Qt/Qml案例MF 文章标签：前端 javascript 开发语言 qt

于 2024-06-21 11:25:48 首次发布

本文链接：https://blog.csdn.net/summer__7777/article/details/139855739

版权

Qt/Qml案例MF 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1、文章说明
2、效果图
3、重要代码说明

1、文章说明

qt6.5.3 qml写的一个界面配置设计软件，目前不含任何c++代码，纯qml。windoms风格的界面设计。
界面的下拉框、文字转图片、切换开关使用了导入的FluentUI库，没有库可以直接用qml自带的组件实现。
导入教程在博主qml专栏。

2、效果图

在这里插入图片描述

3、重要代码说明

3.1 组件

切换开关

在这里插入图片描述

FluToggleSwitch{
	id: myToggle
 	width: 100
 	height: 40
	text: "开关"
	anchors.centerIn: parent
	onClicked: {
	console.log("Toggle clicked, checked state:", myToggle.checked)
		}
}

下拉框

在这里插入图片描述

                                    FluComboBox{ // 下拉框
                                        id:rowRepeaterComboBoxComboBox
                                        anchors.centerIn: parent  // ComboBox 居中于 Rectangle
                                        width: parent.width - 10  // 设置 ComboBox 宽度为 Rectangle 宽度减去一些空白
                                        editable: false
                                        model: ListModel {
                                            id: model
                                            ListElement { text: "RS485 2" }
                                            ListElement { text: "RS485 3" }
                                            ListElement { text: "RS485 4" }
                                            ListElement { text: "RS485 5" }
                                        }
                                        onActivated: {
                                            console.log("Selected text:", rowRepeaterComboBoxComboBox.model.get(index).text)
                                        }
                                    }