当前位置：首页 > news >正文

SFOS2：常用容器（布局）介绍

news 来源：原创 2025/8/21 15:16:43

一、前言

最近在进行sailfish os的开发，由于在此之前并没有从事过QT开发的工作，所以对这一套颇为生疏，以此记录一下。以下内容不一定完全准确，开发所使用的是Qt Quick 2.6与Sailfish.Silica 1.0两个库。

二、布局

1.Qt Quick 2.6

1.1 Item

描述：Item 是所有可视化 QML 对象的基类，它本身没有视觉外观，但可作为容器来包含其他项。
示例：

import QtQuick 2.6Item {width: 200height: 200Rectangle {width: 50height: 50color: "red"anchors.centerIn: parent}
}

备注： 可简单理解为安卓安卓开发的View。

1.2 Window（ApplicationWindow）

描述：代表一个顶级窗口，通常作为应用程序的主窗口。
示例：

import QtQuick 2.6
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: "Window Example"Rectangle {width: 100height: 100color: "blue"anchors.centerIn: parent}
}

备注： sailfish os的开发中，window的应用就是入口qml，指定了这个程序的窗口，这意味着在程序中几乎只有一个window，也就是ApplicationWindow。而对于window这个组件，在windows系统的桌面端开发中，表现是一个窗口，就类似于Java Swing的JFrame。

1.3 Rectangle

描述：用于创建矩形区域，可设置颜色、边框等属性，也可作为容器。
示例：

import QtQuick 2.6Rectangle {width: 200height: 200color: "green"Text {text: "Inside Rectangle"anchors.centerIn: parent}
}

1.4 Row

描述：将子项水平排列，全部在一行。
示例：

import QtQuick 2.6Row {spacing: 10Rectangle {width: 50height: 50color: "red"}Rectangle {width: 50height: 50color: "green"}
}

1.5 Column

描述：将子项垂直排列，全部在一列。
示例：

import QtQuick 2.6Column {spacing: 10Rectangle {width: 50height: 50color: "red"}Rectangle {width: 50height: 50color: "green"}
}

1.6 Grid

描述：将子项排列成网格状，多行多列。
示例：

import QtQuick 2.6Grid {columns: 2spacing: 10Rectangle {width: 50height: 50color: "red"}Rectangle {width: 50height: 50color: "green"}Rectangle {width: 50height: 50color: "blue"}
}

1.7 Flow

描述：按顺序排列子项，当空间不足时自动换行，坦白说就是流式布局。
示例：

import QtQuick 2.6Flow {width: 150spacing: 10Rectangle {width: 50height: 50color: "red"}Rectangle {width: 50height: 50color: "green"}Rectangle {width: 50height: 50color: "blue"}
}

1.8 StackLayout

描述：将子项堆叠，同一时间只显示一个子项，类似于安卓的卡片布局。
示例：

import QtQuick 2.6StackLayout {id: stackwidth: 200height: 200currentIndex: 0Rectangle {color: "red"}Rectangle {color: "green"}Button {text: "Switch"onClicked: stack.currentIndex = (stack.currentIndex + 1) % 2}
}

1.9 AnchorLayout

描述：基于锚点来布局子项，就是安卓的约束布局（ConstraintLayout）。
示例：

import QtQuick 2.6AnchorLayout {width: 200height: 200Rectangle {id: rect1color: "red"width: 50height: 50anchors.left: parent.leftanchors.top: parent.top}Rectangle {id: rect2color: "green"width: 50height: 50anchors.left: rect1.rightanchors.top: rect1.topanchors.margins: 10}
}

1.10 Flickable

描述：提供可滚动的区域，当内容超出区域大小时可通过手势滚动。
示例：

import QtQuick 2.6Flickable {width: 200height: 200contentWidth: 400contentHeight: 400Rectangle {width: 400height: 400color: "yellow"}
}

1.11 PathView

描述：PathView 能够沿着自定义路径布局和滚动项目，可创建复杂的布局效果，像环形布局等。
示例：

import QtQuick 2.6PathView {width: 200height: 200model: 5path: Path {startX: 0; startY: 100PathLine { x: 200; y: 100 }}delegate: Rectangle {width: 20height: 20color: "red"}
}

备注： 简单来讲，就是你有一个路径（path），然后所有的组件都会沿着你的这个路径进行排列。这是很自由的，你甚至可以用一些很小的方块，排列出一个笑脸，只要你能弄出路径。

1.12 delegate

描述： delegate是一个模板组件，并不是容器与布局，主要用于克隆其他组件的外形
示例：

PathView {width: 200height: 200model: 5path: Path {startX: 0; startY: 100PathLine { x: 200; y: 100 }}delegate: Rectangle {width: 20height: 20color: "red"}
}

备注： 这里的主要逻辑是，根据 model 数据项，来重复生成Rectangle。delegate用来指定重复生成的组件的外形，而重复逻辑本身是由父级决定的，例如ListView、GridView、PathView、Repeater。

1.13 Repeater

描述：Repeater 可根据数据模型重复创建项目，通常结合其他布局容器使用，用来批量生成元素。
示例：

import QtQuick 2.6Column {Repeater {model: 3delegate: Rectangle {width: 50height: 50color: "green"y: index * 60}}
}

备注： 我认为它算不得布局与容器，他就是一个动态数据生成器，用于快捷生成数据。大概发展史：Qt早期都是静态布局，例如Column，而来为了简化这种重复创建工作，于是 Repeater重复器 诞生了。但是后来大家发现，对于大量的子组件例如几千个，是十分影响性能的，于是ListView、GridView、PathView这些集成了delegate与model的布局诞生了，他们不再依赖Repeater，并且拥有自己独特的动态创建逻辑。例如ListView，只会创建看得见的区域，看不见的不创建1000个组件只有10个可见，只创建这10个。于是造成了现在这种情况，有些布局需要使用Repeater，而有些则不需要，可以直接使用delegate。当然，其实他们的先后与因果关系并没有这么严格，之所以这么说是为了方便理解，因为我觉得不这么解释实在是不太合理。

2.Sailfish.Silica 1.0

2.1 PageStack

描述：管理页面栈，支持页面（Page）的推入和弹出操作。
示例：

import QtQuick 2.6
import Sailfish.Silica 1.0
import Sailfish.Silica.PageStack 1.0ApplicationWindow {visible: truewidth: 640height: 480title: "PageStack Example"PageStack {initialPage: Component {Page {title: "Home Page"Button {text: "Go to Next Page"onClicked: {pageStack.push(Component {Page {title: "Next Page"}})}}}}}
}

备注： 类似于安卓的FragmentManage，即使用来管理Fragment的。Page类似于安卓的Fragment，Window类似于Activity（但sailfish要求只能有一个window，那就是ApplicationWindow）。

2.2 Page

描述：用于创建应用中的页面，通常与 PageStack 一起使用。
示例：

import QtQuick 2.6
import Sailfish.Silica 1.0
import Sailfish.Silica.PageStack 1.0ApplicationWindow {visible: truewidth: 640height: 480title: "Page Example"PageStack {initialPage: Component {Page {title: "My Page"Label {text: "This is a page"anchors.centerIn: parent}}}}
}

备注： 类似与安卓中的Fragment。

2.3 ListView

描述：显示列表数据，支持自定义列表项。
示例：

import QtQuick 2.6
import Sailfish.Silica 1.0ListView {width: 200height: 300model: ["Item 1", "Item 2", "Item 3"]delegate: Text {text: modelDatafont.pixelSize: 20color: "black"}
}

备注： 集成了delegate与model的，高性能列表。

2.4 CoverPage

描述：用于创建应用的封面页面。
示例：

import QtQuick 2.6
import Sailfish.Silica 1.0
import Sailfish.Silica.PageStack 1.0ApplicationWindow {visible: truewidth: 640height: 480title: "CoverPage Example"PageStack {cover: Component {CoverPage {title: "App Cover"Label {text: "This is the cover"anchors.centerIn: parent}}}initialPage: Component {Page {title: "Main Page"}}}
}

2.5 TabView

描述：提供选项卡式界面，用于切换不同页面。
示例：

import QtQuick 2.6
import Sailfish.Silica 1.0TabView {width: 640height: 480Tab {title: "Tab 1"Label {text: "Content of Tab 1"anchors.centerIn: parent}}Tab {title: "Tab 2"Label {text: "Content of Tab 2"anchors.centerIn: parent}}
}

2.6 ScrollView

描述：提供滚动功能，用于显示超出其大小的内容。
示例：

import QtQuick 2.6
import Sailfish.Silica 1.0ScrollView {width: 200height: 200contentWidth: 400contentHeight: 400Rectangle {width: 400height: 400color: "lightgray"}
}

2.7 StackedPage

描述：与 Page 类似，不过能堆叠显示，在 PageStack 里用于实现多层页面的效果。
示例：

import QtQuick 2.6
import Sailfish.Silica 1.0
import Sailfish.Silica.PageStack 1.0ApplicationWindow {visible: truewidth: 640height: 480title: "StackedPage Example"PageStack {initialPage: Component {StackedPage {title: "Stacked Page 1"Button {text: "Go to Stacked Page 2"onClicked: {pageStack.push(Component {StackedPage {title: "Stacked Page 2"}})}}}}}
}

2.8 Deck

描述：用于创建卡片式布局，卡片可堆叠或滑动切换，适合实现一些具有交互性的卡片展示界面。
示例：

import QtQuick 2.6
import Sailfish.Silica 1.0Deck {width: 200height: 300Rectangle {width: 200height: 300color: "blue"}Rectangle {width: 200height: 300color: "yellow"}
}

SFOS2：常用容器（布局）介绍

一、前言最近在进行sailfish os的开发，由于在此之前并没有从事过QT开发的工作，所以对这一套颇为生疏，以此记录一下。以下内容不一定完全准确，开发所使用的是Qt Quick 2.6与Sailfish.Silica 1.0两个库。二、布局 1.Qt Quick 2.…...

编程日记 2025/8/21 15:16:43

VS qt 联合开发环境下的多国语言翻译

添加Linguist 文件方法，如同添加类文件的方式，那样： 其他跟QT的一样的流程，另外在main函数里要注册一下， QTextCodec::setCodecForLocale(textCodec); QTranslator translator5; QString trans5 fi…...

编程日记 2025/8/17 18:27:35

基于 Python 的 ROS2 应用开发全解析

引言在机器人操作系统（ROS）不断发展的进程中，ROS2 作为新一代的机器人框架，带来了诸多显著的改进与新特性。Python 作为一种简洁、高效且具有强大数据处理能力的编程语言，在 ROS2 应用开发中占据着重要地位。本文将深…...

编程日记 2025/8/19 14:28:40

AI分析师

01 实操人工公司需要开发了一个XX系统，在文件夹中包含了XX.csv，其中每一行表示一个XX样本，最后一列为每个样本的标签，现需要设计模型与系统，请按照以下要求完成算法测试。根据要求完成以下任务，将完成的…...

编程日记 2025/8/22 11:25:07

Redis核心数据类型在实际项目中的典型应用场景解析

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取 Redis作为高性能的键值存储系统，在现代软件开发中扮演着重要角色。其多样化的数据结构为开发者提供了灵活的解决方案，本文将通过真实项…...

编程日记 2025/8/22 13:33:00

LLamaIndex中经常使用的三个模块

from aiostream import stream from fastapi import Request from fastapi.responses import StreamingResponse from llama_index.core.chat_engine.types import StreamingAgentChatResponse这四个模块每一个都很实用，在实际开发中经常用到，下面我就详…...

编程日记 2025/8/22 13:32:05

Idea集成AI：CodeGeeX开发

当入职新公司，或者调到新项目组进行开发时，需要快速熟悉项目代码而新的项目代码，可能有很多模块，很多的接口，很复杂的业务逻辑，更加有与之前自己的代码风格不一致的现有复杂代码更别提很多人写代码不喜…...

编程日记 2025/8/22 2:22:13

软考中级软件设计师考点知识点笔记总结 day12 计算机网络基础知识

文章目录计算机网络基础5.1、计算机网络基础知识5.1.1 计算机网络分类5.1.2 七层网络体系结构5.1.3 网络标准5.1.4 TCP/IP协议族5.1.5 IP地址和IPv6简介5.1.6 Internet服务计算机网络基础要求掌握以下内容 5.1、计算机网络基础知识网络体系结构传输介质传输技术传输…...

编程日记 2025/8/20 20:13:06

【扩散模型（十三）】Break-A-Scene 可控生成，原理与代码详解（中）Cross Attn Loss 代码篇

系列文章目录【扩散模型（一）】中介绍了 Stable Diffusion 可以被理解为重建分支（reconstruction branch）和条件分支（condition branch）【扩散模型（二）】IP-Adapter 从条件分支的视…...

编程日记 2025/8/22 13:32:06

C语言数字图像处理---2.31统计滤波器

本文介绍空域滤波器中的一种：统计滤波器 [定义与算法] 统计滤波（Statistic Filter）定义：基于图像处理中的邻域统计方法，对邻域内的像素信息进行统计，如基于均值和方差的信息，用于平滑或去噪图像，同时保留边缘信息。算法步骤如下：统计滤波器的优点和缺点主要包…...

编程日记 2025/8/22 8:12:38

流程设计实战：流程架构设计六步法

目录简介 1、梳理业务模式及场景 2、甄别核心业务能力 3、搭建差异化的业务流程框架 4、定义L4流程能力 5、L4流程串联 6、展开L5业务流程作者简介简介以往在设计流程的时候，我多数都是采用的自下而上的方式，从具体场景、具体问题出发去做流…...

编程日记 2025/8/22 13:32:59

SDK游戏盾如何接入？复杂吗？

接入SDK游戏盾（通常指游戏安全防护类SDK，如防DDoS攻击、防作弊、防外挂等功能）的流程和复杂度取决于具体的服务商（如腾讯云、上海云盾等）以及游戏类型和技术架构。以下是一般性的接入步骤、复杂度评估及注意事项&#…...

编程日记 2025/8/22 7:30:20

STM32F103C8T6 单片机入门基础知识及点亮第一个 LED 灯

目录一、引言二、STM32F103C8T6 基本特性 1. 内核与性能 2. 存储器 3. 时钟系统 4. GPIO（通用输入输出） 5. 外设三、开发环境搭建 1. 硬件准备 2. 软件安装四、点亮第一个 LED 灯 1. 硬件连接 2. 软件实现 （1）创…...

编程日记 2025/8/19 6:04:37

JavaScript Worker池实现教程

JavaScript Worker池实现教程 Worker池是一种管理和复用Web Workers的有效方法，可以在不频繁创建和销毁Worker的情况下，充分利用多线程能力提升应用性能。下面我将详细介绍如何在JavaScript中实现一个功能完善的Worker池。为什么需要Worker池&#xf…...

编程日记 2025/8/16 20:22:18

【统信UOS操作系统】python3.11安装numpy库及导入问题解决

一、安装Python3.11.4 首先来安装Python3.11.4。所用操作系统：统信UOS 前提是准备好Python3.11.4的安装包（可从官网下载（链接）），并解压到本地： 右键，选择“在终端中打开”&#xff…...

编程日记 2025/8/18 20:33:31

Navicat导入JSON数据到MySQL表

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 Navicat导入JSON数据到MySQL表1. 导入入口2.…...

编程日记 2025/8/22 13:33:33

体育比分小程序怎么提示日活

要提高体育比分小程序的日活跃用户(DAU)，您可以考虑以下几个方面的策略： 一、核心功能优化 1.实时推送：确保比分更新真正实时，延迟不超过2秒，推荐接入熊猫比分API体育数据，比分实时更新 2.个性化订阅&am…...

编程日记 2025/8/17 18:24:15

【星海随笔】Python-JSON数据的处理

JSON 是一种轻量级的数据交换格式，主要用于在客户端和服务器之间传输数据。 JSON 在 python 里是一个标准库 https://www.jyshare.com/compile/9/ import json data {name: Alice, age: 30, city: New York} json_string json.dumps(data) print(json_string)js…...

编程日记 2025/8/22 13:33:00

Tomcat与Servlet

目录 1 Tomcat 1.1 目录结构 1.2 启动服务器 1.3 部署 2 Servlet 2.1 创建项目 （1）创建Maven项目 （2）目录结构 （3）引入依赖 （4）创建必要的目录结构 （5&#xf…...

编程日记 2025/8/22 13:31:21

MySQL MVCC工作流程详解

MySQL MVCC工作流程详解 1. 基础概念 MVCC（多版本并发控制）是通过在每行记录后面保存多个版本来实现并发控制的技术，主要用于提供并发事务访问数据库时的读一致性。 2. 核心要素 2.1 事务ID（DB_TRX_ID） 每个事务都…...

编程日记 2025/8/22 13:33:01

unityTEngine 框架学习记录1

目前项目再用QF框架其中的UI部分，突然有天想学习一下其他好用的框架UI，根据我多年网友胖菊大佬的推荐TE映入眼帘,网上找了一下发现学习教程没有几个，不太适合啥都不会的小白，然后我就加入了ET官方群，里面人长得又帅又有…...

编程日记 2025/8/17 20:27:33

算法的时间复杂度

整理了下算法的时间复杂度，跟大家一起分享下。时间复杂度O是表示算法运行时间与输入数据规模（通常用 n 表示）之间的关系。算法执行时间随输入数据规模增长的变化趋势。 1、O(1) — 常数时间无论输入数据多大，执行时间固定不变…...

编程日记 2025/8/21 15:46:10

深度学习从入门到精通 day_01

Pytorch安装 torch安装 python版本3.9.0 在官方文档里面找到适合你设备的PyTorch版本及对应的安装指令执行即可：https://pytorch.org/get-started/previous-versions/ 针对我的网络及设备情况，我复制了如下指令完成了Torch的安装： …...

编程日记 2025/8/21 18:48:44

AutoToM：让AI像人类一样“读心”的突破性方法

引言：AI如何理解人类的“内心世界”？ 如何让AI像人类一样理解他人的意图、情感和动机？这一问题的核心是心智理论（Theory of Mind, ToM），即通过观察行为推断心理状态的能力。近日，约翰霍普金斯大…...

编程日记 2025/8/22 13:31:20

Java实现Redis

String类型代码 package com.whop.changyuan2.redisTest;import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.data.redis.cor…...