[译] 如何用 Flutter 来创建一个带有底部导航栏的应用程序

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  // 此处定义应用程序的根Widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(), // 设置启动时加载的页面
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0; // 当前选中的导航栏索引
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  // 导航栏的页签
  final List<Widget> _widgetOptions = <Widget>[
    Text('主页', style: optionStyle),
    Text('消息', style: optionStyle),
    Text('我的', style: optionStyle),
  ];
 
  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('主页')),
          BottomNavigationBarItem(icon: Icon(Icons.message), title: Text('消息')),
          BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('我的')),
        ],
        currentIndex: _selectedIndex, // 当前选中的索引
        selectedItemColor: Colors.amber[800], // 选中的图标和文字颜色
        onTap: _onItemTapped, // 点击导航栏项时的回调
      ),
    );
  }
}

这段代码创建了一个带有底部导航栏的应用程序，用户可以在主页、消息、我的三个页签之间切换。导航栏的点击事件会更新当前选中的页签，并重新构建页面内容。这是学习如何在Flutter中创建带有底部导航栏的应用程序的一个很好的起点。