【问题标题】:What is the difference between ListView and SingleChildScrollView in Flutter?Flutter 中 ListView 和 SingleChildScrollView 有什么区别?
【发布时间】:2020-09-20 13:53:33
【问题描述】:

我见过一些使用ListView 作为Scaffold 的主要body 元素的示例,在少数教程中,它是SingleChildScrollView。我所理解的只是两者都允许根据配置的方向进行某些滚动轴,但无法确定何时使用一个而不是另一个?

列表视图:

Scaffold
  body : ListView
    children : Padding/Container

SingleChildScrollView:

Scaffold
  body : SingleChildScrollView
    child : Column

【问题讨论】:

    标签: flutter dart material-design flutter-layout


    【解决方案1】:

    您可以将ListView 视为对SingleChildScrollView + Column 组合的优化。

    通过使用ListView,只有可见的项目被安装和绘制。

    另一方面,通过使用SingleChildScrollView+Column,整个项目列表被安装+绘制,即使只有少数项目可见。

    权衡是ListView 不太灵活。所以对于包含少量item的复杂布局,性能提升可能不值得,这种情况下我们可以使用SingleChildScrollView

    【讨论】:

    • 感谢@Remi 的回答,这很有帮助。只是想知道你是如何获得这么多关于 Flutter 的知识的?您推荐的任何学习资源。
    • 好奇心。我以前问过自己所有这些问题,并自主地寻找答案。
    • Listview 本身效率不高,或者您所谓的优化,因为它还会渲染和绘制列表中的所有项目。 Listview.builder() 是使用延迟加载并有效利用资源的一种。
    • @Badamchi no ListView 也会进行惰性渲染。唯一的区别是children 参数的内存分配。
    • 引用“与需要一次创建所有项目的默认 ListView 构造函数相比,ListView.builder() 构造函数在项目滚动到屏幕上时创建它们。”参考:flutter.dev/docs/cookbook/lists/long-lists
    【解决方案2】:

    ListView,如果您有要呈现的 UI 小部件列表,并且此类小部件的数量是动态的,则可以使用。

    例如:您只需在屏幕上显示联系人列表,并且列表项或多或少相似(UI 方面和类别方面)。然后你会使用 Listview。

    SingleChildScrollView 可以类比为 Android 中的 "ScrollView"。假设您有很多 UI 小部件(按钮、输入字段、卡片等),并且它们开始出现在屏幕之外。在这种情况下,您的小部件将溢出,您将开始看到警告。要解决此问题,您可以使用 SingleChildScrollView 包装您的 UI 小部件。

    对于您的用例,“推荐”部分,ListView 将是一个不错的选择。

    【讨论】:

    • 感谢@Kumar 的回答,很有帮助。
    【解决方案3】:

    ListView: 用于我们必须为 n 个元素渲染相同类型的小部件时

    SingleChildScrollView: 在我们有 n 个元素的不同小部件时使用。

    理想情况下,我们需要滚动的两种情况,Listview 都有默认行为,但列和其他小部件不需要使用SingleChildScrollView

    更新: 选择 ListView 时应注意的重要一点

     ListView() -- Render all the items in the list, even if it is not visible. 
    
    `ListView.Builder()` -- Render only visible items on the screen. 
    

    【讨论】:

    • 您能详细说明n 个元素的不同小部件 吗?考虑我必须显示几个菜单项,推荐部分为show here。您更喜欢哪一个, ListView / SingleChildScrollView ?为什么?
    • 当你的屏幕中只有 ListView 小部件时,然后是 Listview,但是对于不同的小部件,SingleChildScrollView 因为它能够滚动所有在其中声明的子小部件。
    • 感谢@jitsm555 的回答,很有帮助。
    猜你喜欢
    • 2022-08-18
    • 2023-01-26
    • 2011-06-09
    • 1970-01-01
    • 2019-06-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-06
    相关资源
    最近更新 更多