Flutter -如何在单击时切换FlatButton的颜色？

在Flutter中，FlatButton 是一个已经废弃的Widget，建议使用 TextButton 或者 ElevatedButton 来替代。不过，为了回答你的问题，我会展示如何使用 FlatButton 来实现单击时切换颜色的功能。

首先，你需要一个状态变量来跟踪按钮的颜色状态。然后，在按钮的 onPressed 回调中切换这个状态。这里是一个简单的例子：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Button Color Toggle')),
        body: Center(child: ColorToggleButton()),
      ),
    );
  }
}

class ColorToggleButton extends StatefulWidget {
  @override
  _ColorToggleButtonState createState() => _ColorToggleButtonState();
}

class _ColorToggleButtonState extends State<ColorToggleButton> {
  bool _isRed = true;

  void _toggleColor() {
    setState(() {
      _isRed = !_isRed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: _toggleColor,
      child: Text('Toggle Color'),
      color: _isRed ? Colors.red : Colors.blue,
    );
  }
}

在这个例子中，我们创建了一个名为 ColorToggleButton 的 StatefulWidget。它有一个状态变量 _isRed，用来表示按钮当前是否为红色。每次点击按钮时，_toggleColor 方法会被调用，它会切换 _isRed 的值，并且通过 setState 触发界面的重建，从而改变按钮的颜色。

如果你想要使用更新的Widget，可以将 FlatButton 替换为 TextButton 或者 ElevatedButton，代码类似，只是Widget的构造函数参数有所不同。

例如，使用 TextButton 的代码如下：

TextButton(
  onPressed: _toggleColor,
  child: Text('Toggle Color'),
  style: TextButton.styleFrom(
    backgroundColor: _isRed ? Colors.red : Colors.blue,
  ),
)

在这个例子中，我们使用了 TextButton.styleFrom 方法来设置按钮的背景颜色。

这种切换颜色的方法适用于任何需要根据用户交互改变UI状态的场景。