美文网首页
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