CupertinoTabView 在热重载时重置

如何解决CupertinoTabView 在热重载时重置

我正在使用 CupertinoApp 模型开发应用程序。我正在为应用程序使用 CupertinoTabView 模型。现在在开发过程中，标签索引会在热重载时重置。我尝试在选项卡控制器上设置状态，但它仍然会重置。

代码：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    CupertinoTabController _controller = CupertinoTabController();

    @override
    void dispose() {
      _controller.dispose();
      super.dispose();
    }

    List<Widget> tabs = [
      HomeScreen(_controller),PlaySearchScreen(),HomeScreen(_controller),ProfileScreen(),];
    return CupertinoTabScaffold(
        controller: _controller,tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.home),label: 'Home',),BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.play),label: 'Play Tennis',BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.calendar),label: ' My Schedule',BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.person),label: 'Profile',],tabBuilder: (context,index) {
          return CupertinoTabView(
            builder: (ctx) {
              return GestureDetector(
                child: tabs[index],onTap: () => setState(
                  () => _controller.index = index,);
            },);
        });
  }
}

class HomeScreen extends StatefulWidget {
  HomeScreen(
    this.controller,{
    Key key,}) : super(key: key);

  final CupertinoTabController controller;

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

有没有办法不重置？

解决方法

编辑

正如@p2kr 所指出的，您在 build 函数中搞混了（因为您还有 dispose 回调，其中您想在 build 函数之外定义）并使用文档说明的 CupertinoTabScaffold：

您必须监听 onTap 回调并使用新的调用 setState currentIndex 用于反映新选择。 这个也可以 通过使用 CupertinoTabScaffold 自动包装它。

取自here。因此，如果您不使用 CupertinoTabScaffold，我的原始答案适用。在您的情况下，您的课程应如下所示：

class _HomePageState extends State<HomePage> {
    // Placing the _controller as a property of your class
    // instead of a local variable inside your build method
    // which would be re-instantiated on every build call -
    // as in the case of hot reload
    CupertinoTabController _controller = CupertinoTabController();

    // Also setting the dispose function correctly outside
    // of the build function
    @override
    void dispose() {
        _controller.dispose();
        super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        List<Widget> tabs = [
            HomeScreen(_controller),PlaySearchScreen(),HomeScreen(_controller),ProfileScreen(),];

        ...

原创

CupertinoTabBar 有一个 currentIndex 属性来维护选定的选项卡。因此，您需要向 _HomePageState:

添加额外的属性

class _HomePageState extends State<HomePage> {
    // Variable to maintain current tab index.
    // Setting it to 0 (first tab) as default here
    int _index = 0;

    ...
}

然后在实际的 CupertinoTabBar 中，我们添加设置 currentIndex 属性并利用 onTap 回调相应地更新我们的属性：

CupertinoTabBar(
    // Setting the index
    currentIndex: _index,// Callback to update our index once a tab is clicked
    onTap: (index) => setState(() => _index = index),items: [
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),label: 'Home',),BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.play),label: 'Play Tennis',BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.calendar),label: ' My Schedule',BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.person),label: 'Profile',],