关于Qt ListView 内容宽度大于屏幕宽度，横向滑动解决方案

最新推荐文章于 2025-06-17 17:43:07 发布
最新推荐文章于 2025-06-17 17:43:07 发布
阅读量1.9k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_19797871/article/details/80527754
本文介绍如何在QML中将ListView组件与Flickable组件结合使用以实现流畅滚动效果。通过示例代码展示了如何设置ListView的宽度、高度及模型，同时配置Flickable的内容宽度和高度，确保在限定范围内平滑滚动。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在ListView外面包一层Flickable;
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle{id: idRect ; anchors.fill: parent
        Flickable {id: idFkb; anchors.fill: parent; boundsBehavior:Flickable.StopAtBounds;
            contentWidth: idlister.width*2; contentHeight: idlister.contentHeight;
            ListView{id: idlister;
                width: idRect.width; height: idRect.height
                model: idTestModel
                delegate: Rectangle{ width: idlister.width*2; height: 40;
                    color: "black"; border.color: "#FFFFFF";
                    Text{ anchors.centerIn: parent;
                        text: Test; font.pixelSize: 20;color: "#FFFFFF";
                    }
                    MouseArea{
                        anchors.fill: parent;
                        onClicked: {
                            console.debug(idFkb.contentWidth,idlister.contentWidth)
                        }
                    }
                }
            }
//            ScrollBar.horizontal: ScrollBar {
//                width: idFkb.width; height: 16;
//                contentItem: Rectangle {
//                    implicitWidth: idFkb.contentWidth; implicitHeight: idFkb.height;
//                    radius: height / 2; color: parent.pressed ? Qt.rgba(0,0,0,0.3) : Qt.rgba(0,0,0,0.8)
//                }
//            }
        }
        ListModel{
            id: idTestModel
            ListElement{ Test: "1" }
            ListElement{ Test: "2" }
            ListElement{ Test: "3" }
            ListElement{ Test: "4" }
            ListElement{ Test: "5" }
            ListElement{ Test: "6" }
        }
    }
}

                

        

    

    
  



    



                



	

		

			

				
					
QML学习 —— 23、ListView代理，附横向滑动效果（附源码）

				
			

			

				

					
				

				

					11-11
					
					304
					
				

			

		

		

			
				
QML —— ListView代理，附横向滑动效果（附源码）

			
		

	



                

            
              



	

		

			

				
					
Qt之QListWidget水平滑动

				
			

			

				

					君莫笑的博客
				

				

					12-09
					
					2089
					
				

			

		

		

			
				
Qt之QListWidget水平滑动

			
		

	



              


  
              

                


	

		

			

				
					
Qt之QListView触屏触摸滑动

				
			

			

				

					JEEP550的博客
				

				

					07-18
					
					674
					
				

			

		

		

			
				
QListView默认在触屏设备上只能拖动滑动条进行滑动，不能像Android上的ListView那样触摸滑动，经过研究只需要设置2个地方就可以达到触摸滑动的效果，在这里做个记录。如上设置就可以实现QListView触屏触摸滑动了。

			
		

	





	

		

			

				
					
listView横向滑动

				
			

			

				

					Dylan_null的专栏
				

				

					12-29
					
					706
					
				

			

		

		

			
				
listView横向滑动很少使用，但是有时候也会用到，我也是在网上看到了大神自定义了一个listView可以横向滑动。试了下很不错，希望大家能用的上。自定义代码如下：
public class HorizontalListView extends AdapterView {
	public boolean mAlwaysOverrideTouch = true;
	protected ListA

			
		

	



		

			
		



	

		

			

				
					
使用组件库表格组件纵向滚动时出现横向滚动条问题

					
最新发布

				
			

			

				

					XZZXBC的博客
				

				

					06-17
					
					296
					
				

			

		

		

			
				
利用CSS解决使用组件库中的表格组件纵向滚动时出现横向滚动条问题

			
		

	





	

		

			

				
					
qt的QListwiget设置横向的排列

				
			

			

				

					liuxizhen2009的专栏
				

				

					06-22
					
					5525
					
				

			

		

		

			
				
contentsWidget = new QListWidget();
    contentsWidget->setViewMode(QListView::IconMode);
    contentsWidget->setFlow(QListView::TopToBottom);//这个是关键，qt给的demo中configdialog的例子中默认是竖向的

			
		

	





	

		

			

				
					
横向的listView,带有拖动改变位置顺序功能

				
			

			

				

					04-30
				

			

		

		

			
				
横向ListView,可拖动变更item顺序

			
		

	





	

		

			

				
					
QT —— QTableWidget、QTableView、QListWidget、QListView等控件触控屏上下滑动效果

				
			

			

				

					ZML的博客
				

				

					06-07
					
					3569
					
				

			

		

		

			
				
QTableWidget、QTableView、QListWidget、QListView等控件、在触摸屏上实现手指上下滑动效果

			
		

	





	

		

			

				
					
横向ListView（三） —— 添加头/尾视图及居中显示

				
			

			

				

					u012670875的博客
				

				

					08-30
					
					972
					
				

			

		

		

			
				
前面的文章已经介绍横向ListView的基础实现、快速滑动和事件响应实现；可以说，通过前面两篇文章已经实现了一个完整可用的横向ListView控件，而这以后的文章将介绍的是整个控件的扩展功能，以满足日常开发过程中的特殊需求
    本文将介绍列表头/尾的添加功能实现以及整个视图在没有足够item可以铺满控件时，让显示内容剧中显示。
    为什么要实现添加头尾视图，这个我个人也不是很清楚，毕竟

			
		

	





	

		

			

				
					
qt C++ 创建一个横向循环滑动的按钮列表，读取SD卡media/game文件，将数据传到按钮

				
			

			

				

					09-11
				

			

		

		

			
				
在Qt中创建一个横向循环滑动的按钮列表，你可以使用QML（Qt Markup Language）结合C++后端来实现。首先，你需要准备一个QML文件，用于定义布局和按钮，然后在C++中处理SD卡上的文件并提供数据。以下是一个基本步骤的...

			
		

	





	

		

			

				
					
28.qt quick-ListView高仿微信好友列表和聊天列表

				
			

			

				

					抵抗时间扭曲，坚持做一件有意义的事
				

				

					06-12
					
					3265
					
				

			

		

		

			
				
1.视图模型介绍
在Qml中、常见的View视图有:

ListView: 列表视图,视图中数据来自ListModel、XmlListModel或c++中继承自QAbstractItemModel或QAbstractListModel的自定义模型类
TableView:和excel类似的视图
GridView: 网格视图,类似于home菜单那样,排列着一个个app小图标
PathView: ...

			
		

	





	

		

			

				
					
qt qml 中 listview, scrollbar的使用例子

				
			

			

				

					08-14
				

			

		

		

			
				
qml 中的listview添加滚动条，按住滚动条可以使list滚动。
随着list条数增多，滚动条的长度就会减小。但是list条数过多，滚动条变得已经特别小了，这样不利于操作；因此滚动条长度需要设置一个最小值，本例中最小值是90.
    list显示可能是从上到下，也可能是从下到上开始显示，因此本例也添加了这两种情况下，滚动条和list的关系式。
[839426174@qq.com]

			
		

	





	

		

			

				
					
ListView中getChildAt(index)的使用注意事项

				
			

			

				

					ahua186186的专栏
				

				

					03-15
					
					570
					
				

			

		

		

			
				
1.原理
在很多时候ListView列表数据不需要全部刷新，只需刷新有数据变化的那一条，这时可以用getChildAt(index)获取某个指定position的view，并对该view进行刷新。

注意：在ListView中，使用getChildAt(index)的取值，只能是当前可见区域（列表可滚动）的子项！

即取值范围在 >= ListView.getFirstVisiblePo...

			
		

	





	

		

			

				
					
Qml ListView实自动滚动

				
			

			

				

					BCMY0110的博客
				

				

					04-15
					
					2228
					
				

			

		

		

			
				
工作中用到自动滚动的ListView，查了很多资料，这里简单做个笔记，简单易懂。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml 2.3
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    ListView {
        id: li.

			
		

	





	

		

			

				
					
QT QListView的项长文本无法完全显示问题

				
			

			

				

					Jane_Yih的博客
				

				

					01-27
					
					2827
					
				

			

		

		

			
				
关于QT QListView的长文本内容无法完全显示的问题分析与解决方案。

			
		

	





	

		

			

				
					
QML:ListView实现上下滑动的数字选择器

				
			

			

				

					ACE_YOUNG的博客
				

				

					06-20
					
					886
					
				

			

		

		

			
				
QML:ListView实现上下滑动的数字选择器。

			
		

	





	

		

			

				
					
QML之GridView实现滑动的网格布局

				
			

			

				

					PRML_MAN的博客
				

				

					05-14
					
					3749
					
				

			

		

		

			
				
最近在做关于滑动网格的需求，正好用到了GridView实现对应的功能。

1、GridView 关键属性
GridView相关的属性比较多，下面是一些关键的属性：
cellHeight: 表格中单个格子的高度
cellWeight: 表格中单个格子的宽度
currentIndex: 当前焦点所在的索引
delegate: 代理，即格子内的实现方式
layoutDirection: 所有格子的排列顺序
model: 表格的数据

2、GridView实现滑动表格

实现思路：
1、创建一个GridView，设

			
		

	





	

		

			

				
					
当内容超出宽度时实现横向滑动效果

				
			

			

				

					白白的博客
				

				

					09-07
					
					4157
					
				

			

		

		

			
				
当内容超出宽度时，可以横向滚动

我们经常会遇到内容超过高度时，页面出现滚动条，通过滚动条来继续浏览内容，比如当前页面就是。很简单，设置css属性overflow-y: auto;就可以实现。
	而如果想要内容不换行，当超过宽度，横向滚动呢，overflow-x: auto;就不能实现了，因为默认会换行。
	话不多说，直接上代码。

<!--使用了vue，这里的重点应是css-->
<div class="content">
    <div v-for="prizeItem 

			
		

	





	

		

			

				
					
Qt实现水平方向（横向）流式布局FlowLayout简单又实用！提供2种最有用的方法！

				
			

			

				

					wu10188的博客
				

				

					05-14
					
					2756
					
				

			

		

		

			
				
如果没有搜索过滤，实时排序等高能要求，相对固定的顺序，直接使用轻巧的FlowLayout；如果需要支持实时的搜索、过滤、指定插入、实时排序、选中、拖拽交互两个项位置、数据量大且要索引访问等高级功能，建议使用QListView或者QListWidget；

			
		

	





	

		

			

				
					
qt c++ QListView 使用横向布局，并且使用自定义代理，写一个例子

				
			

			

				

					10-29
				

			

		

		

			
				
在Qt C++中，QListView通常用于显示数据列表，你可以通过设置其`ViewMode`为`QListView::TwoColumns`并结合自定义模型和代理器来实现横向布局。下面是一个简单的例子：

首先，你需要包含必要的头文件，并创建一个自定义模型`MyModel`，以及一个代理器`MyProxyModel`，它将负责处理数据和布局。

```cpp
#include <QApplication>
#include <QListView>
#include <QStandardItemModel>
#include <QAbstractItemView>
#include <QSortFilterProxyModel>

class MyModel : public QStandardItemModel {
public:
    MyModel(QObject *parent = nullptr) : QStandardItemModel(parent) {}
};

class MyProxyModel : public QSortFilterProxyModel {
public:
    explicit MyProxyModel(QObject *parent = nullptr) : QSortFilterProxyModel(parent) {}

    // 横向布局
    int columnCount(const QModelIndex &parent) const override {
        return 2;
    }

    Qt::Orientation orientation() const override {
        return Qt::Horizontal; // 设置为水平布局
    }
};
```

接下来，在主窗口中设置`QListView`：

```cpp
int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 创建数据源
    MyModel model;

    // 自定义代理模型
    MyProxyModel proxyModel(&model);
    proxyModel.setSourceModel(&model); // 将模型连接到代理

    // 创建视图，并设置布局和代理
    QListView listView;
    listView.setModel(&proxyModel);
    listView.setViewMode(QListView::TwoColumns);
    listView.setItemDelegateForColumn(0, new QStyledItemDelegate()); // 第一列可以使用默认样式，第二列自定义
    listView.setItemDelegateForColumn(1, new YourCustomItemDelegate()); // 替换为你自定义的列样式

    // 显示窗口
    QMainWindow window;
    window.setCentralWidget(&listView);
    window.show();

    return app.exec();
}
```
在这个例子中，你需要实现`YourCustomItemDelegate()`类来自定义第二个列的外观。记得在`main.cpp`中添加这个类的实现，包括绘制、大小调整等细节。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值