flutter的各种button的综合示例

这段代码实现了一个Flutter应用的首页，其中包含一个文本显示和多个按钮，用于切换文本颜色。文本颜色通过_textColor状态变量进行管理，并在点击按钮时切换。容器带有蓝色背景。增加了选择按钮点击，字体颜色变化

import 'package:flutter/material.dart';

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

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

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

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

  void _changeTextColor(String? colorName) {
    if (colorName != null) {
      setState(() {
        switch (colorName) {
          case 'Red':
            _textColor = Colors.red;
            break;
          case 'Green':
            _textColor = Colors.green;
            break;
          case 'Blue':
            _textColor = Colors.blue;
            break;
          default:
            _textColor = Colors.black;
            break;
        }
      });
    }
  }

  String get _currentColorName {
    switch (_textColor) {
      case Colors.red:
        return 'Red';
      case Colors.green:
        return 'Green';
      case Colors.blue:
        return 'Blue';
      default:
        return 'Black';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Windows Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Flutter on Windows!',
              style: TextStyle(
                color: _textColor,
                fontSize: 24,
              ),
            ),
            SizedBox(height: 20), // 添加一些文本和按钮之间的空间
            ElevatedButton(
              onPressed: () => _changeTextColor('Red'),
              child: Text('Red Elevated Button'),
            ),
            SizedBox(height: 10),
            TextButton(
              onPressed: () => _changeTextColor('Green'),
              child: Text('Green Text Button'),
            ),
            SizedBox(height: 10),
            OutlinedButton(
              onPressed: () => _changeTextColor('Blue'),
              child: Text('Blue Outlined Button'),
            ),
            SizedBox(height: 10),
            IconButton(
              onPressed: () => _changeTextColor('Black'),
              icon: Icon(Icons.change_circle),
            ),
            SizedBox(height: 10),
            FloatingActionButton(
              onPressed: () => _changeTextColor('Red'),
              child: Icon(Icons.add),
            ),
            SizedBox(height: 10),
            DropdownButton<String>(
              value: _currentColorName,
              items:
                  <String>['Red', 'Green', 'Blue', 'Black'].map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: _changeTextColor,
            ),
            SizedBox(height: 10),
            PopupMenuButton<String>(
              onSelected: _changeTextColor,
              itemBuilder: (BuildContext context) {
                return <PopupMenuEntry<String>>[
                  PopupMenuItem<String>(
                    value: 'Red',
                    child: Text('Red'),
                  ),
                  PopupMenuItem<String>(
                    value: 'Green',
                    child: Text('Green'),
                  ),
                  PopupMenuItem<String>(
                    value: 'Blue',
                    child: Text('Blue'),
                  ),
                  PopupMenuItem<String>(
                    value: 'Black',
                    child: Text('Black'),
                  ),
                ];
              },
            ),
          ],
        ),
      ),
    );
  }
}

以下是对这段代码的分析：
一、整体结构
这段代码是一个使用 Flutter 框架构建的应用程序，主要在 Windows 平台上展示了一个界面，包含可切换颜色的文本和多种不同类型的按钮（ElevatedButton、TextButton、OutlinedButton、IconButton、FloatingActionButton）以及下拉菜单（DropdownButton）和弹出菜单（PopupMenuButton）。

二、代码详细分析
导入部分
import ‘package:flutter/material.dart’;：导入了 Flutter 的 Material 设计库，以便使用其中的各种 UI 组件。

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

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

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

_MyHomePageState类
定义了一个状态变量_textColor，初始值为Colors.black，用于存储文本的颜色。
_changeTextColor方法：当被调用时，通过setState方法切换文本的颜色在黑色和红色之间。
build方法：
返回一个Scaffold，构建了应用的基本布局结构。
appBar是一个应用栏，显示应用的标题。
body是一个居中的Column布局：
包含一个Text组件，显示 “Hello, Flutter on Windows!”，文本颜色由_textColor决定，字体大小为 24。
多个SizedBox用于在不同的 UI 元素之间添加垂直间距。
ElevatedButton、TextButton、OutlinedButton、IconButton和FloatingActionButton都设置了点击回调为_changeTextColor，用于切换文本颜色。
DropdownButton展示了一个下拉菜单，包含 “Red”、“Green”、“Blue” 三个选项，但目前没有处理选项改变的逻辑。
PopupMenuButton展示了一个弹出菜单，包含 “Red”、“Green”、“Blue” 三个选项，同样没有处理选项选择的逻辑。

三、功能总结
这个应用程序在 Windows 平台上创建了一个界面，用户可以通过点击不同的按钮来切换文本的颜色，同时还展示了下拉菜单和弹出菜单的使用方式，尽管目前这两个菜单的选项选择没有实际的功能实现。整体布局清晰，通过多种按钮和菜单类型展示了 Flutter 中丰富的交互元素。

flutter的各种button的综合示例

悦读