flutter - DraggableScrollableSheet 在拖动时每帧重建所有子项

Question

我正在尝试使用 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);
  }
}

Answer 1

我遇到了同样的问题，并找到了一种解决方法，它不会停止重建，但会缓存子项并修复滚动卡顿。有效的是，将小部件存储在构建器中的变量中并从构建器返回该变量。
一般修复

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;
  }
);