flutter设置一个吸顶的Widget
时间: 2023-12-06 14:45:02 浏览: 53
在 Flutter 中,要实现一个吸顶的 Widget,可以使用 `SliverAppBar` 和 `CustomScrollView`。下面是一个简单的示例:
```dart
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
title: Text('吸顶的 Widget'),
),
// 在这里添加其他的 sliver widget
],
),
);
}
}
```
在上面的代码中,我们创建了一个 `CustomScrollView`,并添加了一个 `SliverAppBar`。`pinned` 属性被设置为 `true`,这样 `SliverAppBar` 就会在滚动到顶部时固定在页面顶部。
如果需要在 `SliverAppBar` 下方添加其他的 Widget,可以在 `CustomScrollView` 中添加多个 `Sliver` Widget。例如,下面的代码在 `SliverAppBar` 下方添加了一个 `SliverList`:
```dart
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
title: Text('吸顶的 Widget'),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 50,
),
),
],
),
);
}
}
```
在上面的代码中,我们添加了一个 `SliverList`,并在其中添加了 50 个 `ListTile`。这些 `ListTile` 会在页面滚动时被滚动,但是 `SliverAppBar` 会一直固定在页面顶部。