Flutter ListView с различными виджетами и элементами списка
Я не уверен, что что-то упускаю. Я играю с Flutter и хочу создать (простое) представление с некоторыми текстовыми виджетами, кнопками и другими виджетами (см. Рисунок ниже). За этими виджетами должен следовать список элементов. Прокручивать должно быть все представление (кроме панели приложения, конечно), а не только элементы.
Вот почему я помещаю все в ListView. Но я не могу сделать что-то подобное (в то время как items - это карта со строковыми значениями):
...
home: Scaffold(
appBar: AppBar(
title: Text('App bar'),
),
body: new ListView(
children: <Widget>[
new Text('Some Text'),
new FlatButton(...),
new Image.asset(...),
items.map((item)=>new Padding(
child: new Text(item.title),
)).toList()
],
),
),
...
Как правильно получить желаемый вид?
Заранее спасибо!
другой вариант - использовать SingleChildScrollView, Column и создать List <Widget> и программно добавить свои элементы в желаемом порядке после того, как у вас есть список, установленный в свойстве children вашего столбца
вот хорошее решение для просмотра списка с дополнительными виджетами: stackoverflow.com/a/58281604/1068975
Ответы 4
Дочерние элементы в ListView - это список элементов, поэтому, если вы хотите отобразить кнопку или текст, ваше дерево виджетов будет:
Scaffold
appBar: AppBar
body: Container
child: ListView
ListItem
ListItem
ListItem
Затем, в вашем случае, вы можете использовать столбец для отображения «фиксированного виджета» (текст, кнопка) + прокручиваемый список:
Scaffold
appBar: AppBar
body: Column
[
Text,
Buttom,
ListView
ListItem
ListItem
ListItem
]
Боюсь, что размещение ListView под текстом и кнопкой внутри столбца делает прокручиваемым только ListView. Я хочу, чтобы все внутри столбца можно было прокручивать.
понятно. в этом случае хорошо подходят ленты. поздравляю
Вы можете использовать следующий код в body.
body: SingleChildScrollView( //add to Scroll whole screen
child: Column(
children: <Widget>[
new Text('Some Text'), //Element-1
new FlatButton(...), //Element-2
new Image.asset(...), //Element-3
items.map((item)=>new Padding(child: new Text(item.title),)).toList(), //Element-4
ListView.separated( //Element-5
shrinkWrap: true, //this property is must when you put List/Grid View inside SingleChildScrollView
physics: NeverScrollableScrollPhysics(), //this property is must when you put List/Grid View inside SingleChildScrollView
itemCount: listItems.length,
itemBuilder: (context, i) {
return ListTile(
title: Text(listItems[i].Title),
subtitle: Text(listItems[i].Description),
);
},
separatorBuilder: (context, i) {
return Divider();
},
),
],
),
),
при прокрутке списка просмотр других областей не прокручивается (текст и изображение)
Вы можете использовать это так
ListView(
shrinkWrap: true,
children: <Widget>[
Text('hi'),//first widget
Text('hi2'),//second widget
Flex(
direction: Axis.horizontal,children: <Widget>[
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: 3,
itemBuilder: (BuildContext context, int index){
return ...
Или Просто настройте счетчик и индекс.
ListView.builder(
itemCount: get.length + 2, // add room for the two extra
itemBuilder: (BuildContext context, int index) {
if (index == 0){
return Text('Custom any widget');
}
if (index == 1){
return Text('Custom any widget');
}
index -= 2; // decrement index so that it's now in the range [0..length]
return Bubble(
style: styleSomebody,
child: Container(
...
));
}),
Вы можете использовать ListView.builder, поскольку он более эффективен, потому что элементы создаются только тогда, когда они прокручиваются на экране. И в первую позицию вы можете поместить виджеты, которых нет в списке, например:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('App bar')),
body: ListView.builder(
itemCount: items.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return Column(
children: <Widget>[
Text('Some Text'),
FlatButton(child: Text('A flat button'), onPressed: () {}),
Image.asset("An image"),
],
);
}
return Text('Item ${items[index].title}');
},
),
);
}
Вы можете добиться этого с помощью Slivers, посмотрите этот отличный пост одного из разработчиков Flutter: medium.com/flutter-io/slivers-demystified-6ff68ab0296f