Как прокрутить два горизонтальных ListView одновременно? - PullRequest
1 голос
/ 03 апреля 2019

1) У меня есть три ListView.builder, один внутри questionsListWidget, который прокручивает горизонтально оранжевого цвета.

2) Второй список, который у меня есть в StudentsListWidget, который прокручивает вертикально, который в синий (изображение сети) и желтый (ListView.builder).

3) Теперь мое требование - когда я прокручиваю оранжевую часть вместе с желтой частью должен быть прокручен в то же время По сути, я хочу, чтобы это произошло:

a) StudentsListWidget () должен прокручиваться вертикально, сохраняя questionsListWidget () исправлено.

б) Если я прокручиваю вопросы. ListWidget () оранжевая часть, ListView в желтой части. должен быть прокручен в то же время. Выше всего, что я пробовал в своем коде, я новичок в макете флаттера Любое предложение или идея, как мне добиться этого в макете флаттера ??

образец пользовательского интерфейса

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(),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
...