美文网首页Flutter
Flutter(二十六)CustomScrollView

Flutter(二十六)CustomScrollView

作者: 天色将变 | 来源:发表于2019-07-18 18:22 被阅读1次
解决的问题

当一个页面中,既有GridView 又有ListView,不能进行统一滑动时,二者有各自的滑动区域。CustomScrollView可以将二者结合起来,一起滑动。

CustomScrollView关键属性
  • slivers: <Widget>[],将Silver化的GridView与ListView扔到里面即可。
SliverGrid,Silver化的GridView

const SliverGrid({
Key key,
@required SliverChildDelegate delegate,// 构建每个item的widget
@required this.gridDelegate,//计算每行/列的个数算法
})

SliverFixedExtentList,Sliver化的ListView

SliverFixedExtentList({
Key key,
@required SliverChildDelegate delegate, //构建每个item的widget
@required this.itemExtent,//指定行高
})


image.png
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: new SliverGrid(
              //Grid
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, //Grid按两列显示
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  //创建子widget
                  return new Container(
                    alignment: Alignment.center,
                    color: Colors.orange[100 * (index % 9)],
                    child: new Text('grid item $index'),
                  );
                },
                childCount: 10,
              ),
            ),
          ),
          //List
          new SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              //创建列表项
              return new Container(
                alignment: Alignment.center,
                color: Colors.green[100 * (index % 9)],
                child: new Text('list item $index'),
              );
            }, childCount: 5 //10个列表项
                ),
          ),
          new SliverGrid(
            //Grid
            gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 113, //Grid按两列显示
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: new SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                //创建子widget
                return new Container(
                  alignment: Alignment.center,
                  color: Colors.yellow[100 * (index % 9)],
                  child: new Text('grid item $index'),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

相关文章

网友评论

    本文标题:Flutter(二十六)CustomScrollView

    本文链接:https://www.haomeiwen.com/subject/cfrrlctx.html