Flutter实现点击按钮切换文本黑绿颜色的技术求助

要实现点击按钮切换文本颜色（黑↔绿），核心是用StatefulWidget管理状态，因为Flutter需要通过状态变更触发UI更新。以下是完整的实现代码：

基础实现（按钮自身文本切换颜色） #

import 'package:flutter/material.dart';

class ToggleTextColorButton extends StatefulWidget {
  const ToggleTextColorButton({super.key});

  @override
  State<ToggleTextColorButton> createState() => _ToggleTextColorButtonState();
}

class _ToggleTextColorButtonState extends State<ToggleTextColorButton> {
  // 状态变量：标记文本是否为绿色，初始为黑色
  bool _isTextGreen = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text(
            'Make Green',
            // 根据状态切换文本颜色
            style: TextStyle(
              color: _isTextGreen ? Colors.green : Colors.black,
            ),
          ),
          color: Colors.green, // 按钮背景色保持绿色
          onPressed: () {
            // 点击时切换状态，调用setState触发UI重建
            setState(() {
              _isTextGreen = !_isTextGreen;
            });
          },
        ),
      ),
    );
  }
}

扩展：同时切换页面其他文本颜色 #

如果需要点击按钮时，既切换按钮自身文本颜色，又切换页面中另一处文本的颜色，只需调整布局即可：

import 'package:flutter/material.dart';

class ColorToggleDemo extends StatefulWidget {
  const ColorToggleDemo({super.key});

  @override
  State<ColorToggleDemo> createState() => _ColorToggleDemoState();
}

class _ColorToggleDemoState extends State<ColorToggleDemo> {
  bool _isTextGreen = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 页面中需要切换颜色的文本
            Text(
              '我是目标文本',
              style: TextStyle(
                fontSize: 24,
                color: _isTextGreen ? Colors.green : Colors.black,
              ),
            ),
            const SizedBox(height: 20),
            RaisedButton(
              child: Text(
                'Make Green',
                style: TextStyle(
                  color: _isTextGreen ? Colors.green : Colors.black,
                ),
              ),
              color: Colors.green,
              onPressed: () {
                setState(() {
                  _isTextGreen = !_isTextGreen;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

关键注意点 #

• 必须用StatefulWidget：StatelessWidget无法保存可变状态，无法实现动态UI更新。
• 必须调用setState()：只有调用这个方法，Flutter才会知道状态已变更，重新构建对应的UI部分。
• 状态变量要定义在State类中：这样状态变更才能被正确追踪和响应。

你之前尝试的color: _wasPressed ? Colors.green : Colors.black逻辑是对的，但缺少状态管理和UI触发更新的步骤，所以点击后没有效果。

内容的提问来源于stack exchange，提问作者takedown dude