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