我正在使用 scrollable_positioned_list 包，并让它渲染一个大型动态列表。它运作得很好。但是，我需要我的列表有一个滚动条（类似于 this）。到目前为止，这是不可能的。
有谁知道怎么做吗？
我的代码如下：
Scrollbar(
child: ScrollablePositionedList.builder(
physics: const ClampingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
itemCount: posts.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return Container(
height: 200,
color: Colors.green,
child: const Center(
child: Text('post content'),
),
);
} else if (posts[index - 1].isRoot) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 15),
margin: const EdgeInsets.symmetric(vertical: 5),
color: Colors.redAccent,
child: Text('ROOT COMMENT, index: ${index - 1}'),
);
} else {
return Container(
padding: const EdgeInsets.symmetric(vertical: 15),
margin: const EdgeInsets.symmetric(vertical: 5),
color: Colors.lightBlueAccent,
child: Text('Threaded comment, index: ${index - 1}'),
);
}
},
itemScrollController: itemScrollController,
itemPositionsListener: itemPositionsListener,
),
),
我意识到
ScrollBarScrollControllerScrollablePositionedListScrollController使用提供的解决方案运行项目后，我的终端出现错误（其中一小段）：
Performing hot restart...
../../tools/flutter/.pub-cache/git/flutter.widgets-6
d6dac5f19b577338d912d3c9a45d26593e0a475/packages/scr
ollable_positioned_list/lib/src/scrollable_positione
d_list.dart:437:24: Warning: Operand of null-aware
operation '!' has type 'SchedulerBinding' which
excludes null.
Performing hot restart...
- 'SchedulerBinding' is from
'package:flutter/src/scheduler/binding.dart'
('../../tools/flutter/packages/flutter/lib/src/sche
duler/binding.dart').
Performing hot restart...
SchedulerBinding.instance!.addPostFrameCallbac
k((_) {
Performing hot restart...
^
Performing hot restart...
../../tools/flutter/.pub-cache/git/flutter.widgets-6
d6dac5f19b577338d912d3c9a45d26593e0a475/packages/scr
ollable_positioned_list/lib/src/scrollable_positione
d_list.dart:484:26: Warning: Operand of null-aware
operation '!' has type 'SchedulerBinding' which
excludes null.
Performing hot restart...
- 'SchedulerBinding' is from
'package:flutter/src/scheduler/binding.dart'
('../../tools/flutter/packages/flutter/lib/src/sche
duler/binding.dart').
Performing hot restart...
SchedulerBinding.instance!.addPostFrameCallb
ack((_) {
Performing hot restart...
^
Performing hot restart...
../../tools/flutter/.pub-cache/git/flutter.widgets-6
d6dac5f19b577338d912d3c9a45d26593e0a475/packages/scr
ollable_positioned_list/lib/src/positioned_list.dart
:298:24: Warning: Operand of null-aware operation
'!' has type 'SchedulerBinding' which excludes null.
Performing hot restart...
- 'SchedulerBinding' is from
'package:flutter/src/scheduler/binding.dart'
('../../tools/flutter/packages/flutter/lib/src/sche
duler/binding.dart').
Performing hot restart...
SchedulerBinding.instance!.addPostFrameCallbac
k((_) {
Performing hot restart...
^
Performing hot restart...
Restarted application in 195ms.
修复警告（回复评论）后，现在使用它时会随机发生：
The following assertion was thrown while notifying status listeners for AnimationController:
The Scrollbar's ScrollController has no ScrollPosition attached.
A Scrollbar cannot be painted without a ScrollPosition.
The Scrollbar attempted to use the provided ScrollController. This ScrollController should be
associated with the ScrollView that the Scrollbar is being applied to. When providing your
own
ScrollController, ensure both the Scrollbar and the Scrollable widget use the same one.
When the exception was thrown, this was the stack:
#0 RawScrollbarState._debugCheckHasValidScrollPosition.<anonymous closure>
(package:flutter/src/widgets/scrollbar.dart:1475:9)
#1 RawScrollbarState._debugCheckHasValidScrollPosition
(package:flutter/src/widgets/scrollbar.dart:1500:6)
#2 RawScrollbarState._validateInteractions
(package:flutter/src/widgets/scrollbar.dart:1445:14)
#3 AnimationLocalStatusListenersMixin.notifyStatusListeners
(package:flutter/src/animation/listener_helpers.dart:233:19)
#4 AnimationController._checkStatusChanged
(package:flutter/src/animation/animation_controller.dart:815:7)
#5 AnimationController._startSimulation
(package:flutter/src/animation/animation_controller.dart:749:5)
#6 AnimationController._animateToInternal
(package:flutter/src/animation/animation_controller.dart:612:12)
#7 AnimationController.reverse
(package:flutter/src/animation/animation_controller.dart:494:12)
#8 RawScrollbarState._maybeStartFadeoutTimer.<anonymous closure>
(package:flutter/src/widgets/scrollbar.dart:1630:37)
(elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and
dart:async-patch)
The AnimationController notifying status listeners was:
AnimationController#72402(◀ 1.000)
使用
ScrollConfigurationvoid main(List<String> args) {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: ScrollConfiguration(
behavior: _ScrollbarBehavior(),
child: ScrollablePositionedList.builder(
itemCount: 100,
itemBuilder: (context, index) => ListTile(title: Text('$index')),
),
),
),
),
);
}
class _ScrollbarBehavior extends ScrollBehavior {
@override
Widget buildScrollbar(BuildContext context, Widget child, ScrollableDetails details) {
return Scrollbar(child: child, controller: details.controller);
}
}
你可以修改，但应用
bug时仍然有一些
ScrollController
尝试一些来自issue#305的替代方案，它不够好，但你可以应用它。
final ItemScrollController itemSctr = ItemScrollController();
...
body: Scrollbar(
controller: itemSctr.scrollController,
child: ScrollablePositionedList.builder(
任何需要它的人都可以使用这个存储库来访问scrollController。这只能在 pubspec.yaml 中完成
scrollable_positioned_list:
git:
url: https://github.com/nabil6391/flutter.widgets.git
ref: master
path: packages/scrollable_positioned_list/
结果
Scrollbar(
thickness: 8,
radius: Radius.circular(4),
controller: itemScrollController.scrollController,
child: ScrollablePositionedList.builder(
itemCount: totalItems,
itemScrollController: itemScrollController,
itemBuilder: (context, index) {
return Container(
color: getItemColor(index, context),
child: buildDropdownList(context, index),
);
},
),
)