flutter - использование bottomNavigationBar, как показано в документации, не работает c?

Question

Мой вопрос в том, что в документации показано, что после загрузки первой страницы в приложении весь список возможных страниц, перемещаемых через панель навигации, будет загружен вместе.

У меня сложилось впечатление, что если это так, как я думаю, при запуске приложения будет загружено слишком много вещей в память, что приведет к замедлению работы приложения.

Если это работает так, пожалуйста, помогите мне с другим способом сделать это в или объясните мне, почему это не имеет значения.

the do c дает пример ниже:

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Answer 1

используйте TabBarView

class _MyStatefulWidgetState extends State<MyStatefulWidget> with SingleTickerProviderStateMixin { // necessary

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Text(
           'Index 0: Home',
           style: optionStyle,
          ),
         Text(
          'Index 1: Business',
          style: optionStyle,
         ),
         Text(
           'Index 2: School',
          style: optionStyle,
         ),
       ],
       physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: (int index) {
          _tabController.animateTo(index);
        },
      ),
    );
  }

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

Answer 2

Ваше впечатление можно было бы сформулировать как правильное, если бы вы отображали определенные экраны таким образом.

Но в приведенном вами примере сохраняется различное содержимое на основе текущего индекса нижней панели навигации. Это не показывает разные страницы.

Обычно на панели навигации отображаются только элементы и отслеживается текущий выбранный элемент. Существует также обратный вызов onTap, который вы можете использовать для выполнения некоторых действий на основе индексированного элемента.

Таким образом, вместо условного рендеринга определенного текстового элемента на основе индекса вы можете перейти на определенную страницу в этот обратный вызов. При смене страниц с маршрутизацией новый экран не загружается раньше.

См. https://flutter.dev/docs/development/ui/navigation, чтобы узнать больше о маршрутизации Flutter.