Flutter 创建类似material 联动滚动 NestedScrollView

效果图

1.外层包裹 -NestedScrollView(

--children: ListView()//创建几个item

//这个headerSliverBuilder是必须的 这个Widget[]目前测试好像是 只能SliverAppBar或者Appbar

--headerSliverBuilder:(BuildContext context, bool innerBoxIsScrolled){//创建SliverAppBar ```

SliverAppBar(
                expandedHeight: 214,
                flexibleSpace: FlexibleSpaceBar(
                  background: Container(
                    width: double.infinity,
                    height: 214,
                    child: Image(
                      image: NetworkImage('http://img.ring.51app.cn/small/51/1430938641998.jpg'),
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                ),
              ),

```
复制代码

} )

完整代码:

 NestedScrollView(
              body: new Column(
                children: [
                  Flexible(
                    flex: 1,
                    fit: FlexFit.tight,
                    child: ListView(
                      children: _getItem(),
                    ),
                  )
                ],
              ),
              headerSliverBuilder:
                  (BuildContext context, bool innerBoxIsScrolled) {
                return [
                  SliverAppBar(
                    expandedHeight: 214,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Container(
                        width: double.infinity,
                        height: 214,
                        child: Image(
                          image: NetworkImage('http://img.ring.51app.cn/small/51/1430938641998.jpg'),
                          fit: BoxFit.fitWidth,
                        ),
                      ),
                    ),
                  ),
                ];
              },
              controller: ScrollController(),
            )
复制代码

官方教程上很清楚的: api.flutter.dev/flutter/wid…