flutter底部导航栏示例

这段代码定义了一个简单的Flutter应用，其主页面包含一个可以改变文本颜色的AppBar、一个Drawer和一个底部导航栏。用户可以通过底部导航栏来改变居中文本的字体颜色，初始为黑色，点击不同的按钮将改变为蓝色、绿色或红色。不过，代码中存在一个错误，需要修正以保持初始文本颜色为黑色。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Windows Scaffold Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  Color _textColor = Colors.black; // 初始化文本颜色为黑色

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      // 根据选中的索引改变文本颜色
      switch (_selectedIndex) {
        case 0:
          _textColor = Colors.blue; // 保持黑色
          break;
        case 1:
          _textColor = Colors.green; // 更改为绿色
          break;
        case 2:
          _textColor = Colors.red; // 更改为红色
          break;
        default:
          _textColor = Colors.black; // 默认为黑色
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Windows Scaffold Example'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
            ListTile(
              title: Text('Item 3'),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications),
            label: 'Notifications',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
      body: Center(
        child: Text(
          'Hello, Flutter on Windows!',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: _textColor, // 使用状态变量中的颜色
          ),
        ),
      ),
    );
  }
}

以下是对这段代码的分析：
一、整体结构
首先引入了 Flutter 的基础材料包 material.dart，以便使用 Flutter 的 Material Design 风格组件。
定义了一个入口函数 main，在其中调用 runApp 函数并传入 MyApp 实例，启动整个 Flutter 应用。

二、MyApp 类
MyApp 类继承自 StatelessWidget，表示这是一个无状态的组件。
在 build 方法中，返回一个 MaterialApp 实例，设置了应用的标题为 ‘Flutter Windows Scaffold Example’，主题颜色为蓝色（通过 primarySwatch 属性设置为 Colors.blue），并指定了应用的首页 为 MyHomePage。

三、MyHomePage 类
MyHomePage 类继承自 StatefulWidget，表示这是一个有状态的组件。
在 createState 方法中，返回一个 _MyHomePageState 实例，用于管理该组件的状态。

四、_MyHomePageState 类
定义了两个私有变量：
_selectedIndex，用于存储底部导航栏当前选中的索引，初始值为 0。
_textColor，用于存储文本的颜色，初始值为黑色。
_onItemTapped 方法：
当底部导航栏的项被点击时调用。
通过调用 setState 方法触发组件的重新构建。
根据选中的索引，使用 switch 语句改变 _textColor 的值，从而改变页面主体文本的颜色。
在 build 方法中：
返回一个 Scaffold 实例，构建了应用的基本布局。
appBar 是一个 AppBar 组件，显示标题为 ‘Flutter Windows Scaffold Example’。
drawer 是一个 Drawer 组件，包含一个列表视图，列表项有一个头部（DrawerHeader）和三个 列表项（ListTile），点击列表项会关闭抽屉。
bottomNavigationBar 是一个 BottomNavigationBar 组件，包含三个底部导航栏项，根据 _selectedIndex 显示当前选中的项，点击项时调用 _onItemTapped 方法。
body 是一个居中显示的 Text 组件，文本内容为 ‘Hello, Flutter on Windows!’，字体大小为 24，加 粗显示，颜色由 _textColor 变量决定。

总体来说，这段代码构建了一个具有抽屉（Drawer）和底部导航栏（BottomNavigationBar）的 Flutter 应用，通过点击底部导航栏的项可以改变页面主体文本的颜色，同时抽屉提供了一些额外的导航选项。