Flutter实现通过代码更新TextField显示滚动调试信息

步骤1：添加依赖 #

在pubspec.yaml里加入circular_buffer包：

dependencies:
  flutter:
    sdk: flutter
  record: ^最新版本
  path_provider: ^最新版本
  intl: ^最新版本
  circular_buffer: ^最新版本

步骤2：修改状态类，集成环形缓冲区 #

在myAppState里添加变量和方法管理日志：

class myAppState extends State<myApp> {
  final record = Record();
  bool bPressed = false;
  // 环形缓冲区，最多存10条日志（可按需调整）
  final CircularBuffer<String> _logBuffer = CircularBuffer(10);
  // TextField显示的拼接日志文本
  String _logText = '';
  // 记录录制开始时间，用于计算时长
  DateTime? _recordingStartTime;

  @override
  void initState() {
    super.initState();
    _updateLogDisplay();
  }

  // 添加日志并更新UI
  void _addLog(String message) {
    setState(() {
      _logBuffer.add(message);
      _updateLogDisplay();
    });
  }

  // 将缓冲区内容转为多行文本
  void _updateLogDisplay() {
    _logText = _logBuffer.toList().join('\n');
  }

  // 原有代码保持不变
}

步骤3：修改录制逻辑，添加日志 #

更新action方法，在录制关键节点生成日志：

Future<void> action() async {
  bool isRecording = await record.isRecording();

  if (await record.hasPermission()) {
    if (isRecording) {
      // 停止录制时生成日志
      await record.stop();
      final duration = DateTime.now().difference(_recordingStartTime!);
      _addLog('录制结束：${DateFormat('HH:mm:ss').format(DateTime.now())}，时长：${duration.inSeconds}秒');
      _recordingStartTime = null;
    } else {
      // 开始录制时生成日志
      _recordingStartTime = DateTime.now();
      Directory appDocDir = await getApplicationDocumentsDirectory();
      String appDocPath = appDocDir.path;
      String outFile = "$appDocPath/${getTimestampSec()}_ambient_test.m4a";
      _addLog('录制开始：${DateFormat('HH:mm:ss').format(_recordingStartTime!)}，文件路径：$outFile');

      await record.start(
        path: outFile,
        encoder: AudioEncoder.aacLc,
        bitRate: 128000,
        samplingRate: 44100,
      );
    }
  }

  _addLog('按钮点击：${bPressed ? "开始录制" : "停止录制"}');
}

步骤4：添加底部日志展示组件 #

修改build方法，在页面底部加入只读TextField：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Record',
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Record'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            child: bPressed ? const Text("Stop") : const Text("Record"),
            onPressed: () {
              setState(() {
                bPressed = !bPressed;
              });
              action();
            },
          ),
          if (bPressed)
            ElapsedTime(timestamp: DateTime.now().toString())
          else
            const Text(""),
          // 底部日志展示区
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                controller: TextEditingController(text: _logText),
                maxLines: null,
                readOnly: true,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: '调试日志',
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

关键说明 #

• 环形缓冲区会自动维护固定数量的日志，超过上限时自动删除最旧条目，避免日志过载
• _addLog方法内调用setState，确保日志更新后UI自动刷新
• 通过记录开始时间、结束时计算时间差得到录制时长，用intl包格式化时间戳提升可读性
• 日志TextField设为只读，maxLines: null支持自动换行

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