我正在尝试使用 2 个嵌套的可滚动列表来实现 DraggableScrollableSheet。
我不能使用开箱即用的 NestedScrollView 类(我已经尝试过了,但我无法让它工作,因为它似乎是为一个前面的标题条和只有一个可滚动列表制作的)。
我使用 CustomScrollView 类的方法通常似乎有效,但不幸的是它带来了另一个问题:
每次用户拖动工作表时,每帧都重建所有条子 .这是非常缓慢的。
我打开了一个简单的测试用例来排除它不是任何复杂小部件-/提供者-/消费者-等逻辑的错误。
即使使用这些简单的小部件,所有条子每帧都会重建一次......
这是框架中的错误还是我在这里做错了什么?
非常感谢你...
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: DraggableScrollableActuator(child: MyHomePage(title: 'Flutter Demo Home Page')),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
Tween<Offset> _tween = Tween(begin: Offset(0, 1), end: Offset(0, 0));
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(children: [
SlideTransition(
position: _tween.animate(_controller),
child: MyPopUpSheet(),
),
Center(
child: IconButton(
icon: const Icon(Icons.info),
onPressed: () {
setState(() {
if (_controller.isDismissed)
_controller.forward();
else if (_controller.isCompleted) _controller.reverse().then((value) => _controller.reset());
});
}),
),
]));
}
}
class MyPopUpSheet extends StatelessWidget {
ScrollController _scrollController; //Needed for
@override
Widget build(BuildContext context) {
print("MyPopUpSheet.build()");
return Material(
elevation: 4,
shadowColor: Colors.orange,
child: DraggableScrollableSheet(
expand: true,
initialChildSize: 0.4,
minChildSize: 0.4,
maxChildSize: 1.0,
builder: (ctx, scrollController) {
_scrollController = scrollController;
return CustomScrollView(
shrinkWrap: true,
controller: _scrollController,
slivers: [
SliverToBoxAdapter(child: Test(Colors.deepOrange)),
SliverToBoxAdapter(child: Test(Colors.red)),
SliverToBoxAdapter(child: Test(Colors.green)),
SliverToBoxAdapter(child: Test(Colors.purpleAccent)),
SliverToBoxAdapter(child: Test(Colors.amberAccent))
],
);
},
),
);
}
}
class Test extends StatelessWidget {
final Color color;
Test(this.color);
@override
Widget build(BuildContext context) {
print("Test.build()");
return Container(height: 100, color: color);
}
}
最佳答案
我遇到了同样的问题,并找到了一种解决方法,它不会停止重建,但会缓存子项并修复滚动卡顿。有效的是,将小部件存储在构建器中的变量中并从构建器返回该变量。
一般修复
var child;
return DraggableScrollableSheet(
expand: true,
initialChildSize: 0.4,
minChildSize: 0.4,
maxChildSize: 1.0,
builder: (ctx, scrollController) {
if(child == null) {
child = SomeWidget();
}
return child;
}
);
修复特定于此问题var child;
return DraggableScrollableSheet(
expand: true,
initialChildSize: 0.4,
minChildSize: 0.4,
maxChildSize: 1.0,
builder: (ctx, scrollController) {
if(child == null) {
child = CustomScrollView(
shrinkWrap: true,
controller: _scrollController,
slivers: [
SliverToBoxAdapter(child: Test(Colors.deepOrange)),
SliverToBoxAdapter(child: Test(Colors.red)),
SliverToBoxAdapter(child: Test(Colors.green)),
SliverToBoxAdapter(child: Test(Colors.purpleAccent)),
SliverToBoxAdapter(child: Test(Colors.amberAccent))
],
);
}
return child;
}
);
关于flutter - DraggableScrollableSheet 在拖动时每帧重建所有子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64101774/