flutter 如果其子视图ScrollView/ Listview/ Listview.builder抖动,则Listview.builder呈现所有视图问题

toiithl6  于 2023-03-13  发布在  Flutter
关注(0)|答案(3)|浏览(224)

因为我有一个视图层次结构,其中有一个动态列表小部件(使用listview.builder,大约100+视图同时),即Listview/ singlechildscrollview的子视图。
问题在于当Listview.builder呈现其中所有小部件时,它的listview/ scroll视图的子视图是什么时候。

我只想呈现那些显示为列表视图的视图。生成器行为。(滚动时循环)

runApp(MyApp( items: List<String>.generate(100, (i) => 'Item $i'), ));

class MyApp extends StatelessWidget {
final List<String> items;
const MyApp({super.key, required this.items});
@override
Widget build(BuildContext context) {
const title = 'Long List';
return MaterialApp(
  title: title,
  home: Scaffold(
      appBar: AppBar(
        title: const Text(title),
      ),
      body: ListView(
        
        children: [
          Text("Test nexted List rendering"),
          ListView.builder(
            shrinkWrap: true,
            itemCount: items.length,
            itemBuilder: (context, index) {
              print(index);
              return ListTile(
                title: Text(items[index]),
              );
            },
          ),
        ],
      )),
);
}
}

7gs2gvoe

7gs2gvoe1#

shrinkWrap: true不好。您可以使用自定义滚动视图。

class MyApp extends StatelessWidget {
  final List<String> items;
  const MyApp({super.key, required this.items});
  @override
  Widget build(BuildContext context) {
    const title = 'Long List';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: Text("Test nexted List rendering"),
            ),
            SliverList(
                delegate: SliverChildBuilderDelegate(childCount: items.length,
                    (context, index) {
              print(index);
              return ListTile(
                title: Text(items[index]),
              );
            }))
          ],
        ),
      ),
    );
  }
}

关于ShrinkWrap vs Slivers | Decoding Flutter的更多信息
或者在一般情况下,如果希望文本总是在最上面,请通过删除shrinkWrap: true来使用body:ColumnExpnaded(child:ListView

kyvafyod

kyvafyod2#

阅读此处:https://docs.flutter.dev/cookbook/lists/long-lists
标准的ListView构造函数适用于小列表。若要处理包含大量项的列表,最好使用ListView.builder构造函数。
默认的ListView构造函数要求一次创建所有项目,与此相反,ListView.builder()构造函数在项目滚动到屏幕上时创建项目。
您的ListView.builder呈现了它的所有项目,因为父ListView呈现了它内部的所有子小部件。
解决方法:
ListView更改为Column

Column(
 childrem: [
    Expanded(child: ListView.builder)
  ]
)

预览:仅在列表视图构建器中呈现了15个项目,即使其shrinkwrap: true

zzzyeukh

zzzyeukh3#

不要将ListView与shrinkWrap = true一起使用。更多关于here的信息。
替代方案:
属性为mainAxisSize: MainAxisSize.min的列,并使用Flexible()使其扩展可供子级使用的尽可能多的空间。

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
     items.map((item) => Flexible(child: Text(item))).toList(),
  ],
)

相关问题