Flutter NestedScrollView 内嵌视图滚动行为一致
在Flutter中,NestedScrollView 是一个支持嵌套滚动的ScrollView,它可以管理内部和外部滚动事件的一致性。以下是一个简单的使用NestedScrollView的例子:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: NestedScrollViewDemo(),
);
}
}
class NestedScrollViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text('NestedScrollView Demo'),
expandedHeight: 200.0,
floating: false,
pinned: true,
snap: true,
),
];
},
body: ListView.builder(
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
),
);
}
}
在这个例子中,NestedScrollView 使用 headerSliverBuilder
来构建一个SliverAppBar作为固定头部。而ListView作为滚动区域的主要内容。当你滚动整个NestedScrollView时,你会看到SliverAppBar固定在顶部,而ListView的内容会继续滚动。这种布局模式在设计具有顶部标题栏或其他固定头部的页面时非常有用。
评论已关闭