flutter windows 模拟实现传统windows的菜单栏和工具栏

这段代码模拟了传统Windows的程序的菜单栏和工具栏功能，它允许用户通过弹出菜单或图标按钮更改屏幕上文本的颜色。windows程序要求和手机APP有很大的不同，因为屏幕比较大，因此，需要尽量把功能都展示在屏幕上。而APP由于屏幕较小，不得不做侧滑影藏。
因此这段模拟菜单栏和工具栏的程序，很有实际意义

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PopupMenuButton Example',
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  Color _mainContentColor = Colors.black; // 初始颜色

  void _changeColor(Color color) {
    setState(() {
      _mainContentColor = color;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          // 菜单栏位于屏幕顶部
          Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                PopupMenuButton<String>(
                  onSelected: (String value) {
                    switch (value) {
                      case 'Red':
                        _changeColor(Colors.red);
                        break;
                      case 'Brown': // Pink 改为 Brown
                        _changeColor(Colors.brown); // Pink 改为 Brown
                        break;
                      // 添加更多颜色选项
                    }
                  },
                  itemBuilder: (BuildContext context) =>
                      <PopupMenuEntry<String>>[
                    PopupMenuItem<String>(
                      value: 'Red',
                      child: Text('Red'),
                    ),
                    PopupMenuItem<String>(
                      value: 'Brown', // Pink 改为 Brown
                      child: Text('Brown'), // Pink 改为 Brown
                    ),
                    // 添加更多菜单项
                  ],
                  child: Text('Menu Item 1'),
                ),
                PopupMenuButton<String>(
                  onSelected: (String value) {
                    switch (value) {
                      case 'Green':
                        _changeColor(Colors.green);
                        break;
                      case 'Lime':
                        _changeColor(Colors.lime);
                        break;
                      // 添加更多颜色选项
                    }
                  },
                  itemBuilder: (BuildContext context) =>
                      <PopupMenuEntry<String>>[
                    PopupMenuItem<String>(
                      value: 'Green',
                      child: Text('Green'),
                    ),
                    PopupMenuItem<String>(
                      value: 'Lime',
                      child: Text('Lime'),
                    ),
                    // 添加更多菜单项
                  ],
                  child: Text('Menu Item 2'),
                ),
                PopupMenuButton<String>(
                  onSelected: (String value) {
                    switch (value) {
                      case 'Blue':
                        _changeColor(Colors.blue);
                        break;
                      case 'Cyan':
                        _changeColor(Colors.cyan);
                        break;
                      // 添加更多颜色选项
                    }
                  },
                  itemBuilder: (BuildContext context) =>
                      <PopupMenuEntry<String>>[
                    PopupMenuItem<String>(
                      value: 'Blue',
                      child: Text('Blue'),
                    ),
                    PopupMenuItem<String>(
                      value: 'Cyan',
                      child: Text('Cyan'),
                    ),
                    // 添加更多菜单项
                  ],
                  child: Text('Menu Item 3'),
                ),
              ],
            ),
          ),
          // 工具栏图标，实现菜单栏子项的功能
          Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.colorize, color: Colors.red),
                  onPressed: () => _changeColor(Colors.red),
                ),
                IconButton(
                  icon: Icon(Icons.format_color_fill, color: Colors.green),
                  onPressed: () => _changeColor(Colors.green),
                ),
                IconButton(
                  icon: Icon(Icons.color_lens, color: Colors.blue),
                  onPressed: () => _changeColor(Colors.blue),
                ),
              ],
            ),
          ),
          // 其他内容
          Expanded(
            child: Center(
              child: Text(
                'Main Content',
                style: TextStyle(color: _mainContentColor),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

以下是对这段代码的分析：
一、导入部分
导入了package:flutter/material.dart，这是 Flutter 框架的核心库，提供了构建 Flutter 应用所需的基本组件和功能。

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

三、MyApp类
继承自StatelessWidget，表示这是一个无状态的小部件。
build方法返回一个MaterialApp，设置了应用的标题为 ‘PopupMenuButton Example’，主页面为 MyHomePage。

四、MyHomePage类
继承自StatefulWidget，表示这是一个有状态的小部件，因为它的状态可能会发生变化。

五、_MyHomePageState类
状态变量：
Color _mainContentColor = Colors.black;：定义了一个状态变量，表示主内容区域的文本颜色，初始值为黑色。
方法：
_changeColor(Color color)：用于更新_mainContentColor状态变量的值，当颜色被选择时调用setState方法触发小部件的重新构建。
构建方法：
返回一个Scaffold，包含以下部分：
主体内容列：
Column包含多个子部件：
菜单栏：
一个Container作为菜单栏容器，内部包含一个Row，用于水平排列多个PopupMenuButton。
每个PopupMenuButton有一个child属性显示为文本（如 ‘Menu Item 1’ 等），onSelected属性在菜 单选项被选择时触发相应的颜色更改逻辑，itemBuilder属性构建菜单选项列表，包含不同颜色选项的PopupMenuItem。
工具栏：
另一个Container作为工具栏容器，内部包含一个Row，用于水平排列多个IconButton。
每个IconButton有一个特定颜色的图标和一个onPressed属性，当按钮被点击时调用_changeColor方法更改主内容区域的颜色。
主内容区域：
一个扩展的Container，使用Expanded包裹，内部有一个居中的Text，文本颜色由 _mainContentColor决定，显示 ‘Main Content’。

总体来说，这段代码创建了一个 Flutter 应用，展示了如何使用PopupMenuButton和IconButton来实现菜单和工具栏，用于更改主内容区域的文本颜色。