ListView внутри ListView строит все элементы одновременно
На моем экране мне нужно отобразить ListView внутри другого ListView. Экран можно резюмировать следующим образом:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Isolate FutureBuilder Example'),
),
body: Column(
children: [
Text("Header"),
SizedBox(height: 16),
Text("Filters"),
SizedBox(height: 32),
Expanded(
child: ListView.builder(
itemCount: 3,
itemBuilder: (context, index) {
return Column(
children: [
Text("List $index"),
SizedBox(height: 32),
ListView.builder(
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
itemCount: 50,
itemBuilder: (context, index) {
print("building $index");
return Text("$index");
})
],
);
},
),
)
],
));
}
Если вы попробуете это, вы увидите, что все 200 элементов внутреннего ListView.builder создаются сразу, что приводит к застреванию пользовательского интерфейса в моем основном приложении, поскольку у меня есть много более сложных элементов.
Как я могу предотвратить это и сохранить поведение ListView, при котором создаются только видимые элементы? Я читал, что shrinkWrap: true может быть причиной, но если я установлю значение false, у меня возникнет ошибка Vertical viewport was given unbounded height., и я не смогу ее исправить.
Можете ли вы добавить изображение ожидаемого результата? и я думаю, вам не нужен Listview внутри Listview
@IldebertoVasconcelos, потому что в моем приложении внешний ListView имеет не только текст и другой ListView, но и нечто большее, и им приходится прокручивать
Ответы 2
попробуйте заменить свой код на этот
я думаю, вам не нужно представление списка внутри списка
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Isolate FutureBuilder Example'),
),
body: Column(
children: [
Text("Header"),
SizedBox(height: 16),
Text("Filters"),
SizedBox(height: 32),
Text("List 1"),
SizedBox(height: 32),
Expanded(
child: ListView(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.5, // Adjust height as needed
child: ListView.builder(
physics: const ClampingScrollPhysics(),
itemCount: 200,
itemBuilder: (context, index) {
print("building $index");
return Text("$index");
},
),
),
],
),
),
],
),
),
);
}
возможно, я слишком много суммировал... Мне нужен внешний ListView, потому что его дочерние элементы происходят из списка, поэтому у меня есть не только текст и другой список, но и больше экземпляров, например (Список 1, [... ]), (Список 2, [...]), (Список 3, [...]), и я хочу отобразить их все при прокрутке
Я обновил код, добавив что-то более похожее на мой случай.
я так понял, я думаю, что способ сделать это - установить высоту для вашего внутреннего списка, я также обновил код
Вы можете попробовать этот код
return Scaffold(
appBar: AppBar(
title: const Text('Isolate FutureBuilder Example'),
),
body: CustomScrollView(
physics: const ClampingScrollPhysics(),
slivers: [
const SliverAppBar(
title: Text('Isolate FutureBuilder Example'),
),
const SliverToBoxAdapter(
child: Column(
children: [
Text("Header"),
SizedBox(height: 16),
Text("Filters"),
SizedBox(height: 32),
],
),
),
...Iterable.generate(3, (index) {
return [
SliverToBoxAdapter(
child: Column(
children: [
Text("List $index"),
const SizedBox(height: 32),
],
),
),
SliverList.builder(
itemBuilder: (context, index) {
print("building $index");
return Text("$index");
},
itemCount: 50,
)
];
}).toList().expand((element) => element).toList()
],
),
);
}
здесь представление вложенного списка разбивается на плоское представление списка с помощью CustomScrollView и Slivers.
спасибо, это мне действительно помогло, я не думал использовать CustomScrollView с осколками. Поскольку мне также нужна функция переключения для отображения/скрытия внутреннего списка, я в итоге использовал это pub.dev/packages/sliver_expandable
почему вы используете просмотр списка внутри списка?