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.
されます。タブに新しいページをプッシュしてからタブを切り替えた後。