Flutter技术需求：实现全屏点击响应与屏幕显示控制台输出

完整修改代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp(
    nome: 'John',
  ));
}

class MyApp extends StatefulWidget {
  final String nome;
  const MyApp({super.key, required this.nome});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int salary = 0;
  // 存储屏幕显示的日志信息
  List<String> logMessages = [];

  void addSalary(int value) {
    setState(() {
      salary += value;
    });
  }

  // 同步更新控制台日志和屏幕显示日志
  void addLog(String message) {
    print(message);
    setState(() {
      logMessages.add(message);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GestureDetector(
          // 全屏点击触发
          onTap: () {
            addLog('User clicked');
            addSalary(200);
            addLog('salary changed to: $salary');
          },
          child: Container(
            width: double.infinity,
            height: double.infinity,
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'The salary of ${widget.nome} is $salary',
                  style: const TextStyle(fontSize: 18),
                ),
                const SizedBox(height: 20),
                const Text(
                  '操作日志:',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
                // 滚动显示日志列表
                Expanded(
                  child: ListView.builder(
                    itemCount: logMessages.length,
                    itemBuilder: (context, index) {
                      return Text(logMessages[index]);
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

需求1：实现全屏点击 #

原代码中GestureDetector仅包裹Text组件，所以只有文本区域能响应点击。修改方案：

• 用MaterialApp+Scaffold作为根组件，搭建标准Flutter应用结构
• 让GestureDetector的子组件是一个占满全屏的Container（设置width: double.infinity, height: double.infinity），这样整个屏幕区域都能触发点击事件

需求2：屏幕显示操作日志 #

要把控制台打印的内容同步到屏幕上，需要：

• 新增状态变量logMessages，用列表存储每次操作的日志内容
• 封装addLog方法，同时完成控制台打印和日志列表的状态更新
• 在UI中添加ListView.builder组件展示日志，并用Expanded包裹，保证日志区域可以滚动（避免内容过多导致溢出）

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