web-dev-qa-db-ja.com

Flutterアプリ内の各ページに複数の足場

APIドキュメント： https://api.flutter.dev/flutter/material/Scaffold-class.html はこう言います：

足場は、MaterialAppの単一の最上位コンテナになるように設計されており、通常、足場をネストする必要はありません。たとえば、bottomNavigationBarがTabBarで本体がTabBarViewであるタブ付きUIでは、各タブバーのビューを、タイトルが異なるAppBarの足場にしたくなるかもしれません。 AppBarを更新するTabControllerにリスナーを追加することをお勧めします。

それは、Material Appの下に1つの足場のみ、または各ページに1つの親の足場のみが必要であることを意味しますか？最初の場合、どのようにナビゲートしますか？それが後である場合、それは一般的なAppBarおよびBottomBarが各ナビゲーションで再レンダリングされることを意味しませんか？ベストプラクティスは何ですか。

androidflutternavigationmaterial-designscaffolding
2
dora

ScaffoldおよびAppBarとともにアプリケーションで共通のBottomBarを使用することをお勧めします。ユーザーがBottomBarタブを変更すると、本体を管理する必要がありますScaffold。

次のように、複数のタブで単一の足場を管理できます。

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