繁体   English   中英

Flutter:到达嵌套列表视图的底部时继续在顶部列表视图中滚动

[英]Flutter: Continue scrolling in top Listview when reaching bottom of nested Listview

我希望创建以下内容:当到达内部 Listview 的顶部或底部时,我想继续在顶部 Listview 中滚动。 见动图:

到目前为止我得到的 Gif

一个选项是在到达底部时将内部 Listview 的物理设置为 NeverScrollablePhysics(使用控制器的监听器),但是如果您想再次向上滚动,这将不起作用。

请参阅下面的代码,提前致谢!

class TestAppHomePage extends StatefulWidget {
@override
TestAppHomePageState createState() => new TestAppHomePageState();
}

class TestAppHomePageState extends State<TestAppHomePage> {


 ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    print('set up');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Container(
        color: Colors.green,
        child: ListView(
          primary: false,
          // controller: _scrollController,
          children: <Widget>[topWidget(), topWidget(), topWidget(), topWidget()],
        ),
      ),
    );
  }

  Widget topWidget() {
    return Card(
        color: Colors.purple,
        margin: EdgeInsets.all(16),
        child: Container(
          height: 400,
          child: Column(
            children: <Widget>[
              Container(height: 100, color: Colors.white),
              Expanded(
                  child: ListView(
                      controller: _scrollController,
                      children: List.generate(
                        40,
                        (index) {
                          return someText(index);
                        },
                      ).toList()))
            ],
          ),
        ));
  }

  Widget someText(int i) {
    return Text('text no $i');
  }
}

我和 OP 在同一个项目上工作,但因为还没有人回应,我想我会分享我自己的摆弄、思考过程以及我现在所拥有的。 我会更新这个答案

首先,我试图阻止使用大量样板代码创建解决方案,但恐怕我这样做可能有点过头了。 我很确定我的解决方案不正确,因为编译器给了我警告。

闲话少说,我的想法是:
1. 我需要一种方法来捕获用户在内部列表中的输入。 因此,创建自定义 ScrollPhysics 是有意义的。
2. 重要的是,innerlist 在所有情况下都能正常工作。 因此,它总是调用 super 来处理。
3. 我需要传递一个函数,该函数接受我捕获的输入并假装该输入被传递到外部列表中。

带有结果的 Gif

// imports and stuff..

class CustomScroll extends BouncingScrollPhysics { 
  final Function outerController;
  CustomScroll({this.outerController, ScrollPhysics parent}): super(parent: parent);
  @override
  CustomScroll applyTo(ScrollPhysics ancestor) {
    return CustomScroll(
        outerController: outerController,  parent: buildParent(ancestor));
  }
  @override 
  Simulation createBallisticSimulation(ScrollMetrics position, double velocity) {
    if (position.pixels >= position.maxScrollExtent && velocity >= 0.0) {
      outerController(velocity);
    }
    return super.createBallisticSimulation(position, velocity);
  }
}

class ListInAList extends StatefulWidget {
  createState() => ListInAListState();
}
class ListInAListState extends State<ListInAList> with TickerProviderStateMixin {
  List<ScrollController> innerControllers = List();
  ScrollController outerController = ScrollController();
  final outerPhysics = BouncingScrollPhysics();
  void innerListener(double velocity, ScrollController outerController)
  {

    final sim = outerPhysics.createBallisticSimulation(outerController.position, velocity);
    ScrollActivity _test = BallisticScrollActivity(outerController.position.activity.delegate,sim,this);
    if (_test != null)
    outerController.position.beginActivity(_test);

  }

  Widget build(BuildContext context) {
    return ListView.builder(
        itemBuilder: buildItem, controller: outerController, itemCount: 4, physics: outerPhysics);
  }

  Widget buildItem(BuildContext context, int index) {
    final innerController = ScrollController();
    innerControllers.add(innerController);

    return Column(children: [
      Container(height: 100, color: Colors.blue),
      ListView.builder(
        physics: CustomScroll(outerController: (velocity) => innerListener(velocity, outerController)),
        itemBuilder: buildLoremImpsum,
        controller: innerController,
        itemCount: 20),
    ]);
  }
  Widget buildLoremImpsum(context, index) {
    return Container(
        height: 30,
        color: (index % 2 == 0)
            ? Color.fromRGBO(255, 0, 0, 1)
            : Color.fromRGBO(255, 255, 0, 1));
  }
}

所以,基本上,只有createBallisticSimulation和函数innerListener是代码中真正有趣的部分,其他一切都只是示例的一部分。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM