4

Flutter でマルチページ アプリをセットアップしようとしています。下部のタブバーには、[その他] ボタンを含む、最もよく使用される 4 つのページが含まれています。詳細ボタンは、他のページへのリンクを含むページを表示します。ページをクリックすると、このページが「その他」ページに置き換わるため、新しいナビゲーション スタックが作成されます。ただし、別のタブに切り替えてから「詳細」タブに戻ると、ナビゲーションの状態が記憶されます。これは、「その他」ページではなく、タブを切り替えたときに残したページが表示されていることを意味します。ユーザーが「その他」タブをクリックするたびに「その他」ページを表示したい。

Navigator の pushReplacement メソッドを使用してみました。そのため、ユーザーが詳細ページをクリックすると、詳細ページのリストに戻ることができません。ただし、タブを切り替えると、more ページが置き換えられるため、表示されなくなりました。

また、タブのコールバック メソッドを調整して、すべてのビューをポップし、ナビゲーターを MoreScreen に戻すことも試みました。ただし、これにより、コンソールにエラーが表示されました: setState() or markNeedsBuild() called during build..

タブ画面:

class TabScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TabScreenState();
  }
}

class TabScreenState extends State<TabScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WillPopScope(
        // Prevent swipe popping of this page. Use explicit exit buttons only.
        onWillPop: () => Future<bool>.value(true),
        child: CupertinoTabScaffold(
          tabBar: CupertinoTabBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text('Artikelen'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.message),
                title: Text('Activiteiten'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.speaker_group),
                title: Text('Training'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.more),
                title: Text('Meer'),
              ),
            ],
          ),
          tabBuilder: (BuildContext context, int index) {
            assert(index >= 0 && index <= 3);
            switch (index) {
              case 0:
                return CupertinoTabView(
                  builder: (BuildContext context) {
                    Navigator.of(context).popUntil((route) => route.isFirst);

                    return ArticleListScreen();
                  },
                  defaultTitle: 'Artikelen',
                );
                break;
              case 1:
                return CupertinoTabView(
                  builder: (BuildContext context) => ActivityListScreen(),
                  defaultTitle: 'Activiteiten',
                );
                break;
              case 2:
                return CupertinoTabView(
                  builder: (BuildContext context) => ArticleListScreen(),
                  defaultTitle: 'Training',
                );
                break;
              case 3:
                return CupertinoTabView(
                  builder: (BuildContext context) {
                    Navigator.of(context).popUntil((route) => route.isFirst);

                    return MoreScreen();
                  },
                  defaultTitle: 'Meer',
                );
                break;
            }
            return null;
          },
        ),
      ),
    );
  }
}

そして、別のページに移動するためのボタンを保持する MoreScreen:

class MoreScreen extends StatefulWidget {
  @override 
  State<StatefulWidget> createState() {
    return MoreScreenState();
  }
}

class MoreScreenState extends State<MoreScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: ThemeData.dark().accentColor,
        alignment: AlignmentDirectional(0.0, 0.0),
        child: MaterialButton(
          child: Text('PUSH page'),
          onPressed: () => {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) => ArticleListScreen()))
          },
        )
      ),
    );
  }
}

タブを切り替えるたびにナビゲーションスタックがリセットされることを期待していますが、次を使用して手動で行う必要があります。

Navigator.of(context).popUntil((route) => route.isFirst);

これにより、次のエラー メッセージが表示setState() or markNeedsBuild() called during build.されます。タブに新しいページをプッシュしてからタブを切り替えた後。

4

0 に答える 0