[英]Flutter Exception: ScrollController attached to multiple scroll views
我的 Flutter 应用程序在离开具有用于控制NestedScrollView
的ScrollController
的页面时抛出异常(ScrollController 附加到多个滚动视图),我不确定我做错了什么。
我用下面的一个简单示例重新创建了异常。 我可以从FirstPage
导航到SecondPage
(并可选择返回)就好了,但是当我从SecondPage
导航到ThirdPage
时,会抛出异常。 SecondPage
是包含我的自定义CollapsingAppBarPage
小部件的页面,我认为它有问题。 CollapsingAppBarPage
在此示例中得到简化,但在我的真实应用程序中,它根据滚动条 position 更改组件的颜色/大小。在此示例中,当导航开始到_scrollController.offset
时调用 _scrollController.offset 时会发生ThirdPage
。 另外,我知道 FirstPage 和 ThirdPage 可以是 Stateless 而不是 StatefulWidgets,但我想让它尽可能像我的应用程序。 这是我的完整示例。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: FirstPage(),
);
}
}
class FirstPage extends StatefulWidget {
@override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Page"),
),
body: Center(
child: RaisedButton(
child: Text("Navigate Next"),
onPressed: () async {
await Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondPage())
);
},
),
),
);
}
}
class SecondPage extends StatefulWidget {
@override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
@override
Widget build(BuildContext context) {
return Material(
child: CollapsingAppBarPage(
titleText: "Second Page",
bodyCreator: (context) {
return ListView(
children: <Widget>[
Center(
child: RaisedButton(
child: Text("Navigate Next"),
onPressed: () async {
await Navigator.push(context,
MaterialPageRoute(builder: (context) => ThirdPage())
);
},
),
)
],
);
},
),
);
}
}
class ThirdPage extends StatefulWidget {
@override
_ThirdPageState createState() => _ThirdPageState();
}
class _ThirdPageState extends State<ThirdPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Third Page")
),
body: Container()
);
}
}
typedef CollapsingAppBarBodyCreator = Widget Function(BuildContext context);
class CollapsingAppBarPage extends StatefulWidget {
final String titleText;
final CollapsingAppBarBodyCreator bodyCreator;
CollapsingAppBarPage({
Key key,
this.titleText,
@required this.bodyCreator,
}) : super(key: key);
@override
_CollapsingAppBarPageState createState() => _CollapsingAppBarPageState();
}
class _CollapsingAppBarPageState extends State<CollapsingAppBarPage> {
static const _kExpandedHeight = 200.0;
ScrollController _scrollController;
@override
void initState() {
super.initState();
_scrollController = ScrollController()
..addListener(() {
setState(() {
// force a refresh so the app bar can be updated
});
});
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return NestedScrollView(
controller: _scrollController,
headerSliverBuilder: _createSliverAppBar,
body: widget.bodyCreator(context),
);
}
List<Widget> _createSliverAppBar(BuildContext context, bool innerBoxIsScrolled) {
// change the icon color as the page scrolls
var collapsePercent = _getAppBarCollapsePercent();
int rgb = ((1.0 - collapsePercent) * 255).round();
var color = Color.fromARGB(255, rgb, rgb, rgb);
return <Widget>[
SliverAppBar(
expandedHeight: _kExpandedHeight,
pinned: true,
iconTheme: IconThemeData(color: color),
title: Text(widget.titleText),
)
];
}
double _getAppBarCollapsePercent() {
if (!_scrollController.hasClients)
return 0.0;
return (_scrollController.offset / (_kExpandedHeight - kToolbarHeight)).clamp(0.0, 1.0);
}
}
这是异常的截断跟踪:
flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown building Builder(dirty):
flutter: ScrollController attached to multiple scroll views.
flutter: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 111 pos 12:
flutter: '_positions.length == 1'
flutter:
flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
flutter: more information in this error message to help you determine and fix the underlying cause.
flutter: In either case, please report this assertion by filing a bug on GitHub:
flutter: https://github.com/flutter/flutter/issues/new?template=BUG.md
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #2 ScrollController.position (package:flutter/src/widgets/scroll_controller.dart:111:12)
flutter: #3 ScrollController.offset (package:flutter/src/widgets/scroll_controller.dart:118:24)
flutter: #4 _CollapsingAppBarPageState._getAppBarCollapsePercent (package:flutter_scroll_test/main.dart:160:31)
flutter: #5 _CollapsingAppBarPageState._createSliverAppBar (package:flutter_scroll_test/main.dart:142:27)
flutter: #6 NestedScrollView._buildSlivers (package:flutter/src/widgets/nested_scroll_view.dart:271:20)
flutter: #7 _NestedScrollViewState.build.<anonymous closure> (package:flutter/src/widgets/nested_scroll_view.dart:347:29)
flutter: #8 Builder.build (package:flutter/src/widgets/basic.dart:5736:41)
flutter: #9 StatelessElement.build (package:flutter/src/widgets/framework.dart:3774:28)
flutter: #10 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3721:15)
如果在您的情况下,同一视图上有许多 ListView,您也会收到此错误。 要解决它,您只需将以下属性添加到每个 listView 构建器中:
controller: ScrollController(),
之后您将拥有:
ListView.builder(
controller: ScrollController(),//just add this line
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
来源是这个链接:点击这里
不要直接使用_scrollController.offset
作为推送路线,显然附加了一个滚动位置,以便在您再次弹出时接近滚动时检索
所以我们需要把它转换成一个状态
这是完整的修订代码。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: FirstPage(),
);
}
}
class FirstPage extends StatefulWidget {
@override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Page"),
),
body: Center(
child: RaisedButton(
child: Text("Navigate Next"),
onPressed: () async {
await Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondPage())
);
},
),
),
);
}
}
class SecondPage extends StatefulWidget {
@override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
@override
Widget build(BuildContext context) {
return Material(
child: CollapsingAppBarPage(
titleText: "Second Page",
bodyCreator: (context) {
return ListView(
children: <Widget>[
Center(
child: RaisedButton(
child: Text("Navigate Next"),
onPressed: () async {
await Navigator.push(context,
MaterialPageRoute(builder: (context) => ThirdPage())
);
},
),
)
],
);
},
),
);
}
}
class ThirdPage extends StatefulWidget {
@override
_ThirdPageState createState() => _ThirdPageState();
}
class _ThirdPageState extends State<ThirdPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Third Page")
),
body: Container()
);
}
}
typedef CollapsingAppBarBodyCreator = Widget Function(BuildContext context);
class CollapsingAppBarPage extends StatefulWidget {
final String titleText;
final CollapsingAppBarBodyCreator bodyCreator;
CollapsingAppBarPage({
Key key,
this.titleText,
@required this.bodyCreator,
}) : super(key: key);
@override
_CollapsingAppBarPageState createState() => _CollapsingAppBarPageState();
}
class _CollapsingAppBarPageState extends State<CollapsingAppBarPage> {
static const _kExpandedHeight = 200.0;
ScrollController _scrollController;
//Offset state <-------------------------------------
double offset = 0.0 ;
@override
void initState() {
super.initState();
//print("init state is called");
_scrollController = ScrollController() //keepScrollOffset: false removed
..addListener(() {
setState(() {
//<-----------------------------
offset = _scrollController.offset;
// force a refresh so the app bar can be updated
});
});
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return NestedScrollView(
controller: _scrollController,
headerSliverBuilder: _createSliverAppBar,
body: widget.bodyCreator(context),
);
}
List<Widget> _createSliverAppBar(BuildContext context, bool innerBoxIsScrolled) {
// change the icon color as the page scrolls
print("_createSliverAppBar is called");
var collapsePercent = _getAppBarCollapsePercent();
int rgb = ((1.0 - collapsePercent) * 255).round();
var color = Color.fromARGB(255, rgb, rgb, rgb);
return <Widget>[
SliverAppBar(
expandedHeight: _kExpandedHeight,
pinned: true,
iconTheme: IconThemeData(color: color),
title: Text(widget.titleText),
)
];
}
double _getAppBarCollapsePercent() {
if (!_scrollController.hasClients ){
print("positions is ${_scrollController.positions.length}");
return 0.0;
}
//print("offset is${_scrollController.offset} and positions is ${_scrollController.positions.length}");
return (offset / (_kExpandedHeight - kToolbarHeight)).clamp(0.0, 1.0);
}
}
问题是_scrollController.position
或_scrollController.offset
无论您在哪里调用_scrollController.position
都将其替换为_scrollController.positions.last
,而无论您在哪里调用_scrollController.offset
都将其替换为_scrollController.positions.last.pixels
你会'没有任何错误。
实际上问题正在发生,因为它在_scrollController
的positions
列表中添加了新元素,我在_scrollController.position
scroll_controller.dart
scrollcontroller.positions.single
和_scrollController.offset
返回_scrollController.position.pixels
这就是为什么我们面对这个问题。
但是如果你使用_scrollController.positions.last
它将返回最后保存的位置元素,这样你的应用程序就会顺利运行并且不会抛出任何错误。
您需要在_getAppBarCollapsePercent()
中添加另一个条件
double _getAppBarCollapsePercent() {
if (!_scrollController.hasClients || _scrollController.positions.length > 1)
return 0.0;
return (_scrollController.offset / (_kExpandedHeight - kToolbarHeight)).clamp(0.0, 1.0);
}
如果控制器控制多个可滚动,控制器不能给出偏移量。
解决方案是使用属性primary: false
标记适当的ScrollView ,即( ListView、SingleChildScrollView、CustomScrollView等),这样您就只剩下一个主 ScrollView
对于使用SingleScrollView
的人
final ScrollController _scrollController = ScrollController();
Expanded(
child: Scrollbar(
controller: _scrollController,
thumbVisibility: true,
child: SingleChildScrollView(
controller: _scrollController,
child: _mainView(context),
)
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.