如何为Flutter底部导航栏的FlutterIcons添加点击事件实现页面切换？

你已经通过onTap更新了activeIndex状态，接下来只需要根据这个索引切换页面即可，具体步骤如下：

1. 准备对应导航项的页面组件 #

先为每个底部导航图标创建对应的页面，示例如下：

// 首页
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("首页"));
  }
}

// PDF文档页
class PdfPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("PDF文档页"));
  }
}

// 二维码扫描页
class QrScanPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("二维码扫描页"));
  }
}

// 通知页
class NotificationsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("通知页"));
  }
}

// 设置页
class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("设置页"));
  }
}

2. 根据activeIndex切换页面 #

有两种常用实现方式，按需选择：

方式一：用IndexedStack（保留页面状态） #

这种方式会保留每个页面的状态，切换回来时不会重新初始化页面，适合需要保持状态的场景（比如表单输入、滚动位置）。在Scaffold的body中使用：

body: IndexedStack(
  index: activeIndex,
  children: [
    HomePage(),
    PdfPage(),
    QrScanPage(),
    NotificationsPage(),
    SettingsPage(),
  ],
),

方式二：用条件判断（每次切换重建页面） #

如果不需要保留页面状态，每次切换都重新构建页面，可以用switch-case实现：

body: _getCurrentPage(),

然后添加一个方法返回当前页面：

Widget _getCurrentPage() {
  switch(activeIndex) {
    case 0:
      return HomePage();
    case 1:
      return PdfPage();
    case 2:
      return QrScanPage();
    case 3:
      return NotificationsPage();
    case 4:
      return SettingsPage();
    default:
      return HomePage();
  }
}

完整示例代码 #

把上述内容整合到你的StatefulWidget中，完整代码如下：

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int activeIndex = 0;

  // 预存页面列表，方便IndexedStack使用
  final List<Widget> _pages = [
    HomePage(),
    PdfPage(),
    QrScanPage(),
    NotificationsPage(),
    SettingsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: activeIndex,
        children: _pages,
      ),
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Constants.scaffoldBackgroundColor,
        buttonBackgroundColor: Constants.primaryColor,
        items: [
          Icon(
            FlutterIcons.ios_home_ion,
            size: 20.0,
            color: activeIndex == 0 ? Colors.white : Color(0xFF000B70),
          ),
          Icon(
            FlutterIcons.file_pdf_box_mco,
            size: 20.0,
            color: activeIndex == 1 ? Colors.white : Color(0xFF000B70),
          ),
          Icon(
            FlutterIcons.qrcode_scan_mco,
            size: 20.0,
            color: activeIndex == 2 ? Colors.white : Color(0xFF000B70),
          ),
          Icon(
            FlutterIcons.notifications_active_mdi,
            size: 20.0,
            color: activeIndex == 3 ? Colors.white : Color(0xFF000B70),
          ),
          Icon(
            FlutterIcons.setting_ant,
            size: 20.0,
            color: activeIndex == 4 ? Colors.white : Color(0xFF000B70),
          ),
        ],
        onTap: (index) {
          setState(() {
            activeIndex = index;
          });
        },
      ),
    );
  }
}

// 对应的页面组件
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("首页"));
  }
}

class PdfPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("PDF文档页"));
  }
}

class QrScanPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("二维码扫描页"));
  }
}

class NotificationsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("通知页"));
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("设置页"));
  }
}

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