07_Flutter使用NestedScrollView+TabBarView滚动位置共享问题修复
warning:
这篇文章距离上次修改已过183天,其中的内容可能已经有所变动。
import 'package:flutter/material.dart';
class NestedScrollViewWithTabBarExample extends StatefulWidget {
@override
_NestedScrollViewWithTabBarExampleState createState() => _NestedScrollViewWithTabBarExampleState();
}
class _NestedScrollViewWithTabBarExampleState extends State<NestedScrollViewWithTabBarExample> with SingleTickerProviderStateMixin {
final List<Tab> myTabs = <Tab>[
Tab(text: 'TAB1'),
Tab(text: 'TAB2'),
];
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: myTabs.length);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text('NestedScrollView with TabBar'),
floating: true,
snap: true,
pinned: true,
bottom: TabBar(
controller: _tabController,
tabs: myTabs,
),
),
];
},
body: TabBarView(
controller: _tabController,
children: myTabs.map((Tab tab) {
return SafeArea(
top: false,
child: Builder(
builder: (BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverPadding(
padding: const EdgeInsets.all(15.0),
sliver: SliverList(
delegate: SliverChildListDelegate([
Text(tab.text),
// ...更多内容
]),
),
),
],
);
},
),
);
}).toList(),
),
),
);
}
}
这段代码修复了原始代码中的滚动位置共享问题,通过使用TabController
来控制TabBarView
的滚动,确保每个Tab
的滚动位置是独立的。同时,使用CustomScrollView
代替了ListView
,以便可以嵌套在NestedScrollView
中。
评论已关闭