Flutter nestedscrollview TabView 滚动到列表某一项
时间: 2023-09-02 09:06:12 浏览: 68
要实现 Flutter NestedScrollView 和 TabView 滚动到列表某一项,可以使用 ScrollController 和 TabController 来实现。
步骤如下:
1. 在 NestedScrollView 中添加 controller 属性,用于监听滚动事件。
2. 在 TabView 中添加 controller 属性,用于控制 Tab 切换。
3. 在列表中添加 controller 属性,用于监听列表滚动事件。
4. 在 TabView 中添加 onTap 属性,用于监听 Tab 切换事件。
5. 在 onTap 事件中,使用 ScrollController 和 TabController 来控制列表和 TabView 的滚动和切换。
具体实现细节可以参考以下代码:
```dart
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> with SingleTickerProviderStateMixin {
TabController _controller;
ScrollController _scrollController;
List _tabs = ['Tab1', 'Tab2', 'Tab3', 'Tab4', 'Tab5'];
List<Widget> _tabViews = [];
@override
void initState() {
super.initState();
_controller = TabController(length: _tabs.length, vsync: this);
_scrollController = ScrollController();
for (int i = 0; i < _tabs.length; i++) {
_tabViews.add(ListView.builder(
controller: _scrollController,
itemCount: 50,
itemBuilder: (context, index) {
return ListTile(
title: Text('${_tabs[i]} - Item $index'),
);
},
));
}
}
@override
void dispose() {
_controller.dispose();
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverAppBar(
title: Text('NestedScrollView'),
pinned: true,
floating: true,
snap: true,
bottom: TabBar(
controller: _controller,
tabs: _tabs.map((tab) => Tab(text: tab)).toList(),
),
),
];
},
body: TabBarView(
controller: _controller,
children: _tabViews,
),
),
);
}
}
```
以上代码中,我们使用了一个 List 来存储 Tab 标题,使用 for 循环来创建 TabView,每个 TabView 都是一个 ListView,通过传入不同的数据来区分不同的 TabView,同时在 ListView 中添加了 controller 属性来监听列表滚动事件。
在 TabBar 中添加了 onTap 属性,当 Tab 切换时,使用 _controller.animateTo() 方法来控制 TabView 的滚动位置,同时也使用 _scrollController.animateTo() 方法来控制列表的滚动位置。
这样就可以实现在 NestedScrollView 和 TabView 中滚动到列表某一项的效果了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)