SFOS2：组件介绍

news2024/12/23 22:34:54

一、前言

在sailfish os application的开发过程中，几乎是困难重重，因为我暂未找到具有完整性、指导性、易懂性的开发文档，特别是组件的使用，现决定将自己的探究结果记录下来。因此，这篇文章只会具有参考价值，完全算不得指导文档。

二、内容

1.容器

Page

属性	描述
暂无	暂无

注意： page类似于安卓开发中的activity，或者swing中的JFrame，代表着一个屏幕，例如首页，设置。

2.布局

3.组件

Slider (滑块)

属性	描述
label	组件标题
minimumValue	最小值
maximumValue	最大值
stepSize	增量单位
valueText	显示值

样例：

        Slider {
            id: slider
            label: "标题"
            width: parent.width
            minimumValue: 0; maximumValue: 100; stepSize: 1
            valueText: value +"次"
        }

效果图：
在这里插入图片描述

Button(按钮)

属性	描述
text	按钮名
onClicked	点击事件

样例：

        Button {
            text: "Save"
            onClicked: {
                //处理点击事件
            }
        }

效果图：
在这里插入图片描述

Label(标签)

属性	描述
text	标签里面的内容

样例：

Label { 
	text: "这是文本标签" 
}

效果图：
在这里插入图片描述

Repeater(中继器)

说明： 他本身并不是一个可视化组件，而是一个方法，类似于for循环

样例：

        Repeater {
            model: ListModel { id: listModel }

            Label { text: model.sliderValue }
        }
        
//这里是，根据model，创建Lable，并且不能主动触发，需要通过
//listModel.append({"sliderValue": "Value: " + slider.value})
//来触发

ListModel（集合模型）

说明： 同样的，ListModel也不是一个可视化组件，而是一个数据模型，类似于java中的集合对象。

样例：

ListModel {
    id: myModel

    ListElement {
        name: "Item 1"
        description: "Description for Item 1"
    }
    ListElement {
        name: "Item 2"
        description: "Description for Item 2"
    }
    
    // 动态添加元素
    Component.onCompleted: {
        myModel.append({"name": "Item 3", "description": "Description for Item 3"});
    }
}

//这个数据模型中的对象是item1与item2,并且，在集合加载结束时，添加item3这个对象