如何同时滚动两个Horizo​​ntal ListView？

Question

1）我有三个ListView.builder，其中一个在questionsListWidget中滚动   水平橙色。

2）我在studentsListWidget中具有第二个列表，该列表垂直滚动   蓝色（网络图片）和黄色（ListView.builder）。

3）现在我的要求是当我滚动橙色部分和黄色部分时   应该同时滚动   基本上我想发生的是：

a）studentsListWidget（）应该保持垂直滚动        issuesListWidget（）已修复。

b）如果我将QuestionListWidget（）滚动为橙色部分，则将ListView滚动为黄色部分        应该同时滚动。  以上是我在代码中尝试过的所有内容，我是Flutter布局中的新手  任何建议或想法如何在颤振布局中实现这些目标？

sample UI

import 'package:flutter/material.dart';

class TeacherReviewQuizSession extends StatefulWidget {
  @override
  TeacherReviewQuizSessionState createState() {
    return TeacherReviewQuizSessionState();
  }
}

class TeacherReviewQuizSessionState extends State<TeacherReviewQuizSession> {
  ScrollController _scrollController1, _scrollController2;
  int _itemCount = 50;

  @override
  void initState() {
    super.initState();
    _scrollController1 = ScrollController();
    _scrollController1.addListener(() {
      final offset = _itemCount *
          _scrollController1.offset /
          (_scrollController1.position.maxScrollExtent +
              _scrollController1.position.viewportDimension -
              8.0);
      setState(() {
        _scrollController2.animateTo(offset * 50,
            curve: Curves.ease, duration: Duration(milliseconds: 500));
      });
    });

    _scrollController2 = ScrollController();
    _scrollController2.addListener(() {
      final offset = _itemCount *
          _scrollController2.offset /
          (_scrollController2.position.maxScrollExtent +
              _scrollController2.position.viewportDimension -
              8.0);
      setState(() {
        _scrollController1.animateTo(offset * 0,
            curve: Curves.ease, duration: Duration(milliseconds: 500));
      });
    });
  }

  Widget questionsListWidget() {
    return Row(
      children: <Widget>[
        new Expanded(
          flex: 10,
          child: new Row(
            children: <Widget>[
              new Expanded(
                flex: 2,
                child: new Container(
                  height: 50.0,
                  color: Colors.green,
                  child: new Container(
                      margin: EdgeInsets.all(15.0),
                      child: new Text("Players",
                          style: new TextStyle(
                              fontSize: 15.0, fontWeight: FontWeight.bold))),
                ),
              ),
              new Expanded(
                flex: 8,
                child: new Container(
                    height: 50.0,
                    color: Colors.orange,
                    child: new ListView.builder(
                        controller: _scrollController1, //Question controller
                        itemCount: 50,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) {
                          return horizontalList(index);
                        })),
              )
            ],
          ),
        )
      ],
    );
  }

  Widget studentsListWidget() {
    return new ListView.builder(
      itemCount: 50,
      itemBuilder: (BuildContext context, int index) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                new Expanded(
                  flex: 10,
                  child: new Row(
                    children: <Widget>[
                      new Expanded(
                        flex: 2,
                        child: new Container(
                          height: 70.0,
                          color: Colors.green,
                          child: CircleAvatar(
                            backgroundImage: NetworkImage(''),
                          ),
                        ),
                      ),
                      new Divider(
                        height: 5.0,
                      ),
                      new Expanded(
                        flex: 8,
                        child: new Container(
                          height: 70.0,
                          color: Colors.yellow,
                          child: new ListView.builder(
                              itemCount: 50,
                              scrollDirection: Axis.horizontal,
                              itemBuilder: (context, index) {
                                return horizontalList(index);
                              }),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
            new Divider(
              height: 5.0,
              color: Colors.black,
            )
          ],
        );
      },
    );
  }

  Widget horizontalList(int index) {
    return new Container(
      margin: EdgeInsets.all(5.0),
      height: 50.0,
      width: 50.0,
      decoration: new BoxDecoration(
        border: new Border.all(color: Colors.white, width: 2.0),
        shape: BoxShape.rectangle,
        borderRadius: new BorderRadius.circular(10.0),
      ),
      child: new Center(
        child: new Text(
          "$index",
          style: new TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Text(
          'Overview',
          style: Theme.of(context).textTheme.headline,
        ),
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 10,
            child: Column(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: questionsListWidget(),
                ),
                Expanded(
                  flex: 9,
                  child: studentsListWidget(),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

我认为您可以使用TrackingScrollController

 PageView(
  children: <Widget>[
    ListView(
      controller: _trackingScrollController,
      children: List<Widget>.generate(100, (int i) => Text('page 0 item $i')).toList(),
    ),
    ListView(
      controller: _trackingScrollController,
      children: List<Widget>.generate(200, (int i) => Text('page 1 item $i')).toList(),
    ),
    ListView(
     controller: _trackingScrollController,
     children: List<Widget>.generate(300, (int i) => Text('page 2 item $i')).toList(),
    ),
  ],
)

在这里看看 https://api.flutter.dev/flutter/widgets/TrackingScrollController-class.html