ListView（headerView，footerView）

已于 2022-02-21 16:53:53 修改
阅读量1.8k 收藏
点赞数
分类专栏： C++ 文章标签： android ui java
于 2022-02-21 10:07:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43517257/article/details/123041353
版权


ListView 用来显示一个条目列表，条目对应的数据来自于 Model，而每个条目的外观则
由Delegate 决定。我们可以将Delegate 看成如何展示 Item 的一个模板。Android手机上常见
的联系人界面，其实就是使用 ListView 实现的，而且 Android 的 ListView 和 Qt Quick 的
ListView 使用同样的模式：Model、View、Item Template（Delegate）。
要使用 ListView，必须为其指定一个Model、一个Delegate。
Model可以是QML内建类型，如ListModel、XmlListModel，
也可以是在C++中实现的
QAbstractItemModel或QAbstractListModel的派生类。
我们先以Qt Quick 内建Model为例，把使用ListView的方方面面都介绍一下，然后再
看如何使用在C++中实现自定义的Model。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.1

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("phone tabel")

    Rectangle {
        anchors.fill: parent
        color: "#eeeeee"
        Component {
            id:phoneDelegate
            Item {
                id: wrapper
                width: parent.width
                height: 30

                MouseArea {
                    anchors.fill:parent
                    onClicked: {

                        wrapper.ListView.view.currentIndex = index
                    }
                }

                RowLayout {
                    anchors.left: parent.left

                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8

                    Text {
                        id: _coll
                        text: name
                         color: wrapper.ListView.isCurrentItem?"red":"black"
                        font.pointSize: wrapper.ListView.isCurrentItem?22:18
                        Layout.preferredWidth: 200
                    }
                    Text {
                        id: _cost
                        text: cost
                         color: wrapper.ListView.isCurrentItem?"red":"black"
                        font.pointSize: wrapper.ListView.isCurrentItem?22:18
                        Layout.preferredWidth: 150
                    }
                    Text {
                        id: _manu
                        text: manu
                        color: wrapper.ListView.isCurrentItem?"red":"black"
                        font.pointSize: wrapper.ListView.isCurrentItem?22:18
                        Layout.fillWidth: true
                    }
                }
            }
        }
        ListView{
            id:_listView
            anchors.fill: parent
            delegate: phoneDelegate
            model: ListModel{
                ListElement{
                    name:"iphone 12"
                    cost:"4545"
                    manu:"apple"
                }
                ListElement{
                    name:"iphone 18"
                    cost:"4545545"
                    manu:"apple"
                }
                ListElement{
                    name:"iphone 10"
                    cost:"1200"
                    manu:"apple"
                }
            }

            focus: true
            highlight: Rectangle {
                color: "lightblue"
            }

        }
    }
}

headerView: 

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.1

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("phone tabel")

    Rectangle {
        anchors.fill: parent
        color: "#eeeeee"

        ListModel{
            id:phoneModel
            ListElement{
                name:"iphone 12"
                cost:"4545"
                manu:"apple"
            }
            ListElement{
                name:"iphone 18"
                cost:"4545545"
                manu:"apple"
            }
            ListElement{
                name:"iphone 10"
                cost:"1200"
                manu:"apple"
            }
        }

        Component {
            id:phoneDelegate
            Item {
                id: wrapper
                width: parent.width
                height: 30

                MouseArea {
                    anchors.fill:parent
                    onClicked: {

                        wrapper.ListView.view.currentIndex = index
                    }
                }

                RowLayout {
                    anchors.left: parent.left

                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8

                    Text {
                        id: _coll
                        text: name
                         color: wrapper.ListView.isCurrentItem?"red":"black"
                        font.pointSize: wrapper.ListView.isCurrentItem?22:18
                        Layout.preferredWidth: 200
                    }
                    Text {
                        id: _cost
                        text: cost
                         color: wrapper.ListView.isCurrentItem?"red":"black"
                        font.pointSize: wrapper.ListView.isCurrentItem?22:18
                        Layout.preferredWidth: 150
                    }
                    Text {
                        id: _manu
                        text: manu
                        color: wrapper.ListView.isCurrentItem?"red":"black"
                        font.pointSize: wrapper.ListView.isCurrentItem?22:18
                        Layout.fillWidth: true
                    }
                }
            }
        }
        Component {
            id:headerView
            Item {
                width: parent.width
                height: 30

                MouseArea {
                    anchors.fill:parent
                    onClicked: {
                        wrapper.ListView.view.currentIndex = index
                    }
                }

                RowLayout {
                    anchors.left: parent.left

                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8

                    Text {
                        text: "name"
                        font.bold: true
                        font.pointSize: 20
                        Layout.preferredWidth: 200
                    }
                    Text {
                        text: "cost"
                        font.bold: true
                        font.pointSize: 20
                        Layout.preferredWidth: 150
                    }
                    Text {
                        text: "manu"
                        font.bold: true
                        font.pointSize: 20
                        Layout.fillWidth: true
                    }
                }
            }
        }

        ListView{
            id:_listView
            anchors.fill: parent
            delegate: phoneDelegate
            model: phoneModel
            header: headerView


            focus: true
            highlight: Rectangle {
                color: "lightblue"
            }

        }
    }
}

footerView:

import QtQuick 2.2
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.1
import QtQml 2.14

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("phone tabel")

    Rectangle {
        anchors.fill: parent
        color: "#eeeeee"

        ListModel{
            id:phoneModel
            ListElement{
                name:"iphone 12"
                cost:"4545"
                manu:"apple"
            }
            ListElement{
                name:"iphone 18"
                cost:"4545545"
                manu:"apple"
            }
            ListElement{
                name:"iphone 10"
                cost:"1200"
                manu:"apple"
            }
        }
        Component {
            id:footerView
            Text {
                width: parent.width
                height: 30
                font.italic: true
                color: "blue"
                verticalAlignment: Text.AlignVCenter


            }
        }

        Component {
            id:phoneDelegate
            Item {
                id: wrapper
                width: parent.width
                height: 30

                MouseArea {
                    anchors.fill:parent
                    onClicked: {

                        wrapper.ListView.view.currentIndex = index
                    }
                }

                RowLayout {
                    anchors.left: parent.left
//                    anchors.centerIn: parent

                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8

                    Text {
                        id: _coll
                        text: name
                         color: wrapper.ListView.isCurrentItem?"red":"black"
                        font.pointSize: wrapper.ListView.isCurrentItem?22:18
                        Layout.preferredWidth: 200
                    }
                    Text {
                        id: _cost
                        text: cost
                         color: wrapper.ListView.isCurrentItem?"red":"black"
                        font.pointSize: wrapper.ListView.isCurrentItem?22:18
                        Layout.preferredWidth: 150
                    }
                    Text {
                        id: _manu
                        text: manu
                        color: wrapper.ListView.isCurrentItem?"red":"black"
                        font.pointSize: wrapper.ListView.isCurrentItem?22:18
                        Layout.fillWidth: true
                    }
                }
            }
        }
        Component {
            id:headerView
            Item {
                width: parent.width
                height: 30

                RowLayout {
                    anchors.left: parent.left
//                    anchors.centerIn: parent

                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8

                    Text {
                        text: "name"
                        font.bold: true
                        font.pointSize: 20
                        Layout.preferredWidth: 200
                    }
                    Text {
                        text: "cost"
                        font.bold: true
                        font.pointSize: 20
                        Layout.preferredWidth: 150
                    }
                    Text {
                        text: "manu"
                        font.bold: true
                        font.pointSize: 20
                        Layout.fillWidth: true
                    }
                }
            }
        }

        ListView{
            id:_listView
            anchors.fill: parent
            delegate: phoneDelegate
            model: phoneModel
            header: headerView
            footer: footerView
            focus: true

            highlight: Rectangle {
                color: "lightblue"
            }

            onCurrentIndexChanged:{
                if( _listView.currentIndex >=0 ){
                    var data = _listView.model.get(_listView.currentIndex);
                    _listView.footerItem.text = data.name + "," + data.cost + "," + data.manu
                }else{
                    _listView.footerItem.text = " "
                }
            }


        }
    }
}

GoKu~
关注
专栏目录
【问题汇总】ListView的FooterView设置可见性的问题
博客
09-17 8154
ListView的FooterView一般用来给用户展示一些提示信息。 正常情况下，是这么使用的。代码如下： // footer footerLayout = new PullLoadingLayout(context, MODE_PULL_DOWN_TO_REFRESH, releaseLabel, pullLabel, refreshingLabel, isShowHeader); refreshableView.addFooterView(footerLayout); 首先，创建一个F
listview中header和footer以及对postion等的处理
HYM BLOG
11-02 4702
参考：http://892848153.iteye.com/blog/1923680 1、item 内如果有button等控件时，在监听listview的onitemclick事件时，焦点会被item内的button、imagebutton等控 件抢走，从而导致在listview设置了onitemclick事件后不会被触发。解决方法是在初始化item的时候屏蔽掉其内部button等控件的
ListView的HeaderView
810364804
07-29 156
今天突然发现ListView的OnItemClickListener监听事件中的position返回是从1开始的，一直觉得很奇怪，在群里问了后，可能是headerView的问题，特意去查了一番，原来是如此： 特此记过！ （1）添加HeaderView之后尺寸布局被忽略。 通常添加头部的方法是 ? 1 2 3 LayoutInf...
C# Winform ListView使用
weixin_30337251的博客
06-03 340
以下内容均来自网上，个人收集整理，具体出处也难确认了，就没写出处了； 一、基本使用： listView.View = View.Details;//设置视图 listView.SmallImageList = imageList;//设置图标 //添加列 listView.Columns.Add("本地路径", 150, HorizontalAlignment.Left); li...
关于ListView的HeaderView
格物致知，敬事而信！
03-28 519
1. 可点击/不可点击 private void addHeaderView(){ View headerView = this.mInflater.inflate(R.layout.XXX_header_info, this.listView, false); this.headerInfo = (TextView) headerView.findViewById(R.id.XXX_H
ListView
little little
11-27 95
索引：当前可见条目的下标 位置：光标上条目的下标 定义一个垂直滚动的视图集合，列表中的每个视图紧挨着前一个视图。为了更加流行和高效的展示一个列表，使用RecyclerView。 要展示一个列表，可以在布局配置文件引入一个列表view： <ListView * android:id="@+id/list_view" * android:layout_width="match_parent" * android:layout_height="match_parent"
android listview addfooterview,Android listview addHeaderView 和 addFooterView 详解
weixin_42129412的博客
05-27 543
addHeaderView()方法：主要是向listView的头部添加布局addFooterView()方法：主要是向listView的底部添加布局需要注意的是添加布局的时候应该添加从父容器开始添加，而不能直接添加父容器中的子控件。例如：从一个xml布局文件中添加一个button控件，只能将整个布局xml文件添加进去。而不能单单只添加button控件。当添加头部和底部布局还有另外一个重载方法就是a...
android listview addHeaderView和addFooterView
星痕z 的专栏
02-12 3024
android应用中常会出现这样的布局，就是一个listview高度上下顶着屏幕的高度，由于listview是直接从第一个item就开始显示，所以第一个item与屏幕之间就不会有间隔，但是这样是不美观的，我们希望有一定的间距，好说，加个layout_marginTop 不就可以了吗，可是为了在美观 一点还要在屏幕的顶端加个虚化的处理，或者希望这个间距会随着item的滚动而溢出屏幕，这样的话 layout_marginTop就不能满足要求了。 此时就该用到了addHeaderView()与addFooterV
Listview添加完HeaderView或者FooterView后，点击相应的view出现IndexOutOfBoundsException问题修复
jping_share
06-14 3134
问题描述开发过程在使用ListView时发现了这个问题，在给ListView添加了HeaderView或则FooterView（下面全部以FooterView举例子，它们两者的原理是相同的）之后，再去点击FooterView时候会出现crash，IDE给出的错误报告是，在ListView的onItemClick中出现IndexOutOfBoundsException这个异常。 ps：这时候通常我们
ListView中HeadView的使用
04-30
android ListView添加HeadView的demo
recyclerview:符合大师级的recyclerview设计，有添加headerview，添加footerview方法，每个item都有自己的点击事件，类似于listview。 SetOnItemClickListener
07-01
符合material design的recyclerview，为recyclerview添加了可加入headerview和footerview的方法， 添加方法： addHeaderView(View mView) addFooterView(View mView) 删除方法： removeHeaderView() ...
flutter SmartRefresher+ListView组合，为listview添加headview和footerview
热门推荐
徐代龙的技术专栏
08-09 1万+
老实说，这个坑就比较大了，搞了一个上午跟下午两小时，还好算是解决掉了。 先上图： 实现效果图： 主要是上面的头是用两个Container进行包裹起来的，然后下面用了一个listview，总的加上了一个SmartRefresher这个玩意（pull_to_refresh）控件，之前的文章有提到过。 然后再看下GIF图。 这里用SingleChrildView嵌套SmartRefresher还是用...
android listview footer view,Android ListView隐藏FooterView(headerView)
weixin_30348133的博客
05-27 202
在Android开发中，在使用listView时，我们会经常用到footerView或者headerView，给ListView添加的footer和header好多时候，会根据情况隐藏和显示。因为footer和header使用删除和添加的方法总感觉不好。而直接设置footer和header中的view为GONE时，虽然内容不显示了，但是这块区域还是会被占用。经过各种方法测试，最后得出一个可以完美解...
listview添加footerview
ouruolaxuhui的专栏
04-27 757
listview添加footerview：要在setAdapter之前添加，即： ItemSubListViewAdapter mAdapter=new ItemSubListViewAdapter(); mListView.addFooterView(getFooterView()); mListView.setAdapter(mAdapter); private View getFooter
Listview的HeaderView
afunyusong的专栏
04-29 328
Listview的HeaderView
ListView 视图（View）
weixin_30735391的博客
07-06 237
自定义视图，设置默认ListView,ListViewItems默认样式 public class VirtualStackPanelView : ViewBase { public static readonly DependencyProperty OrientationProperty = VirtualStackPanel.Ori...
listview添加headerview
xiyangyang8110的博客
03-02 268
View headView = getLayoutInflater().inflate(R.layout.header_view, null); mTestLv.addHeaderView(headView);
ListView的headerView和footerView
wwww_dong的博客
12-06 1372
如上图, 现在有一个需求，listview头部和尾部的内容不变，但它中间的内容是可变长的，整个区域都可滑动。这时就可运用headerView和footerView来解决此问题。首先要画出三块布局：1、headerView 2、footerView 3、itemView 主要代码和注释如下：//初始化headerView和footerView LayoutInflater inf
Android ListView深度解析与实战
- **头视图和脚视图**：可以添加头视图（HeaderView）和脚视图（FooterView）到ListView的顶部和底部。 6. **优化ListView的性能** - 使用ViewHolder模式可以显著提升ListView的滚动流畅性，通过缓存视图对象避免...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值