Flutter BoxScrollView


简介

使用单个子布局模型的ScrollView

  • ListView:一个使用的线性布局的BoxScrollView
  • GridView:一个使用二维布局模型的BoxScrollView
  • CustomScrollView:可以将多个子布局模型组合到一个滚动视图中

基本用法

由于是抽象类,所以不能直接实例化

  • 如上简介,我们可以写一个类继承BoxScrollView
  • Demo中,演示ListView的部分源码,用以实现继承BoxScrollView的代码编写,效果和ListView并无两样

实例演示

import 'package:flutter/material.dart';

import 'package:flutter/rendering.dart';

class BoxScrollViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Text('滚动一下就看看吧 s( ̄▽ ̄)~*'),
          Container(
            height: 300.0,
            child: ListViewDemo(
              children: <Widget>[
                BoxItem(),
                BoxItem(),
                BoxItem(),
                BoxItem(),
                BoxItem(),
                BoxItem(),
                BoxItem(),
                BoxItem(),
                BoxItem(),
              ],
            ),
          )
        ],
      ),
    );
  }
}

class BoxItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60.0,
      margin: const EdgeInsets.symmetric(vertical: 20.0),
      color: Theme.of(context).primaryColor,
      child: Text(
        '测试继承BoxScrollView',
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

class ListViewDemo extends BoxScrollView {
  // 构造函数
  ListViewDemo({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    this.itemExtent,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
  })  : childrenDelegate = SliverChildListDelegate(
          children,
          addAutomaticKeepAlives: addAutomaticKeepAlives,
          addRepaintBoundaries: addRepaintBoundaries,
          addSemanticIndexes: addSemanticIndexes,
        ),
        super(
          key: key,
          scrollDirection: scrollDirection,
          reverse: reverse,
          controller: controller,
          primary: primary,
          physics: physics,
          shrinkWrap: shrinkWrap,
          padding: padding,
          cacheExtent: cacheExtent,
          semanticChildCount: semanticChildCount ?? children.length,
        );

  final double itemExtent;
  final SliverChildDelegate childrenDelegate;

// 子类应重写此方法以构建布局模型。
  @override
  Widget buildChildLayout(BuildContext context) {
    if (itemExtent != null) {
      return SliverFixedExtentList(
        delegate: childrenDelegate,
        itemExtent: itemExtent,
      );
    }
    return SliverList(delegate: childrenDelegate);
  }
}