flutter

Question

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

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

如果这样可行，请帮助我找到另一种更好的方法，或者向我解释为什么这不是问题。

doc 提供以下示例：

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

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

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

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

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

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

Answer 2

使用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();
  }
}

flutter - 使用文档中显示的 bottomNavigationBar 是非性能的？

flutter - using bottomNavigationBar as it is showed at documentation is non-performatic?

navigationbar