web-dev-qa-db-fra.com

Plusieurs échafaudages pour chaque page dans une application Flutter

La documentation de l'API: https://api.flutter.dev/flutter/material/Scaffold-class.html dit:

L'échafaudage a été conçu pour être le conteneur de niveau supérieur unique pour un MaterialApp et il n'est généralement pas nécessaire d'imbriquer des échafaudages. Par exemple, dans une interface utilisateur à onglets, où bottomNavigationBar est un TabBar et le corps est un TabBarView, vous pourriez être tenté de faire de chaque barre d'onglets un échafaudage avec un AppBar intitulé différemment. Il serait préférable d'ajouter un écouteur au TabController qui met à jour l'AppBar.

Cela signifie-t-il qu'il ne doit y avoir qu'un seul échafaudage sous l'application Material ou un seul échafaudage parent pour chaque page. Si c'est le premier, comment naviguer? Si c'est plus tard, cela ne signifie-t-il pas que les AppBar et les BottomBar communs sont ré-rendus à chaque navigation? Quelle est la meilleure pratique.

androidflutternavigationmaterial-designscaffolding
2
dora

Je vous suggère d'utiliser Scaffold commun avec AppBar et BottomBar pour votre application et lorsque l'utilisateur modifie les onglets BottomBar, vous devez gérer le corps du Scaffold.

Vous pouvez gérer votre seul échafaudage avec plusieurs onglets comme celui-ci:

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _currentIndex;
  List<Widget> _children;

  @override
  void initState() {
    _currentIndex = 0;
    _children = [
      Screen1(),
      Screen2(),
      Screen3(),
      Screen4(),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.blue,
        items: [
          BottomNavigationBarItem(
            title: Text("Screen 1"),
          ),
          BottomNavigationBarItem(
            title: Text("Screen 2"),
          ),
          BottomNavigationBarItem(title: Text("Screen 3")),
          BottomNavigationBarItem(title: Text("Screen 4")),
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}
0
Dhaval Kansara