美文网首页Flutter教学
Flutter(76):Sliver组件之SliverProto

Flutter(76):Sliver组件之SliverProto

作者: starryxp | 来源:发表于2020-10-30 10:45 被阅读0次

    Flutter教学目录持续更新中

    Github源代码持续更新中

    1.SliverPrototypeExtentList介绍

    可以依照提供的widget来约束Item高度的SliverList

    2.SliverPrototypeExtentList属性

    • delegate:SliverChildDelegate
    • prototypeItem:widget 以这个组件的主轴方向的高度来约束其他的item的高度

    3.使用

    与SliverList的区别不大:Flutter(72):Sliver组件之SliverList

      _mySliverAppBar() {
        return SliverAppBar(
          title: Text('SliverPrototypeExtentList'),
          expandedHeight: 250,
          flexibleSpace: FlexibleSpaceBar(
            background: Image.network(
              ImageUrlConstant.imageUrl1,
              fit: BoxFit.cover,
            ),
            collapseMode: CollapseMode.parallax,
          ),
        );
      }
    
      _mySliverChildBuilderDelegate() {
        return SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Container(
              height: 80,
              color: Colors.primaries[index % 11],
            );
          },
          childCount: 30,
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.white,
          child: CustomScrollView(
            slivers: [
              _mySliverAppBar(),
              SliverPrototypeExtentList(
                delegate: _mySliverChildBuilderDelegate(),
                prototypeItem: Container(
                  height: 150,
                ),
              ),
            ],
          ),
        );
      }
    
    image.png

    下一节:Sliver组件之SliverToBoxAdapter

    Flutter(77):Sliver组件之SliverToBoxAdapter

    Flutter教学目录持续更新中

    Github源代码持续更新中

    相关文章

      网友评论

        本文标题:Flutter(76):Sliver组件之SliverProto

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