第一百一十四回局部动态列表

最新推荐文章于 2024-08-15 16:08:57 发布

原创最新推荐文章于 2024-08-15 16:08:57 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#column #listview #shrikWrap #局部动态列表

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章目录

概念介绍
实现方法
示例代码

我们在上一章回中介绍了dart语言中的 setter/getter相关的内容，本章回中将介绍 局部动态列表.闲话休提，让我们一起Talk Flutter吧。

概念介绍

在正常情况下列表位于整个页面中，而且可以在整个页面中滚动，我们在这里说的局部动态列表是指在页面中的某一部分区域中显示一个列表，列表的滚动范围只限于这个局部区域，我们把这样的列表叫作局部动态列表。在实际项目中这样的场景比较多，本章回中将详细介绍如何实现局部动态列表。

实现方法

我们首先使用使用Column组件划分布局，然后把ListView当作该组件的子组件，这样就创建好了局部动态列表。

这个步骤看着简单，不过还有一些细节需要说明，不然这样的程序会有编译错误：Failed assertion: line 1966 pos 12: 'hasSize。其在原因是Column要求子组件有固定的大小，而子组件ListView没有固定的大小。解决方法有两个，详细如下：

在ListView外面嵌套一个容器组件，比如Container，并且指定容器的高度，相当于间接指定了ListView的高度。
使用shrinkWrap属性，该属性默认值为false.将它设置为true.表示让ListView拥有一个可扩展的最大值。相当于指定了ListView的高度。

上面的两种方法都可以，不过还有一些细节需要解释，详细如下：

在使用第一种方法时还有一些特殊情况需要注意，为了显示ListView中更多的内容，把它外层嵌套的容器高度放大一些，这样做会有超过屏幕高度的风险，此时可以容器的外层再嵌套一个可滚动的组件，比如SingleChildScrollView，这样即使显示的内容超过屏幕了也可以滚动显示。
在使用第二个方法时，主要是不好理解shrinkWrap属性的功能，大家可以查看源代码中的注释，这个注释写的比较清楚，详细如下：

  /// {@template flutter.widgets.scroll_view.shrinkWrap}
  /// Whether the extent of the scroll view in the [scrollDirection] should be
  /// determined by the contents being viewed.
  ///
  /// If the scroll view does not shrink wrap, then the scroll view will expand
  /// to the maximum allowed size in the [scrollDirection]. If the scroll view
  /// has unbounded constraints in the [scrollDirection], then [shrinkWrap] must
  /// be true.
  ///
  /// Shrink wrapping the content of the scroll view is significantly more
  /// expensive than expanding to the maximum allowed size because the content
  /// can expand and contract during scrolling, which means the size of the
  /// scroll view needs to be recomputed whenever the scroll position changes.
  ///
  /// Defaults to false.
  ///
  /// {@youtube 560 315 https://www.youtube.com/watch?v=LUqDNnv_dh0}
  /// {@endtemplate}
  final bool shrinkWrap;

示例代码

介绍完局部动态列表的实现方法后，我们通完示例代码来演示，详细如下：

Column(
  children: [
    const Image(
      width: double.infinity,
      height: 200,
      image: AssetImage("images/ex.png"),
      fit:BoxFit.fill, ),
    const Text('data sample'),
    Container(
      decoration:BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.circular(8)) ,
      height: 200,
      child: ListView.builder(
        ///column中嵌套ListView会报hassize类型的的错误，即使指定list数量也不行
        ///Failed assertion: line 1966 pos 12: 'hasSize
        ///解决方法1:在ListView外层嵌套一个容器，指定容器大小来限定ListView的大小。
        ///该方法相当于创建了个局部List,容器内的List可以自由滚动,也可以通过physics属性让它不滚动
        ///解决方法2：使用shrinkWrap属性，
        itemCount: 10,
        // physics: const NeverScrollableScrollPhysics(),
        itemBuilder: (context,index){
        return const Card(
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Text("List item"),
          ),
        );
          },),
    ),
    Container(
      color: Colors.lightBlue,
      child: ListView.builder(
        ///用来控制List内部的边距，包含head和tail,如果去掉head和tail可以使用only方法
        padding: const EdgeInsets.all(10),
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        itemCount: 20,
        itemBuilder:(context,index){
          return const Card(
            color: Colors.orange,
            child: Padding(
              ///这个padding可以控制card的大小，也就是listItem的大小
              padding: EdgeInsets.all(8),
              child: Text('Another List Item'),
            ),
          );
        },),
    ),
  ],
),