Flutter中点击ElevatedButton后如何在页面显示实时时间与日期？

你的代码问题很明确：

• 在setState闭包内定义的date是局部变量，外部的Text组件根本访问不到它
• 没有在State类中声明一个成员变量来持久化存储要显示的日期值

下面是修复后的完整代码示例：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

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

  @override
  State<DateDisplayPage> createState() => _DateDisplayPageState();
}

class _DateDisplayPageState extends State<DateDisplayPage> {
  // 声明成员变量存储要显示的日期，初始值为null
  String? _displayDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  // 更新成员变量，而不是定义局部变量
                  _displayDate = DateFormat('yyyy-MM-dd HH:mm:ss').format(DateTime.now());
                });
              },
              child: const Text(
                'Show Time',
                style: TextStyle(fontSize: 20),
              ),
            ),
            const SizedBox(height: 150),
            // 根据变量是否为空显示不同内容，避免空指针
            Text(_displayDate != null ? 'Date is: $_displayDate' : '点击按钮显示日期'),
          ],
        ),
      ),
    );
  }
}

关键修改说明： #

1. 在_DateDisplayPageState类中添加了String? _displayDate;成员变量，用来存储要展示的日期字符串
2. 按钮点击时，直接更新这个成员变量并触发setState，通知Flutter框架重新构建UI
3. Text组件做了空安全处理，避免变量未初始化时出现错误，同时默认提示用户点击按钮

内容的提问来源于stack exchange，提问作者Eng Mohamed Ragab