如何让Flutter底部导航栏应用启动时默认选中item1而非item0

核心原理 #

Flutter官方BottomNavigationBar组件通过currentIndex属性控制当前激活的标签，默认值为0（对应第一个标签），只要把初始值设置为1，启动时就会默认选中第二个标签（对应你需要的page1页面）。

完整修改代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '底部导航演示',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyBottomNavigationBar(),
    );
  }
}

class MyBottomNavigationBar extends StatefulWidget {
  const MyBottomNavigationBar({super.key});

  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  // 核心修改：初始选中索引设置为1，默认加载第二个标签页
  int _currentIndex = 1;

  // 标签页列表，索引0对应item0，索引1对应你要默认打开的page1
  final List<Widget> _pageList = [
    const Center(child: Text('这是item0对应的page0页面')),
    const Center(child: Text('这是item1对应的page1页面', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
    const Center(child: Text('这是item2对应的page2页面')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pageList[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'item0'),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: 'item1'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'item2'),
        ],
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
      ),
    );
  }
}

修改点说明 #

• 仅需要把_currentIndex的初始值从默认的0改成1即可实现启动默认定位到第二个标签页，其余交互逻辑和普通底部导航完全一致
• 如果后续标签页顺序有调整，对应修改初始索引值即可适配不同的默认启动页需求

内容的提问来源于stack exchange，提问作者Vikas Hansdak