FLUTTER прокручивает несколько виджетов
если у меня есть два (или более) прокручиваемых виджета (скажем, SingleChildScrollView),
как заставить их ОБА прокручиваться одновременно?
потому что я буду Stackнакладывать их друг на друга,
так что один покрыт другим Container.
я довольно новичок, так что у меня нет большого выбора прямо сейчас.
я пробовал ScrollController но не работает.
я понятия не имею, как правильно реализовать это в моих кодах.
также, пожалуйста, приложите простой пример кода, если это возможно.
Вот что я пробовал:
class _MyHomePageState extends State<MyHomePage> {
final ScrollController _mycontroller = new ScrollController();
@override
Widget build(BuildContext context) {
body:
Container(
height: 100,
child:
Stack( children: <Widget>[
SingleChildScrollView(
controller: _mycontroller,
child: Column( children: <Widget>[
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
],)
),
SingleChildScrollView(
controller: _mycontroller,
child: Column(children: <Widget>[
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
],)
),
])
)
}
}
я хочу, чтобы оба прокручивались вместе, если я прокручиваю любой из них.
но они все равно прокручиваются независимо, даже если у них одинаковые controller.
Я не уверен, правильно ли я использую controller.
пожалуйста, порекомендуйте.
@farhana привет, я добавил несколько кодов. это помогает?
эй, почему вы берете stack, вы должны использовать виджеты Row, чтобы держать столбец влево или вправо с помощью scraolable
@farhana, но тогда я пролистаю ВСЕ Row. что, если прокручиваемые элементы находятся в другом Row или Column, как в одном из их children?
как я понимаю, у вас есть два столбца слева и справа, и оба они прокручиваются.
@farhana я пытаюсь сделать что-то похожее на это. я просто упрощаю проблему до «одновременной прокрутки двух виджетов».
Ответы 2
Try This code both the Column Scroll at same time use can use only one controller to scroll the Both Column.
class _ConfirmEmailState extends State<ConfirmEmail> {
final ScrollController _mycontroller = new ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hello"),
),
body: Container(
height: 100,
child: ListView(children: <Widget>[
Stack(children: <Widget>[
SingleChildScrollView(
controller: _mycontroller,
child: Column(
children: <Widget>[
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
],
)),
Column(
children: <Widget>[
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
],
)
]),
]),
));
}
}
Привет! Спасибо за ответ. Я не думаю, что это то, что я ищу. в вашем примере движется весь стек. я хотел, чтобы в виде отдельного списка они оба могли прокручиваться вместе, даже если они не были объединены. Таким образом, я могу размещать эти списки любым удобным для меня способом, но при этом прокручивать их вместе, потому что они будут обмениваться информацией.
Во флаттере доступно 11 различных типов виджетов для достижения функциональности прокрутки с другой задачей. Чтобы создать простой вертикальный ScrollView, который может содержать различные типы виджетов с различным поведением, мы будем использовать виджет SingleChildScrollView. Этот виджет может отображать несколько виджетов внутри него.
- Виджет «Создать эшафот» -> виджет «Безопасная зона» в области создания виджета
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: ) ) ); } }
- Создайте виджет SingleChildScrollView в виджете Безопасная зона. Теперь мы создадим виджет Column внутри SingleChildScrollView и поместим все наши несколько виджетов внутрь виджета Column. Мы создаем несколько контейнерных виджетов и виджетов изображений внутри SingleChildScrollView. Все будет легко прокручиваться здесь.
SingleChildScrollView( child: Column( children: <Widget>[ Container( color: Colors.green, // Yellow height: 120.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 200, fit: BoxFit.contain), Container( color: Colors.pink, // Yellow height: 120.0, ), Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)), Text('Some Sample Text - 2', style: TextStyle(fontSize: 28)), Text('Some Sample Text - 3', style: TextStyle(fontSize: 28)), Container( color: Colors.redAccent, // Yellow height: 120.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), ], ), ),
опубликуйте свой код, чтобы люди могли вам помочь