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

一、前言

  最近在进行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"}
}