QML ListView悬浮标题栏

前言

随着Qt版本的不断升级，现在用QML做移动开发越来越方便，并且代码也非常简洁容易理解，Android原生开发中的材料设计界面很普遍，很多软件都是走这个风格设计，并且随着Android开发很多开源代码不断的共享，使得用原生开发Android程序变得越来越简单并且还越来越漂亮，而QML中其实也有，只是没那么成熟，并且风格也没有Android原生开发的那么漂亮。

正文

今天要做的是关于QML的ListView控件悬浮标题栏，有点模仿Android原生开发中的界面形式，先来看看效果图。

（由于上传的图片限制大小，所以没有录制太长时间）
来看看源码

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1Window {id:mainwindowvisible: truewidth: 400height: 600Rectangle{id:titlebarvisible: truewidth: parent.widthheight: 50z:3opacity: 0color:"red"Item{id:itemanchors.fill: parentopacity:1Label{anchors.centerIn: parenttext:"hello world!!"font.pixelSize: 27}}}NumberAnimation {id:ani1target: viewproperty: "contentY"duration: 200to:-view.headerItem.heightrunning: falseeasing.type: Easing.InOutQuad}NumberAnimation {id:ani2target: viewproperty: "contentY"duration: 200to:-titlebar.heightrunning: falseeasing.type: Easing.InOutQuad}ListView{id:viewanchors.fill: parentmodel:20onContentYChanged:{if(view.contentY < -titlebar.height){titlebar.opacity = 1-(-view.contentY - titlebar.height)/100.titlebar.y = -view.contentY - titlebar.height}else{item.opacity = 1titlebar.y = 0}}onMovementEnded: {if(view.contentY < -view.headerItem.height/2.){ani1.running = true}else if(view.contentY < -titlebar.height){ani2.running = true}}header:Rectangle{width: view.widthheight: 150color:"red"Label{id:labeltext:"this is header"font.pixelSize: 27color:"white"anchors.horizontalCenter: parent.horizontalCenteranchors.top: parent.topanchors.topMargin: 30}}delegate:Rectangle{id:delegatewidth: view.widthheight: 50border.width: 1Label{anchors.fill: parenttext: index}}footer: Rectangle{id:footwidth: parent.width}Component.onCompleted: {var t_h = view.model.count * 50 + titlebar.heightif(t_h < view.height){view.footerItem.height = view.height - t_h}}ScrollIndicator.vertical: ScrollIndicator { }}}

这里是用了ListView和Rectangle组合起来实现的，首先用Rectangle来实现一个悬浮标题栏并设置为不可见，而ListView添加了一个header用于做列表的大标题栏，当滑动列表的时候控制悬浮标题栏的透明度以及位置。这里还添加了一个footer，这个主要是用于在列表数量比较少的情况下通过footer来设置高度然后可以控制列表滑动，而footer的高度应该是在ListView的Model数量变化的时候动态改变，这里测试代为了简单，我写了固定的model数量，实际情况下应该检测model数量变化来改变footer的高度。比如说

model:ListModel{id:listModelonCountChanged: {var t_h = count * delegate.height + titleBar.heightif(t_h < listView.height){listView.footerItem.height = listView.height - t_h}}}

代码很简单，不再赘述。

QML ListView悬浮标题栏相关推荐

Android项目实战（二十）：浅谈ListView悬浮头部展现效果
Android项目实战(二十):浅谈ListView悬浮头部展现效果原文:Android项目实战(二十):浅谈ListView悬浮头部展现效果先看下效果:需求是滑动列表 ,其中一部分视图(粉丝数 ...
Android关于小米相册悬浮标题栏、冻结标题栏的实现方式（嵌套型RecycleView）
本文原创自selfreeyuan,转载请注明出处: http://blog.csdn.net/selfreeyuan/article/details/50674009 效果图如下: 网上完全查找不到关 ...
QML ListView几个常用且非常重要的属性
前言用 QML 开发界面的好处想必就不用多说了吧,可以总结为一个字:爽. 的确如此,用 QML 可以快速的开发出一些非常酷炫和复杂的界面,并且代码还非常简洁,可读性很强,容易理解. 今天要总结的是关 ...
android qml 菜单,QML - ListView项目，用于显示菜单
当用户点击项目时,我正在寻找关于在列表项目下显示菜单的一些提示和指示 . 如果我有这样的ListModel: ListModel { ListElement { name: "Bill Sm ...
QML ListView实现多选操作
需求: 单击默认为单选,按住Ctrl+点击为任意项多选,按住Shift+点击为连续项多选分析: 1.点击时区分按键状态来进行不同的操作: 2.根据不同的操作修改列表项的选中状态. 在Qt Widge ...
QML ListView 实现下拉刷新上拉加载
目录 1. 简述 2. 代码 2.1 PullListViewV2.qml 2.2 main.qml 1. 简述 QML 中ListView没有自带这个功能,但是提供了自定义页头和页脚组件,控制组件有 ...
android悬浮按钮阴影,浅谈FloatingActionButton(悬浮按钮)
一.介绍这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性 android.support.design.widget.FloatingActionButt ...
QML类型——Component
正文 Component是封装好的,定义明确接口的QML类型,可以重用. 组件通常是由组件文件(即.qml文件)定义.Component类型实质上允许在QML文件中内联定义QML组件,而不是将其定义为 ...
MVC站点默认页为html页,设置ASP.NET MVC站点默认页为html页
问题由来部署了一个Asp.Net MVC的站点,其功能只是作为移动端的服务器,服务器空间里面除了CMS以外就没有其他的页面了.这对于我们来说确实是有点浪费了. 可以放点静态的啥小东西放在上面玩一玩. ...

QML ListView悬浮标题栏

前言

正文

QML ListView悬浮标题栏相关推荐

最新文章

热门文章