Flutter|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(),
)
复制代码 【Flutter|Flutter 创建类似material 联动滚动 NestedScrollView】官方教程上很清楚的: api.flutter.dev/flutter/wid…
推荐阅读
- django-前后端交互
- 一个健康的APP和健全的人格大体类似
- IDEA|IDEA 创建工程
- Flutter的ListView
- 创建缔造完美教室，让每一间教室都闪闪发光
- 运用flutter|运用flutter 构建一个发布版（release）APK
- Flutter自定义view|Flutter自定义view —— 闯关进度条
- Servlet原理|Servlet原理 二（Web应用与创建Servlet实例）
- Flutter|Flutter SwiftUI React 对比
- 企业为什么要融资