1. 项目概述为什么说ListView是QML界面开发的“定海神针”如果你刚开始接触QML可能会被各种炫酷的动画和流畅的界面所吸引但当你真正要构建一个包含列表、菜单、联系人等需要展示大量重复结构数据的界面时ListView这个组件就会立刻成为你绕不开的核心。它不是最花哨的但绝对是使用频率最高、也最容易让人“又爱又恨”的组件之一。爱它是因为它封装了数据绑定、滚动、复用等复杂逻辑让你用极简的代码就能实现一个功能完整的列表恨它是因为一旦你对它的工作原理理解不透彻各种性能问题、布局错乱、交互失灵就会接踵而至比如网上常搜的“qml编译错误”、“listview item显示异常”等十有八九都和它有关。简单来说ListView是Qt Quick中用于显示一维线性列表数据模型的核心视图组件。它就像一个智能的“数据展示流水线”你给它一个数据源Model和一份用于绘制单个数据项的图纸Delegate它就能自动地、高效地为你渲染出整个列表并处理滚动、点击等交互。无论是通讯录列表、设置项、聊天记录还是新闻瀑布流底层几乎都离不开ListView或其变体。理解并掌握ListView意味着你掌握了QML动态界面开发的半壁江山。这篇文章我就结合自己多年踩坑填坑的经验带你从“会用”到“精通”ListView把它的五脏六腑、运行机理和那些官方文档里不会写的实战技巧一次性讲透。2. ListView的核心架构与工作原理拆解要玩转ListView不能只停留在属性设置的层面必须理解其内部的工作模型。你可以把它想象成一个管理着一条“虚拟长卷轴”的智能画师。2.1 核心三要素Model, Delegate, View这是ListView乃至所有Qt Quick视图类如GridView, PathView的基石。三者各司其职共同协作。Model模型数据的来源。它定义了列表里有什么。可以是简单的JavaScript数组也可以是复杂的C中继承自QAbstractItemModel的类或者是QtQuick提供的ListModel。Model的角色是纯粹的数据提供者它不关心数据长什么样只关心数据的结构和内容。// 示例一个简单的ListModel ListModel { id: contactModel ListElement { name: 张三; phone: 13800138000; avatar: zhangsan.png } ListElement { name: 李四; phone: 13900139000; avatar: lisi.png } // ... 更多数据 }Delegate委托数据的可视化模板。它定义了单个数据项Item长什么样。当ListView需要显示某个数据时它会实例化或复用一个Delegate并将对应索引index的数据如model.name,model.phone注入到这个Delegate实例中。你可以把它理解为一个“邮票模具”决定了每个列表项的外观和基础交互。// 示例一个联系人项的Delegate Component { id: contactDelegate Rectangle { width: ListView.view.width // 引用ListView的宽度 height: 60 color: index % 2 ? #f5f5f5 : white // 奇偶行不同背景 Row { anchors.fill: parent anchors.margins: 10 spacing: 10 Image { source: model.avatar; width: 40; height: 40 } Column { Text { text: model.name; font.bold: true } Text { text: model.phone; color: gray } } } MouseArea { anchors.fill: parent onClicked: console.log(Clicked on:, model.name) } } }View视图即ListView本身。它是舞台的导演和调度者。它的核心职责包括视口管理确定当前可见区域contentX,contentY,width,height。项实例化与复用这是ListView性能的关键。它不会为所有数据一次性创建所有Delegate实例而是只创建足够覆盖当前视口及少量缓冲区的实例。当项滚动出视口时它会被回收并用于即将进入视口的新数据项。这个过程对开发者是透明的但理解它对于避免常见bug至关重要。布局根据orientation水平或垂直、spacing等属性排列Delegate实例。交互处理处理鼠标/触摸滚动、键盘导航等。2.2 视图的“窗口”与“画布”理解contentItem与contentHeight这是新手最容易混淆的概念之一也是很多布局问题的根源。ListView本身你可以把它看作一个固定大小的“相框”或“窗口”。它的width和height属性决定了这个窗口有多大。用户只能透过这个窗口看到后面画布的一部分。contentItem这是ListView内部用于承载所有Delegate实例的实际容器。默认是一个Flickable提供滚动功能内部的Item。所有Delegate实例都是这个contentItem的子元素。contentHeight / contentWidth这是contentItem的“画布”总尺寸。它的值是由Model的项数、每个Delegate的高度或宽度以及spacing自动计算出来的。当你垂直滚动时实际上是contentItem在ListView这个“窗口”后面上下移动。关键理解Delegate里设置的width和height是每个“邮票”的大小。而ListView.view.width则是指“窗口”的宽度。通常我们希望每个项和窗口一样宽所以在Delegate里会写width: ListView.view.width。如果你在Delegate里写死了width: 200而ListView的宽度是300那么列表项就不会占满右边会出现空白。2.3 项复用机制深度剖析这是ListView高效渲染成百上千项数据的魔法所在但魔法也有其规则违反规则就会导致显示错乱。工作原理创建池ListView启动时会根据需要显示的项数视口高度/项高 缓冲项数创建初始的少量Delegate实例比如10个。填充数据将这些实例按顺序填充Model中前几项的数据并摆放在contentItem的正确位置上。滚动与回收当你向下滚动时最顶部的项逐渐移出视口。ListView不会销毁它而是将其“回收”。同时底部需要新出现的项不再创建新的实例而是直接复用这个被回收的实例只是为其填充新的Model索引index对应的数据然后将其移动到列表底部的新位置。数据绑定更新由于QML的绑定机制当Delegate实例被复用于新的index时其内部所有绑定到model.xxx的属性如Text { text: model.name }会自动更新因为model上下文角色context role改变了。由此引出的最重要实践原则Delegate必须是幂等的、无状态的。幂等给定相同的模型数据indexDelegate渲染出的结果必须完全一致。不能因为之前显示过其他数据而留下任何“残留状态”。无状态Delegate内部不应该存储任何与特定数据项索引相关的“状态”。状态应该由Model或外部逻辑管理。违反原则的典型坑// 错误示例Delegate有内部状态 Component { id: badDelegate Rectangle { property bool isExpanded: false // 错误这个状态是实例级别的会被复用 height: isExpanded ? 100 : 50 MouseArea { onClicked: parent.isExpanded !parent.isExpanded // 点击改变状态 } } }假设你点击第一项将其展开height变为100。当你滚动后这项被复用到第十项。第十项会直接以height: 100显示因为isExpanded这个状态被带过来了正确的做法是将展开状态存储在Model中如model.isExpanded或者使用ListView.isCurrentItem等视图提供的属性或者使用单独的States和外部逻辑来管理。3. 从零构建一个健壮的ListView实战步骤详解理解了原理我们动手搭建一个功能齐全、性能良好的联系人列表。我会把每个步骤的意图和潜在陷阱讲清楚。3.1 定义数据模型Model我们选择ListModel因为它动态性好支持在QML中直接修改。ListModel { id: myListModel // 动态添加一些初始数据 Component.onCompleted: { for (var i 0; i 50; i) { append({name: 联系人 i, phone: 1XX (0000i).slice(-4), // 模拟手机号 avatarColor: Qt.rgba(Math.random(), Math.random(), Math.random(), 1), isFavorite: i % 7 0 // 每7个人有一个是收藏 }) } } }这里我特意添加了一个avatarColor用随机颜色代替图片和一个isFavorite布尔值字段为后续的交互和状态管理做准备。3.2 设计委托Delegate这是重头戏一个健壮的Delegate需要考虑布局、数据绑定、交互和状态管理。Component { id: listItemDelegate // 使用Rectangle作为根项便于控制背景和边框 Rectangle { // 关键1宽度与视图同步高度由内容决定或固定 width: ListView.view ? ListView.view.width : parent.width height: 70 // 固定高度简化布局计算对性能最友好 // 关键2使用模型数据决定背景色而非内部状态 color: { if (model.isFavorite) return #FFF8E1; // 收藏项特殊背景 return (index % 2) ? #F9F9F9 : #FFFFFF; // 奇偶行交替 } border.color: #EEEEEE border.width: 1 // 使用Row和Column进行灵活的水平布局 Row { id: layoutRow anchors.fill: parent anchors.leftMargin: 15 anchors.rightMargin: 15 spacing: 12 // 左侧头像/图标区域 Rectangle { id: avatarRect width: 48 height: 48 radius: 24 color: model.avatarColor // 绑定模型颜色 anchors.verticalCenter: parent.verticalCenter // 如果是收藏联系人加一个小星星 Image { visible: model.isFavorite source: qrc:/images/star_filled.svg width: 16; height: 16 anchors { top: parent.top; right: parent.right; margins: -4 } } } // 中间文字信息区域 Column { anchors.verticalCenter: parent.verticalCenter spacing: 4 Text { text: model.name font { pixelSize: 16; bold: true } color: #333333 elide: Text.ElideRight // 文字过长时显示省略号 width: layoutRow.width - avatarRect.width - favoriteIcon.width - layoutRow.spacing * 2 } Text { text: model.phone font.pixelSize: 14 color: #666666 } } // 右侧操作区域例如收藏按钮 Item { id: favoriteIcon width: 24; height: 24 anchors.verticalCenter: parent.verticalCenter Image { anchors.centerIn: parent source: model.isFavorite ? qrc:/images/star_filled.svg : qrc:/images/star_empty.svg width: 20; height: 20 } } } // 交互区域 - 覆盖整个项 MouseArea { anchors.fill: parent acceptedButtons: Qt.LeftButton | Qt.RightButton onClicked: (mouse) { if (mouse.button Qt.LeftButton) { // 左键点击选中该项 listView.currentIndex index; console.log(Selected:, model.name, at index, index); // 可以在这里触发更详细的视图或编辑操作 } else if (mouse.button Qt.RightButton) { // 右键点击弹出上下文菜单例如切换收藏状态 contextMenu.popup(mouse.x, mouse.y); } } onDoubleClicked: { // 双击直接拨号模拟 console.log(Dialing:, model.phone); } // 添加按压效果 onPressed: parent.opacity 0.7 onReleased: parent.opacity 1.0 onCanceled: parent.opacity 1.0 } // 右键菜单定义 Menu { id: contextMenu MenuItem { text: model.isFavorite ? 取消收藏 : 加入收藏 onTriggered: { // 直接修改模型数据这是最规范的做法。 myListModel.setProperty(index, isFavorite, !model.isFavorite); } } MenuItem { text: 删除联系人 onTriggered: { // 从模型中移除该项 myListModel.remove(index); } } } } }这个Delegate示例包含了多个关键实践明确的尺寸固定heightwidth绑定视图。可变高度的Delegate高度由内容决定虽然灵活但会迫使ListView在每次布局时都计算contentHeight对性能有影响。在数据量大时尽量使用固定高度或高度角色height: model.itemHeight。状态外置isFavorite状态存储在Model中通过model.isFavorite绑定。这样项复用不会导致状态错乱。完整的交互支持左键选择、右键菜单、双击操作并提供了视觉反馈按压透明度变化。直接操作模型在菜单事件中直接调用myListModel.setProperty和myListModel.remove。这是改变列表数据的正确方式数据变化会自动同步到视图。3.3 配置ListView主体现在我们把Model和Delegate组装起来并配置ListView的各项属性。ListView { id: listView anchors.fill: parent // 占满父项 // 核心绑定 model: myListModel delegate: listItemDelegate // 关键属性配置 spacing: 1 // 项之间的间隔1像素的分隔线效果 clip: true // 必须设置为true确保超出视口的部分被裁剪否则性能会变差且显示异常 focus: true // 允许键盘导航 currentIndex: -1 // 初始没有选中项 // 滚动行为优化 boundsBehavior: Flickable.StopAtBounds // 滚动到边界时停止而不是越界回弹 ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded } // 添加垂直滚动条 // 键盘导航支持 Keys.onUpPressed: decrementCurrentIndex() Keys.onDownPressed: incrementCurrentIndex() Keys.onReturnPressed: if (currentItem) console.log(Enter on:, myListModel.get(currentIndex).name) // 高亮当前选中项 - 使用独立的Component与Delegate解耦 highlight: Component { Rectangle { color: #E3F2FD border.color: #2196F3 border.width: 2 // 高亮组件会自动调整到与当前项相同的位置和大小 // 可以通过highlightMoveDuration和highlightResizeDuration控制动画 } } highlightMoveDuration: 200 // 高亮移动动画时长 highlightResizeDuration: 100 // 高亮大小调整动画时长 // 缓存缓冲提升滚动性能。缓冲项数 buffer * 每屏可见项数。 // 例如一屏显示10项buffer2则总共会创建和保留约30个Delegate实例。 cacheBuffer: 400 // 单位是像素。在垂直列表中指视口上下各额外缓冲400像素高度的项。 // 节流属性用于控制繁忙模型更新时的UI响应 // displayMarginBeginning/End: 视口外多少像素开始加载/卸载项高级优化通常用cacheBuffer即可 // snapMode: 滚动停止时的吸附模式适用于需要精准对齐的场景 }4. 高级技巧与性能优化实战掌握了基础我们来看看如何让ListView更强大、更流畅。4.1 动态模型与实时更新ListModel的append,insert,remove,setProperty等方法都会自动触发视图更新。但对于超大数据集或频繁更新需要注意性能。场景列表底部有个“加载更多”按钮点击后从网络加载新数据追加到列表。Button { text: 加载更多 onClicked: { // 模拟网络请求 busyIndicator.running true; // 使用Timer模拟异步 loadMoreTimer.start(); } } Timer { id: loadMoreTimer interval: 1000 onTriggered: { var currentCount myListModel.count; for (var i 0; i 20; i) { // 批量追加数据 myListModel.append({name: 新联系人 (currentCount i), phone: 1XX (0000(currentCounti)).slice(-4), avatarColor: Qt.rgba(Math.random(), Math.random(), Math.random(), 1), isFavorite: false}); } busyIndicator.running false; // 数据追加后ListView会自动更新contentHeight会增加可以继续滚动。 } }注意虽然ListModel.append是同步的但在一个循环中追加大量数据比如上千条可能会阻塞UI线程导致界面卡顿。对于这种情况可以考虑使用Qt.callLater分批追加。使用C端的数据模型并在后台线程进行数据操作通过信号通知QML更新。4.2 使用C模型QAbstractItemModel获得极致性能当数据量极大数万条或需要复杂的数据操作时JavaScript数组或ListModel可能力不从心。这时需要将数据模型放在C端。优势性能数据操作在C端效率远高于JavaScript。内存数据可以按需加载不必一次性全部载入QML端。功能支持树形结构、排序、过滤等高级功能通过QSortFilterProxyModel。在QML中使用// 假设在C中注册了一个名为ContactModel的类继承自QAbstractListModel ListView { model: contactModel // 直接使用C中导出的模型实例 delegate: listItemDelegate // ... 其他配置 }C模型通过角色roleNames提供数据在QML的Delegate中通过model.roleName如model.display,model.phoneNumber来访问。这种方式下视图的更新是通过Qt的模型/视图框架自动进行的效率最高。4.3 实现下拉刷新与上拉加载更多这是移动端列表的标配功能。我们可以利用ListView的header和footer属性结合contentY内容项的垂直位置来实现。ListView { id: listView // ... model, delegate等配置 // 1. 下拉刷新 Header header: PullToRefreshHeader { id: refreshHeader // 这个组件需要自己实现主要逻辑是 // - 监听ListView的contentY。 // - 当contentY -阈值时显示“释放刷新”状态。 // - 当用户释放且满足条件时触发刷新信号并开始加载动画。 // - 数据加载完成后隐藏加载动画。 onRefreshRequested: { console.log(下拉刷新触发); // 模拟网络加载 refreshTimer.start(); } } // 2. 上拉加载更多 Footer footer: LoadMoreFooter { id: loadMoreFooter visible: listView.atYEnd !loadMoreFooter.loading // 滚动到底部且不在加载中时显示 onLoadMoreRequested: { console.log(上拉加载更多触发); loadMoreFooter.loading true; loadMoreTimer.start(); // 使用前面定义的Timer模拟加载 } } // 监听滚动位置控制footer显示逻辑 onContentYChanged: { // 这里可以添加更复杂的逻辑比如预加载距离底部一定距离时就触发加载 if (contentHeight - contentY - height 50 !loadMoreFooter.loading !loadMoreTimer.running) { // 接近底部50像素时自动触发加载更多 loadMoreFooter.loadMoreRequested(); } } } Timer { id: refreshTimer interval: 1500 onTriggered: { console.log(刷新完成); refreshHeader.refreshCompleted(); // 通知header刷新完成 } }PullToRefreshHeader和LoadMoreFooter是需要自定义的组件它们内部会包含状态文字“下拉刷新”、“释放刷新”、“正在加载…”和加载动画通常是BusyIndicator或旋转的Image。实现的关键在于对ListView.contentY和ListView.atYEnd属性的监听。4.4 项动画与过渡效果为项的添加、移除、移动添加动画能极大提升用户体验。ListView提供了add,remove,populate等过渡Transition和位移Displaced动画。ListView { // ... // 添加项时的动画 add: Transition { NumberAnimation { properties: opacity; from: 0; to: 1.0; duration: 300 } NumberAnimation { properties: scale; from: 0.8; to: 1.0; duration: 300 } } // 移除项时的动画 remove: Transition { ParallelAnimation { NumberAnimation { property: opacity; to: 0; duration: 300 } NumberAnimation { property: scale; to: 0.8; duration: 300 } } } // 当项因添加或移除而发生位置移动时的动画非常有用 displaced: Transition { NumberAnimation { properties: x,y; duration: 400; easing.type: Easing.OutQuad } } // 初始填充时的动画 populate: Transition { NumberAnimation { properties: opacity; from: 0; to: 1; duration: 500 } } }合理使用这些动画可以让列表的交互变得生动自然。注意过度复杂的动画可能会影响滚动性能。5. 避坑指南与疑难杂症排查即使理解了原理在实际开发中还是会遇到各种奇怪的问题。下面是我总结的常见“坑”及其解决方案。5.1 Delegate尺寸问题导致布局混乱症状列表出现空白、重叠、滚动条计算不准或者contentHeight不对。根因ListView计算contentHeight依赖于每个Delegate的height。如果Delegate的高度是动态的由内部子项决定即implicitHeight或者高度绑定了一个异步加载后才确定的属性如图片加载完成后的高度ListView在初次布局时可能得到错误的高度。解决方案首选固定高度在Delegate的根项上设置明确的height。这是性能最好、最稳定的方式。使用implicitHeight如果高度必须由内容决定确保内部子项的布局是确定性的并且implicitHeight能正确计算。避免在Delegate完成组件Component.onCompleted后再动态改变影响尺寸的子项。绑定模型中的高度角色在C模型或ListModel中提供一个itemHeight角色Delegate中绑定height: model.itemHeight。这样高度数据由模型驱动清晰可控。强制重新布局在极端情况下可以在数据加载完成后调用ListView.forceLayout()但这是最后的手段频繁调用影响性能。5.2 项复用导致的状态残留或显示错乱症状滚动列表时项的选中状态、图片、文本等内容“串”到了其他项上。根因违反了Delegate“幂等、无状态”原则。某个Delegate实例的内部属性如一个property bool checked或动态加载的资源如异步网络图片在复用时没有根据新的model.index正确重置。解决方案状态存储于模型所有视觉状态如是否选中、是否展开、是否已读都应作为数据存储在Model中例如model.isChecked。Delegate中通过绑定来反映状态。使用Loader延迟加载复杂内容对于开销大的子组件如一个复杂的详情区域可以用Loader按需加载并在Loader.active变为false时卸载确保资源释放。在Component.onDestruction中清理如果Delegate必须持有临时资源如一个文件句柄、一个网络请求对象确保在Component.onDestruction信号中释放它们。但更好的设计是避免这样做。检查Image的source确保Image的source属性完全绑定到model.url。如果存在条件赋值如source: model.hasImage ? model.url : “”要确保条件变化时绑定能正确更新。5.3 滚动性能卡顿症状列表滚动时明显掉帧尤其在低端设备或项很复杂时。根因每个Delegate太重包含太多元素、复杂阴影/渐变、频繁的JavaScript运算等导致创建、渲染、合成的时间过长。解决方案简化Delegate减少不必要的QML元素数量。用矩形Rectangle代替图片做纯色背景避免过度使用阴影layer.effect: DropShadow很耗性能、透明度opacity和复杂的渐变。使用cacheBuffer适当增加cacheBuffer值让ListView提前创建更多项减少滚动时的即时创建开销。但不要设置过大否则会占用过多内存。图片优化对于网络图片使用异步加载并缓存。使用合适尺寸的图片避免在Delegate中显示过大的图片然后缩放。考虑使用Image的asynchronous和cache属性。避免在Delegate中执行昂贵操作不要在Delegate的Component.onCompleted或属性绑定中执行网络请求、复杂的文件IO或大量计算。这些操作应放在模型或后台线程中。使用QtQuick.Shape替代Canvas对于简单矢量图形Shape比Canvas性能更好。启用OpenGL渲染确保应用程序正确配置了OpenGL渲染后端例如在main.cpp中设置QQuickWindow::setSceneGraphBackend或使用QSG_RHI_BACKEND环境变量。软件渲染器software性能极差。5.4 键盘导航与焦点管理失效症状设置了focus: true和Keys.onPressed但ListView无法用键盘方向键选择项。根因焦点被其他Item抢走或者Delegate内部有可聚焦的Item如TextInput,Button干扰了ListView的焦点链。解决方案确保ListView获得焦点在需要时主动调用listView.forceActiveFocus()。设置keyNavigationWraps如果希望按方向键时在列表头尾循环设置keyNavigationWraps: true。处理Delegate内的焦点项如果Delegate内有TextInput你需要管理焦点传递。通常当TextInput获得焦点时应暂时阻止ListView的键盘导航。可以通过设置ListView.interactive: false或在TextInput的onActiveFocusChanged信号中处理。使用highlight组件高亮组件能清晰指示当前选中项配合键盘导航体验更好。5.5 与Flickable/ScrollView的嵌套冲突症状ListView放在另一个可滚动的区域如Flickable内时滚动操作混乱可能无法滚动ListView或者外层和内层同时滚动。根因QML中鼠标/触摸事件会向上传递。内层FlickableListView内部有一个和外层Flickable都可能试图处理滚动事件。解决方案设置interactive属性根据业务逻辑在适当的时候设置外层或内层Flickable的interactive属性为false。例如当ListView滚动到顶部且继续向上拉时才允许外层滚动。使用ScrollView代替外层FlickableScrollView对嵌套滚动的处理有时更智能。但注意ScrollView内部也是Flickable。自定义事件过滤在ListView的MouseArea或外层Flickable的onWheel等事件处理器中判断滚动方向和当前位置决定是否accept事件来阻止进一步传递。这是更高级的解决方案复杂度较高。5.6 常见错误速查表问题现象可能原因排查步骤与解决方案列表空白不显示任何项1. Model为空或未正确赋值。2. Delegate的根项尺寸为0。3. ListView的visible或opacity为0。1. 检查model.count打印模型数据。2. 给Delegate根项设置临时背景色或边框检查其尺寸。3. 检查父项裁剪、透明度等属性。滚动条异常无法滚动到底部contentHeight计算错误通常因Delegate高度不确定引起。1. 给Delegate设置固定height。2. 检查Delegate内是否有动态改变尺寸的元素如加载完成的图片。3. 尝试在模型数据加载完成后调用listView.forceLayout()慎用。项点击无反应1. Delegate内的MouseArea被其他元素覆盖。2.MouseArea的onClicked信号未正确连接。3. 父项设置了enabled: false。1. 确保MouseArea的anchors.fill: parent且z值足够高。2. 在onClicked内添加console.log调试。3. 检查Delegate及其所有父项的enabled和visible属性。图片在滚动时闪烁或错位Image的异步加载与项复用冲突。项复用时旧图片可能还在加载新源的图片加载完成后覆盖。1. 为Image设置asynchronous: false可能影响性能。2. 在Image的onStatusChanged中如果状态是Loading或Error显示一个占位图。3. 使用QtQuick.Controls.BusyIndicator作为加载指示器。内存占用持续增长1. Delegate中创建了未释放的资源如Timer、网络请求。2. 图片缓存过大。3.cacheBuffer设置过大。1. 在Delegate的Component.onDestruction中清理资源。2. 调整Image的cache策略或全局图片缓存大小。3. 适当减小cacheBuffer。使用性能分析工具如Qt Creator的性能分析器定位。在嵌入到复杂布局中时位置偏移ListView的锚定anchors或位置x,y可能被父项的布局影响。1. 检查ListView的anchors.fill: parent是否生效父项尺寸是否正确。2. 尝试使用ColumnLayout或RowLayout代替简单的Column/Row并设置适当的Layout.fillWidth和Layout.fillHeight。掌握这些排查思路大部分ListView相关的问题都能迎刃而解。记住遇到诡异的问题时回归基本原理检查Model数据、Delegate的尺寸和状态管理、以及View的布局和属性设置。
