快捷導(dǎo)航

flutter?TabBarView?動態(tài)添加刪除頁面的示例代碼

更新時間：2024年11月18日 09:49:32 作者：愛學(xué)習(xí)的綠葉

在Flutter中使用TabBarView動態(tài)添加和刪除頁面時,如果未為每個頁面設(shè)置唯一的key,會導(dǎo)致刪除頁面時出現(xiàn)狀態(tài)錯誤或刪除錯誤的頁面,正確的做法是為每個頁面指定全局唯一的key,這樣可以確保頁面在添加和刪除時狀態(tài)正確,感興趣的朋友跟隨小編一起看看吧

在TabBarView 動態(tài)添加頁面后刪除其中一個頁面會導(dǎo)致后面的頁面狀態(tài)錯誤或刪除的頁面不正確。出現(xiàn)這種問題是由于創(chuàng)建子頁面時沒有為子頁面設(shè)置唯一的key導(dǎo)致的。下面是錯誤的代碼：

void addNewPage() {
    _pageCount++;
    setState(() {
      String title = "頁面$_pageCount";
      PageContent page = PageContent(data: title, pageId: _pageCount,);
      PageData data = PageData(data: title, pageId: _pageCount, content: page);
      listPages.add(data);
      nowIndex = listPages.length -1;
      resetTabController();
    });
  }

如上面的代碼所示, 在創(chuàng)建PageContent 組件時如果沒有指定全局唯一的key, 關(guān)閉頁面時就會導(dǎo)致后面的頁面被再次build或刪除錯誤的頁面，正確的代碼如下

void addNewPage() {
    _pageCount++;
    setState(() {
      String title = "頁面$_pageCount";
      PageContent page = PageContent(data: title, pageId: _pageCount, key: ValueKey(title),);
      PageData data = PageData(data: title, pageId: _pageCount, content: page);
      listPages.add(data);
      nowIndex = listPages.length -1;
      resetTabController();
    });
  }

指定了全局唯一key后在刪除子頁面，后續(xù)頁面就可以正常顯示。

所有代碼如下

import 'package:flutter/material.dart';
void main() {
  runApp(const MainApp());
}
class MainApp extends StatelessWidget {
  const MainApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),
        primaryColor: Colors.white,
        scaffoldBackgroundColor: Colors.white,
        dialogBackgroundColor: Colors.white,
        useMaterial3: true,
      ),
      home: const PageMain(),
      /*
      home: ChangeNotifierProvider(
          create: (context) => HomeProvider(),
          builder: (context, child) => const HomePage(),
      ),
      */
    );
  }
}
class PageData {
  final String data;
  final int pageId;
  final Widget content;
  PageData({
    required this.data,
    required this.pageId,
    required this.content,
  });
}
class _StatePageMain extends State<PageMain> with TickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  final List<PageData> listPages = <PageData>[];
  int nowIndex = 0;
  int _pageCount = 0;
  TabController? tabController;
  @override
  void initState() {
    super.initState();
    setState(() {
      tabController = TabController(length: listPages.length, vsync: this);
    });
  }
  @override
  bool get wantKeepAlive => true;
  void addNewPage() {
    _pageCount++;
    setState(() {
      String title = "頁面$_pageCount";
      PageContent page = PageContent(data: title, pageId: _pageCount, key: ValueKey(title),);
      PageData data = PageData(data: title, pageId: _pageCount, content: page);
      listPages.add(data);
      nowIndex = listPages.length -1;
      resetTabController();
    });
  }
  //選中某個頁面
  void onSelectPage(PageData page) {
    //頁面已經(jīng)選中
    int selIndex = 0;
    for (int index = 0; index < listPages.length; index++) {
      PageData item = listPages[index];
      if (item.pageId == page.pageId) {
        selIndex = index;
        break;
      }
    }
    //選中頁面沒有更改
    if (selIndex == nowIndex) {
      return;
    }
    setState(() {
      nowIndex = selIndex;
      tabController?.animateTo(nowIndex);
    });
  }
  //關(guān)閉頁面
  void onClosePage(PageData data) {
    int closedIndex = 0;
    for (int index = 0; index < listPages.length; index++) {
      PageData item = listPages[index];
      if (item.pageId == data.pageId) {
        closedIndex = index;
        break;
      }
    }
    setState(() {
      listPages.removeAt(closedIndex);
      if (closedIndex <= nowIndex) {
        nowIndex--;
      }
      if (nowIndex < 0) {
        nowIndex = 0;
      } else if (nowIndex >= listPages.length) {
        nowIndex = listPages.length -1;
      }
      resetTabController();
    });
  }
  void resetTabController() {
    if (tabController?.length != listPages.length) {
      tabController?.dispose();
      tabController = TabController(
        length: listPages.length,
        vsync: this,
        initialIndex: nowIndex,
      );
    }
  }
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        bottom: PreferredSize(
            preferredSize: const Size.fromHeight(40),
            child: TabBar(
                controller: tabController,
                tabs: listPages.map((item) => Tab(child: TitleBarItem(data: item, closeCallback: (data) => onClosePage(data)),)).toList(),
            ),
        ),
      ),
      body: TabBarView(
        controller: tabController,
        children: listPages.map((item) => item.content).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => addNewPage(),
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}
class PageMain extends StatefulWidget {
  const PageMain({super.key});
  @override
  State<PageMain> createState() => _StatePageMain();
}
class _StatePageContent extends State<PageContent> with AutomaticKeepAliveClientMixin {
  List<String> listItems = <String>[];
  @override
  void initState() {
    print("初始化頁面內(nèi)容控制器:${widget.data}");
    setState(() {
      for (int index = 0; index <= 30; index++) {
        listItems.add("${widget.data} - $index");
      }
    });
    super.initState();
  }
  @override
  void dispose() {
    print("釋放頁面內(nèi)容控制器:${widget.data}");
    super.dispose();
  }
  @override
  bool get wantKeepAlive => true;
  @override
  Widget build(BuildContext context) {
    print("Build頁面 ${widget.data}");
    return Container(
      alignment: Alignment.center,
      child: Column(
        children: [
          Text(widget.data),
          Expanded(
            child: ListView.builder(
                itemExtent: 30,
                itemCount: listItems.length,
                itemBuilder: (context, index) {
                  return Text(listItems[index]);
                }
            ),
          ),
        ],
      ),
    );
  }
}
class PageContent extends StatefulWidget {
  final int pageId;
  final String data;
  const PageContent({super.key, required this.data, required this.pageId});
  @override
  State<PageContent> createState() {
    return _StatePageContent();
  }
}
typedef ClickCallback = void Function(PageData data);
class TitleBarItem extends StatelessWidget {
  final PageData data;
  final ClickCallback closeCallback;
  const TitleBarItem({
    super.key,
    required this.data,
    required this.closeCallback,
  });
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      child: Row(
        children: [
          Expanded(child: Text(data.data)),
          IconButton(
              onPressed: () => closeCallback(data),
              icon: const Icon(Icons.close))
        ],
      ),
    );
  }
}

到此這篇關(guān)于flutter TabBarView 動態(tài)添加刪除頁面的文章就介紹到這了,更多相關(guān)flutter TabBarView 刪除頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: