如何在Flutter中为按钮添加点击显示文本的功能？

要实现点击按钮后在屏幕指定位置显示文本，需将原无状态组件改为有状态组件，通过状态变量更新显示内容。以下是修改后的完整代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = '按钮演示App';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  // 存储要显示的文本内容
  String _displayText = '';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          // 显示文本的区域
          Text(
            _displayText,
            style: const TextStyle(fontSize: 24, color: Colors.blue),
          ),
          const SizedBox(height: 30),
          TextButton(
            style: TextButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {
              setState(() {
                _displayText = '你点击了文本按钮！';
              });
            },
            child: const Text('文本按钮'),
          ),
          const SizedBox(height: 30),
          OutlinedButton(
            style: OutlinedButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {
              setState(() {
                _displayText = '你点击了轮廓按钮！';
              });
            },
            child: const Text('轮廓按钮'),
          ),
          const SizedBox(height: 30),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {
              setState(() {
                _displayText = '你点击了填充按钮！';
              });
            },
            child: const Text('填充按钮'),
          ),
          const SizedBox(height: 30),
        ],
      ),
    );
  }
}

核心修改说明： #

• 将原MyStatelessWidget改为MyStatefulWidget，新增对应的状态管理类
• 定义_displayText变量存储显示内容，通过setState()触发界面更新
• 在每个按钮的onPressed回调中修改_displayText的值，实现点击后显示对应文本
• 在布局顶部添加Text组件，用于展示更新后的文本内容

内容的提问来源于stack exchange，提问作者John Doe