[英]How to Scroll two Horizontal ListView at the same time?
1)我有三個ListView.builder
,一個在 questionsListWidget 里面,它水平滾動橙色。
2)我在 studentListWidget 中的第二個列表,它以藍色(網絡圖像)和黃色( ListView.builder
)垂直滾動。
3)現在我的要求是當我滾動橙色部分和黃色部分時應該同時滾動基本上我想要發生的是:
a) studentListWidget() 應該垂直滾動,保持 questionsListWidget() 固定。
b) 如果我滾動 questionsListWidget() 橙色部分,黃色部分的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(),
)
],
),
)
],
),
);
}
}
我認為你可以使用 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.