flutter 嵌套滑动
时间: 2024-08-06 21:00:45 浏览: 73
Flutter 中嵌套滑动通常是指在一个界面中有两个或以上的滑动手势区域可以同时进行滚动操作。这通常发生在 List 或 Grid 等布局中,比如长列表下方有一个侧边栏导航。在 Flutter 中,我们可以利用 `SliverList` 和 `SliverGrid` 结合 `ScrollableWidget`(如 `NestedScrollView`、`CustomScrollView`)来实现这样的效果。
`NestedScrollView` 提供了一个易于管理的容器,它允许内部的 `Slivers`(如 `SliverChildListDelegate` 或 `SliverGridDelegate`) 和外部的滚动视图相互作用。你可以设置一个 `NestedScrollView` 的 primary 直接滚动,而 secondary 则用于侧面滚动。
下面是一个简单的示例:
```dart
NestedScrollView(
axis: Axis.vertical, // 主轴滚动
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverOverlapAbsorber(
handle: _handle,
child: SliverAppBar(
title: Text('标题'),
actions: [],
),
),
];
},
body: Column(
children: [
SliverToBoxAdapter(
child: Container(height: 500), // 长列表或内容区域
),
SliverPadding(
padding: EdgeInsets.all(8),
sliver: SliverList(
delegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 水平网格列数
mainAxisSpacing: 16,
crossAxisSpacing: 16,
),
children: List.generate(10, (index) => Card()), // 导航卡片
),
),
],
),
);
```
在这个例子中,`_handle` 是 `NestedScrollView` 的内部滚动范围,当用户滚动主列表时,它会自动调整侧边栏的可见区域。
相关推荐
![pt](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)