时间戳

首页 > 解决方案 > 颤动-使用文档中显示的bottomNavigationBar是非执行性的吗？

flutter - 颤动-使用文档中显示的bottomNavigationBar是非执行性的吗？

问题描述

我的问题是因为它在文档中显示的内容显示，一旦在应用程序中加载第一页，通过导航栏导航的可能页面的整个列表将一起加载。

我的印象是，如果像我想的那样，它会在应用程序启动时在内存中加载太多东西，导致应用程序运行缓慢。

如果这样工作，请用另一种更好的方式帮助我，或者向我解释为什么这不是问题。

该文档 提供了以下示例：

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,
      ),
    );
  }
}

标签： flutternavigationbar

解决方案

如果这就是您显示某些屏幕的方式，那么您的印象可以说是正确的。

但是您提到的示例是根据底部导航栏的当前索引存储不同的内容。它没有显示不同的页面。

基本上，导航栏只显示项目并跟踪当前选定的项目。还有一个回调onTap，您可以使用它来根据索引项执行一些操作。

因此，您可以在该回调中路由到某个页面，而不是根据索引有条件地呈现某个 Text 元素。使用路由更改页面时，之前不会加载新屏幕。

请参阅https://flutter.dev/docs/development/ui/navigation以了解有关 Flutter 路由的更多信息。

推荐阅读