掌握Flutter底部导航栏：畅游导航之旅

import 'package:flutter/material.dart';
 
class BottomNavigationBarExample extends StatefulWidget {
  @override
  _BottomNavigationBarExampleState createState() => _BottomNavigationBarExampleState();
}
 
class _BottomNavigationBarExampleState extends State<BottomNavigationBarExample> {
  int _selectedIndex = 0;
  static const TextStyle textStyle = TextStyle(fontSize: 30, color: Colors.blue);
  static const List<Widget> _widgetOptions = <Widget>[
    Icon(Icons.home, size: 60.0, color: Colors.blue),
    Icon(Icons.email, size: 60.0, color: Colors.blue),
    Icon(Icons.alarm, size: 60.0, color: Colors.blue),
    Icon(Icons.airplay, size: 60.0, color: Colors.blue),
  ];
 
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.email), title: Text('Email')),
          BottomNavigationBarItem(icon: Icon(Icons.alarm), title: Text('Alarm')),
          BottomNavigationBarItem(icon: Icon(Icons.airplay), title: Text('Airplay')),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

这段代码使用了Flutter的BottomNavigationBar来创建一个底部导航栏，允许用户在不同的屏幕（通过_widgetOptions中的List<Widget>提供）之间切换。这个例子简单明了，适合初学者学习和实践。