TabView中的FlutterListViewbuilder范圍錯誤

我有一個ListView.builder包含多個選項卡的頁面。

洗掉串列項后（通過向左或向右滑動），轉到另一個選項卡然后回傳到第一個選項卡會導致范圍錯誤。

轉到另一個頁面并回傳不會導致錯誤。也許轉到另一個頁面會導致構建器再次重新構建，而選項卡不會？

我在這里做錯了什么還是這是一個錯誤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),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

分離ListView解決樹問題。為了保存串列的狀態，我正在使用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 ListView.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;
}

uj5u.com熱心網友回復：

使用 setState 更新串列并從構建方法中洗掉串列宣告

  class _MyHomePageState extends State<MyHomePage> {

  List<int> list = [1, 2, 3, 4, 5];

  @override
  Widget build(BuildContext context) {
    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) {
                    setState(() {
                      list.removeAt(index);
                    });
                  },
                  child: ListTile(
                    title: Text(item.toString()),
                  ),
                );
              },
            ),
            const Icon(Icons.directions_transit),
            const Icon(Icons.directions_bike),
          ],
        ),
      ),
    );
  }
}

標籤：安卓 扑 镖 颤振列表视图

上一篇：Dartap搜索條件

下一篇：創建了一個應用程式來學習在flutterapp專案中添加rive閃屏影片