flutter的AppBar组件例程

这段代码定义了一个简单的Flutter应用，其主页面包含一个可以改变文本颜色的AppBar。用户可以通过AppBar左侧的弹出菜单或右侧的搜索图标来改变居中文本的字体颜色。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter AppBar Leading 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(Color color) {
    setState(() {
      _textColor = color;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: PopupMenuButton<Color>(
          onSelected: (Color color) {
            // 处理弹出菜单项的选择，并改变字体颜色
            _changeTextColor(color);
          },
          itemBuilder: (BuildContext context) => <PopupMenuEntry<Color>>[
            PopupMenuItem<Color>(
              value: Colors.red,
              child: Text('Red'),
            ),
            PopupMenuItem<Color>(
              value: Colors.green,
              child: Text('Green'),
            ),
            PopupMenuItem<Color>(
              value: Colors.blue,
              child: Text('Blue'),
            ),
          ],
          icon: Icon(Icons.color_lens), // 设置菜单按钮的图标
        ),
        title: Text('Home Page'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 点击搜索按钮，改变字体颜色为黄色
              _changeTextColor(Colors.yellow);
            },
          ),
        ],
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          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 AppBar Leading Example’，主题颜色为蓝色（通过 primarySwatch 属性设置为 Colors.blue），并指定了应用的首页为 MyHomePage。

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

四、_MyHomePageState 类
定义了一个私有变量 _textColor，用于存储文本的颜色，初始值为 Colors.black。
_changeTextColor 方法用于改变文本的颜色，通过调用 setState 方法触发组件的重新构建。
在 build 方法中：
返回一个 Scaffold 实例，构建了应用的基本布局。
appBar 是一个 AppBar 组件：
leading 设置为一个 PopupMenuButton，当点击图标（Icon(Icons.color_lens)）时，会弹出一个菜 单，菜单中有三个选项（红、绿、蓝三种颜色），选择其中一个颜色会调用 _changeTextColor 方法来改变文本的颜色。
title 设置为 ‘Home Page’。
actions 包含一个 IconButton，图标为搜索图标，点击时会调用 _changeTextColor 方法将文本颜色设置为黄色。
body 是一个居中显示的 Text 组件，文本内容为 ‘Hello, Flutter!’，字体大小为 24，加粗显示，颜色由 _textColor 变量决定。

总体来说，这段代码构建了一个具有可交互 AppBar 的 Flutter 应用，通过点击 AppBar 左侧的弹出菜单和右侧的搜索图标可以改变页面主体文本的颜色。