阅读 44

flutter笔记(十五)ListView滚动列表

ListView({
    Key key,
    Axis scrollDirection: Axis.vertical,
    bool reverse: false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap: false,
    EdgeInsetsGeometry padding,
    double itemExtent,
    bool addAutomaticKeepAlives: true,
    bool addRepaintBoundaries: true,
    bool addSemanticIndexes: true,
    double cacheExtent,
    List<Widget> children const[],
    int semanticChildCount,
    DragStartBehavior dragStartBehavior: DragStartBehavior.start
})
复制代码

scrollDirection

子组件排列方式
Axis.vertical:竖直排列(默认值)
Axis.horizontal:横向排列

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              width: 100,
              color: Colors.red
            ),
            Container(
              width: 100,
              color: Colors.blue
            ),
            Container(
              width: 100,
              color: Colors.green
            ),
            Container(
              width: 100,
              color: Colors.amberAccent
            )
          ],
        )
      )
    );
  }
}
复制代码

reverse

是否反转,默认为false

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: ListView(
          reverse: true,
          children: <Widget>[
            Container(
              height: 100,
              color: Colors.red
            ),
            Container(
              height: 100,
              color: Colors.blue
            ),
            Container(
              height: 100,
              color: Colors.green
            ),
            Container(
              height: 100,
              color: Colors.amberAccent
            )
          ],
        )
      )
    );
  }
}
复制代码

controller

滚动的控制器

ScrollController({
    double initialScrollOffset: 0.0,
    bool keepScrollOffset: true,
    String debugLabel
})
复制代码

initialScrollOffset

滚动的初始值

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: ListView(
          controller: ScrollController(
            initialScrollOffset: 50
          ),
          children: <Widget>[
            Container(
              height: 100,
              color: Colors.red
            ),
            Container(
              height: 100,
              color: Colors.blue
            ),
            Container(
              height: 100,
              color: Colors.green
            ),
            Container(
              height: 100,
              color: Colors.amberAccent
            )
          ],
        )
      )
    );
  }
}
复制代码

keepScrollOffset

每次滚动完成时记录当前滚动的偏移量,当重新创建控制器的时候会还原至记录的滚动位置。

debugLabel

toString输出中使用的标签。旨在帮助识别调试输出中的滚动控制器实例。
官方文档给出的解释,不知道怎么用。

primary

当子组件不足以滚动时,是否允许子组件在滚动方向上被滑动。

当值为false时,这个滑动效果会被禁止。

physics

BouncingScrollPhysics():滚动到边界后可以继续滚动,但是会回弹
ClampingScrollPhysics():滚动到边界后不允许继续滚动
AlwaysScrollableScrollPhysics():始终响应用户滚动
NeverScrollableScrollPhysics():禁止用户滚动

shrinkWrap

默认值为false,当值为true时滚动到顶部时禁止继续下拉,但是滚动到底部时可以继续滚动,但是会回弹。

padding

flutter笔记(三) 容器组件Container这里有介绍,不重复了。

itemExtent

Widget的大小,会覆盖子Widget本身设置的尺寸。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: ListView(
          itemExtent: 100,
          children: <Widget>[
            Container(
              height: 10,
              color: Colors.red
            ),
            Container(
              height: 100,
              color: Colors.green
            ),
          ],
        )
      )
    );
  }
}
复制代码

addAutomaticKeepAlives

是否将子组件包在AutomaticKeepAlives,在懒加载的时候如果为true,当一个子组将滚动出屏外的时候会保存之前的状态。

addRepaintBoundaries

是否将子Widget包在RepaintBoundary里,如果为true则滚动时不会重绘。

addSemanticIndexes

不知道怎么用

cacheExtent

预加载区域,设置为0时关闭预加载。

semanticChildCount

不知道怎么用+1