美文网首页
24.Slivers的组合使用

24.Slivers的组合使用

作者: 凯司机 | 来源:发表于2020-06-10 15:36 被阅读0次

这里我使用官方的示例程序,将SliverAppBar+SliverGrid+SliverFixedExtentList做出如下界面:

classHomeContentextendsStatelessWidget{

  @override

  Widget build(BuildContext context) {

    return showCustomScrollView();

  }

  Widget showCustomScrollView() {

    returnnew CustomScrollView(

      slivers: <Widget>[

        const SliverAppBar(

          expandedHeight: 250.0,

          flexibleSpace: FlexibleSpaceBar(

            title: Text('Coderwhy Demo'),

            background: Image(

              image: NetworkImage(

                "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg",

              ),

              fit: BoxFit.cover,

            ),

          ),

        ),

        new SliverGrid(

          gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(

            maxCrossAxisExtent: 200.0,

            mainAxisSpacing: 10.0,

            crossAxisSpacing: 10.0,

            childAspectRatio: 4.0,

          ),

          delegate: new SliverChildBuilderDelegate(

                (BuildContext context, int index) {

              returnnew Container(

                alignment: Alignment.center,

                color: Colors.teal[100 * (index % 9)],

                child: new Text('grid item$index'),

              );

            },

            childCount: 10,

          ),

        ),

        SliverFixedExtentList(

          itemExtent: 50.0,

          delegate: SliverChildBuilderDelegate(

                (BuildContext context, int index) {

              returnnew Container(

                alignment: Alignment.center,

                color: Colors.lightBlue[100 * (index % 9)],

                child: new Text('list item$index'),

              );

            },

            childCount: 20

          ),

        ),

      ],

    );

  }

}

相关文章

网友评论

      本文标题:24.Slivers的组合使用

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