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

Answer 2

我没有找到好的解决方案，所以我使用了滑动面板包。

DraggableScrollableSheet拖动时每帧都会重建所有子级

2 个答案:

一般修复

针对此问题进行修复