发帖

[讨论]

树莓派开发中导航模型SwipeView案例实战

硬件工程师1

2020-8-12 14:22:27 1858 树莓派

1 不知道大家注意过没有，现在很多网站上对于界面的跳转，都更倾向于滑动跳转。这种方式更加柔和，使得人的观感会好一些。一个导航模型SwipeView，它提供一个基于滑动的导航模型，使得用户可以通过侧向滑动来浏览界面。 1
2020-8-12 14:22:27　　评论淘帖0 举报相关推荐 • 请问如何实现滑动导航模型SwipeView？ 1561 • 树莓派(Raspberry Pi)实战指南.pdf 130 • 树莓派开发—继电器 0 • Xbox树莓派开发PCB 7 • 什么是树莓派？树莓派是什么架构的 5862 • 树莓派5终极开发方案：VSCode Server避坑实战指南 519 • 树莓派裸机开发步骤 8888 • 树莓派项目实战：车牌识别系统开发全记录！ 303 • 树莓派&amp;AXCL：树莓派离线大模型新范式！ 512 • 从树莓派带你掌握嵌入式linux产品实战开发-- 树莓派系统镜像制作（七） 13 3 个讨论

1 SwipeView的属性属性 horizontal : 保存滑动视图是否为水平 interactive : 描述用户是否可以与SwipeView进行交互，设置为true则用户无法滑动 orientation : 保留方向 vertical : 保存滑动视图是否垂直附加属性 index : 保存SwipeView中每个子项的索引 isCurrentItem : 若子项为当前项，则此属性为true isNextItem : 若子项是下一个项目，则此属性为true isPreviousItem : 若子项是上一个项目，则此属性为true view : 包含管理此子项的视图

2020-8-12 14:22:59 评论举报 1^# 欲望都市

1 SwipeView的例程SwipeView的用法也十分简单，需要为其填充一组页面Page或者是其他的控件，每次可见这组页面中的一页，我们可以通过鼠标左右滑动来在页面之间导航。 import QtQuick 2.7 import QtQuick.Window 2.2 import QtQuick.Controls 2.3 Window { visible: true width: 640 height: 480 title: qsTr("SwipeView") SwipeView { id: view currentIndex: 0 anchors.fill: parent orientation: Qt.Horizontal interactive: true Rectangle { id: firstPage color: "purple" Text { text: qsTr("First") anchors.centerIn: parent font.pixelSize: 25 } } Rectangle { id: secondPage color: "blue" Text { text: qsTr("Second") anchors.centerIn: parent font.pixelSize: 25 } } Rectangle { id: thirdPage color: "green" Text { text: qsTr("Third") anchors.centerIn: parent font.pixelSize: 25 } } } } 复制代码为SwipeView填充一组矩形充当界面，将当前页currentIndex设置为0，也就是第一页。设置其方向orientation为水平方向，意味着是左右滑动，当设置为Qt.Vertical时，就是上下滑动。最后设置interactive为交互式，其实这个不需要设置，默认为true，当设置为false时，我们就不能通过滑动切换页面了。

2020-8-12 14:23:33 评论举报 2^# 王秀兰

0 建议大家在填充SwipeView的时候选择的是Page组件，Page是一个容器控件，可以方便地将页眉和页脚项添加到页面。它的三个重要属性footer、header、title分别对应着页脚、页眉和标题栏。因为我们的SwipeView本身是不可见的，需要为其设置指示才可以知道当前是第几页。通过page的属性我们可以设置指示栏。将一个Rectangle修改为Page,设置其页眉和页脚，代码如下 Page{ header: Rectangle{ height: 80 color: "orange" Text{ anchors.centerIn: parent text: "First" font.pixelSize: 25 } } footer: Rectangle{ height: 30 color: "orange" } } 复制代码一般，我们会将将ToolBar，TabBar或DialogButtonBox分配为页面页脚，但是因为这些控件我们还没学到，所以，这里就用到了最简单的Rectangle。为header页眉设置一个矩形，矩形内设置文字指示当前页面。

2020-8-12 14:27:34 评论举报 3^# 王燕

撰写讨论

你正在撰写讨论

如果你是对讨论或其他讨论精选点评或询问，请使用“评论”功能。

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉

发讨论

精选推荐

RK这2款旗舰芯片RK3588 PK RK3576，谁是最优选

875 浏览 0 评论
飞凌嵌入式ElfBoard ELF 1板卡-文件系统之应用开机自启

1171 浏览 0 评论
进行滤波器的谐波测试，它的作用是什么呢

3205 浏览 0 评论
迅为RK3568开发板Dev-Eco studio 的界面布局-导航栏-事件通知区

1343 浏览 0 评论
迅为RK3568开发板Dev-Eco studio 的界面布局-导航栏-工程目录区

1159 浏览 0 评论

快速回复 返回顶部 返回列表

关注微信公众号

电子发烧友网

电子发烧友论坛

社区合作: 刘勇; 联系电话：15994832713; 邮箱地址：liuyong@huaqiu.com

社区管理: elecfans短短; 微信：elecfans_666; 邮箱：users@huaqiu.com

返回 ARM威廉希尔官方网站论坛

回复

关闭

站长推荐 /8

快速回复 返回顶部 返回列表

- 厂商专区: 飞凌嵌入式

瑞萨单片机论坛

米尔电子

Aigtek安泰电子

斯丹麦德电子

芯佰微电子

其利天下威廉希尔官方网站小组

道生物联威廉希尔官方网站社区

视美泰

FCom富士晶振

大大通

合众恒跃

RT-Thread论坛

- 威廉希尔官方网站社区: 张飞电子威廉希尔官方网站社区

KaihongOS威廉希尔官方网站社区

FPGA开发者威廉希尔官方网站社区

RISC-V MCU威廉希尔官方网站社区

HarmonyOS威廉希尔官方网站社区

- OpenHarmony开源社区: OpenHarmony开源社区

- 嵌入式论坛: ARM威廉希尔官方网站论坛

STM32/STM8威廉希尔官方网站论坛

嵌入式威廉希尔官方网站论坛

单片机/MCU论坛

RISC-V威廉希尔官方网站论坛

瑞芯微Rockchip开发者社区

FPGA|CPLD|ASIC论坛

DSP论坛

- 电路图及DIY: 电路设计论坛

DIY及创意

电子元器件论坛

专家问答

- 电源威廉希尔官方网站论坛: 电源威廉希尔官方网站论坛

无线充电威廉希尔官方网站

- 综合威廉希尔官方网站与应用: 机器人论坛

USB论坛

电机控制

模拟威廉希尔官方网站

音视频威廉希尔官方网站

综合威廉希尔官方网站交流

上位机软件（C/Python/Java等）

- 无线通信论坛: WIFI威廉希尔官方网站

蓝牙威廉希尔官方网站

天线|RF射频|微波|雷达威廉希尔官方网站

- EDA设计论坛: PCB设计论坛

DigiPCBA论坛

Protel|AD|DXP论坛

PADS威廉希尔官方网站论坛

Allegro论坛

multisim论坛

proteus论坛|仿真论坛

KiCad EDA 中文论坛

DFM|可制造性设计论坛

- 测试测量论坛: LabVIEW论坛

Matlab论坛

测试测量威廉希尔官方网站

传感威廉希尔官方网站

- 招聘/交友/外包/交易/杂谈: 项目外包

供需及二手交易

工程师杂谈|交友

招聘|求职|工程师职场

- 官方社区: 发烧友官方/活动

华秋商城

华秋电路

time

recommend

hot

post

—
—
—

版
块
导
航