flutter windows 的scaffold风格界面示例

程序界面包括一个应用栏（AppBar）、一个抽屉（Drawer）、一个底部导航栏（BottomNavigationBar）和一个居中的文本widget。文本颜色会根据_textColor状态变量变化。

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 框架构建的应用程序，主要用于在 Windows 平台上展示一个带有底部导航栏、抽屉菜单和可根据导航栏选项改变文本颜色的界面。

二、代码详细分析
导入部分
import ‘package:flutter/material.dart’;：导入了 Flutter 的 Material 设计库，这是 Flutter 中常用的 UI 组件库，提供了丰富的预定义组件和主题。

main函数
void main() { runApp(MyApp()); }：这是应用程序的入口点，调用runApp函数并传入MyApp实例，启动 Flutter 应用。

MyApp类
继承自StatelessWidget，表示这是一个无状态的组件。
build方法中返回一个MaterialApp，设置了应用的标题为 ‘Flutter Windows Scaffold Example’，主题颜色为蓝色，并指定了应用的首页为MyHomePage。

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

_MyHomePageState类
定义了一些状态变量，如_selectedIndex用于记录底部导航栏的选中索引，_textColor用于记录文本的颜色。

_onItemTapped方法：
当底部导航栏的选项被点击时调用，通过setState更新状态，根据选中的索引改变_textColor的值。

build方法：
返回一个Scaffold，这是一个提供了基本布局结构的组件，包括appBar、drawer、 bottomNavigationBar和body。
appBar是一个应用栏，显示应用的标题。
drawer是一个抽屉菜单，包含一个标题和三个列表项，每个列表项点击后关闭抽屉。
bottomNavigationBar是底部导航栏，有三个选项，分别是首页、搜索和通知，当前选中的索引会通过_selectedIndex记录，并且点击选项时会调用_onItemTapped方法。
body是一个居中的文本，文本的颜色由_textColor决定，会根据底部导航栏的选项变化。

三、功能总结
这个应用程序在 Windows 平台上展示了一个具有基本布局结构的界面，包括顶部应用栏、左侧抽屉菜单和底部导航栏。用户可以通过点击底部导航栏的选项来切换页面，并根据选中的选项改变界面上文本的颜色。同时，抽屉菜单提供了一些额外的导航选项。