简体   繁体   English

如何同时滚动两个水平 ListView?

[英]How to Scroll two Horizontal ListView at the same time?

1)I have three ListView.builder , one inside questionsListWidget which scrolls horizontally orange in color. 1)我有三个ListView.builder ,一个在 questionsListWidget 里面,它水平滚动橙色。

2)Second list i have in studentsListWidget which scrolls vertically which in blue(Network image) and yellow( ListView.builder ). 2)我在 studentListWidget 中的第二个列表,它以蓝色(网络图像)和黄色( ListView.builder )垂直滚动。

3)Now my requirement is when i scroll orange part along with yellow part should get scrolled at same time Basically what i want to happen is: 3)现在我的要求是当我滚动橙色部分和黄色部分时应该同时滚动基本上我想要发生的是:

a) studentsListWidget() should Scroll vertically keeping questionsListWidget() fixed. a) studentListWidget() 应该垂直滚动,保持 questionsListWidget() 固定。

b) If i scroll questionsListWidget() orange part, ListView in yellow part should get scrolled at a same time. b) 如果我滚动 questionsListWidget() 橙色部分,黄色部分的ListView应该同时滚动。 The above all i have tried in my code, i am a newbie in flutter layout Any suggestion or idea how do i achieve these in flutter layout??以上都是我在我的代码中尝试过的,我是颤振布局的新手任何建议或想法我如何在颤振布局中实现这些?

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

I think that you can use TrackingScrollController,我认为你可以使用 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(),
    ),
  ],
)

take a look here https://api.flutter.dev/flutter/widgets/TrackingScrollController-class.html看看这里https://api.flutter.dev/flutter/widgets/TrackingScrollController-class.html

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

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