我在一个包含多个选项卡的页面中有一个ListView.builder.

删除列表项(通过向左或向右滑动)后,转到另一个选项卡,然后返回到第一个选项卡会导致范围错误.

转到另一页并返回不会导致错误.也许转到另一个页面会导致生成器重新构建,而tab不会?

我是做错了什么,还是这是一个TabView的错误?下面是完全可复制的代码.

要复制问题,请滑动项目以将其删除,然后转到第二个选项卡,然后返回第一个选项卡.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<int> list = [1, 2, 3, 4, 5];

    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: const TabBar(
            tabs: [
              Tab(icon: Icon(Icons.recycling_outlined)),
              Tab(icon: Icon(Icons.directions_transit)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            ListView.builder(
              padding: const EdgeInsets.all(4.0),
              itemCount: list.length,
              itemBuilder: (context, index) {
                var item = list[index];
                return Dismissible(
                  key: Key(item.toString()),
                  onDismissed: (direction) {
                    list.removeAt(index);
                  },
                  child: ListTile(
                    title: Text(item.toString()),
                  ),
                );
              },
            ),
            const Icon(Icons.directions_transit),
            const Icon(Icons.directions_bike),
          ],
        ),
      ),
    );
  }
}


推荐答案

分离列表视图树解决了这个问题.要保存列表的状态,我使用AutomaticKeepAliveClientMixin,您可以使用其他状态管理属性.

body: TabBarView(
  children: [
    FirstChild(),
    const Icon(Icons.directions_transit),
    const Icon(Icons.directions_bike),
  ],
),

列表视图

class FirstChild extends StatefulWidget {
  FirstChild({Key? key}) : super(key: key);

  @override
  State<FirstChild> createState() => _FirstChildState();
}

class _FirstChildState extends State<FirstChild>
    with AutomaticKeepAliveClientMixin {
  List<int> list = [1, 2, 3, 4, 5];

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return 列表视图.builder(
      padding: const EdgeInsets.all(4.0),
      itemCount: list.length,
      itemBuilder: (context, index) {
        var item = list[index];
        return Dismissible(
          key: Key(list[index].toString()),
          onDismissed: (direction) {
            setState(() {
              list.removeAt(index);
            });
          },
          child: ListTile(
            title: Text(item.toString()),
          ),
        );
      },
    );
  }

  @override
  bool get wantKeepAlive => true;
}

Flutter相关问答推荐

Flutter -如何从布局填充(对称水平)中排除小部件?

如何在不使用NULL-check(!)的情况下缩小`FutureBuilder.Builder()`内部的`Snaphot`范围

MobX Build_Runner问题:不生成.G文件(Flutter )

无法让Riverpod Stream发出新值

如何正确处理Flutter 翼中使用火基时发生的碰撞?

为什么在setState之后Ffltter Pageview重置为第0页

Flutter 蜂巢不能正常工作,我正在使用蜂巢在设备上存储数据,但当我关闭并重新启动应用程序时,我失go 了一切

FOR回路中的Flutter 模型

如何将WebViewWidget和WillPopScope结合起来

Flutter中不使用Container是否可以做margin

如何在 VS Code 中启用 Flutter 运行/调试工具栏?

如何计算 Firestore 集合中的文档数量?

Flutter - 如何将按钮对齐到行的右侧

如何从底部导航栏打开 bottomModal 表?

Flutter:为什么我的 listTile colored颜色 被容器 colored颜色 覆盖了?

Flutter sliver 持久化

如何在 Flutter 中将 ScaffoldMessenger 中的 Snackbar 显示为 Widget?

仅使用 Flutter 在本地环境中托管 Web 服务器

Textfield 和 MasonryGrid 给出错误(垂直视口的高度没有限制)

如何验证位于 PageView 内不同页面的 TextFormFields