美文网首页
flutter CustomeScrollView的用法

flutter CustomeScrollView的用法

作者: kot_flu | 来源:发表于2019-04-22 15:16 被阅读0次

CustomeScrollView的基本用法

child: new CustomScrollView(
        physics: ScrollPhysics(),
        shrinkWrap: true,
        slivers: <Widget>[
          SliverToBoxAdapter(
            //横向列表
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: new Row(
                children: <Widget>[
                  new Container(
                    alignment: AlignmentDirectional.center,
                    height: 100,width: 200,
                    color: Colors.red,
                    child: new Text("1"),
                  ),new Container(
                    alignment: AlignmentDirectional.center,
                    height: 100,width: 200,
                    color: Colors.black,
                    child: new Text("2"),
                  ),new Container(
                    alignment: AlignmentDirectional.center,
                    height: 100,width: 200,
                    color: Colors.green,
                    child: new Text("3"),
                  )

                ],
              ),
            ),
          ),

          SliverList(
              delegate: new SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                    return new Container(
                      alignment: Alignment.center,
                      color: Colors.lightBlue[100 * (index % 9)],
                      child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                            child: new Text('grid item $index'),
                      ),
                    );
                  }, childCount: 30 //50个列表项
              ),
          ),
          new SliverPadding(
            padding: EdgeInsets.all(2),
            sliver: SliverToBoxAdapter(
              child: desWidget,
            ),
          ),
          //AppBar,包含一个导航栏
          SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text('Demo'),
              background: Image.asset(
                "./images/avatar.png",
                fit: BoxFit.cover,
              ),
            ),
          ),
//          new SliverPadding(padding: EdgeInsets.all(2),
//            sliver: SliverList(
//              delegate: new S,
//            ),),
          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.cyan[100 * (index % 9)],
                    child: new Text('grid item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ),
          //List
          new SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              //创建列表项
              return new Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: new Text('list item $index'),
              );
            }, childCount: 50 //50个列表项
                ),
          ),
        ],
      ),

效果如下


记好.jpg

相关文章

网友评论

      本文标题:flutter CustomeScrollView的用法

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