Flutter 创建类似material 联动滚动 NestedScrollView

最新推荐文章于 2024-09-06 22:59:52 发布

weixin_33998125

最新推荐文章于 2024-09-06 22:59:52 发布

阅读量1.2k

点赞数

文章标签：移动开发

原文链接：https://juejin.im/post/5ce2269751882525ba0dcb1c

版权

效果图

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: <Widget>[
                  Flexible(
                    flex: 1,
                    fit: FlexFit.tight,
                    child: ListView(
                      children: _getItem(),
                    ),
                  )
                ],
              ),
              headerSliverBuilder:
                  (BuildContext context, bool innerBoxIsScrolled) {
                return <Widget>[
                  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…