我在用Flutter的StreamBuilder构建一个打字游戏时遇到了几个问题：

如何高效地将随机生成的单词通过Stream传递给UI？目前我用Stream.fromIterable()感觉有延迟，有没有更流畅的实现方式？
StreamBuilder的snapshot.data更新时，整个界面会重建，导致输入框失去焦点。如何在保留输入状态的同时只更新单词区域？
游戏需要计时功能，该用Stream.periodic单独创建计时器，还是整合到主数据流里？两种方式对性能影响大吗？
当用户输入错误时，想加入震动反馈，但直接在StreamBuilder的builder里调用hapticFeedback会导致重复震动，该怎么处理？

更多关于Flutter StreamBuilder打字游戏构建的实战教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼

作为屌丝程序员，用Flutter实现一个简单的打字游戏可以这样设计：

使用StreamController创建一个字符流。
在StreamBuilder中监听这个流，实时显示字符。
用户输入与当前字符匹配时，正确计数；否则错误计数。
使用TextField接收用户输入，并实时更新流。

示例代码：

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

void main() => runApp(TypingGame());

class TypingGame extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('打字游戏')),
        body: TypingGameStatefulWidget(),
      ),
    );
  }
}

class TypingGameStatefulWidget extends StatefulWidget {
  @override
  _TypingGameState createState() => _TypingGameState();
}

class _TypingGameState extends State<TypingGameStatefulWidget> {
  final StreamController<String> _stream = StreamController<String>();
  int correct = 0, wrong = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        StreamBuilder<String>(
          stream: _stream.stream,
          builder: (context, snapshot) => Text(snapshot.data ?? ''),
        ),
        TextField(
          onChanged: (input) {
            if (snapshot.data == input) {
              correct++;
            } else {
              wrong++;
            }
            _stream.add(String.fromCharCode(65 + (correct + wrong) % 26));
          },
        ),
        Text('正确: $correct 错误: $wrong')
      ],
    );
  }
}

这段代码通过流动态生成字符，用户输入后实时更新统计。

更多关于Flutter StreamBuilder打字游戏构建的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 2楼

构建一个基于StreamBuilder的Flutter打字游戏，可以按以下思路实现：

定义数据流：创建一个StreamController<String>，用于实时接收用户输入。
初始化文本：准备一段文字作为目标文本（如一句名言）。
监听输入：使用StreamBuilder监听用户的逐字输入，并实时对比目标文本。
UI设计：
- 展示目标文本，已正确输入的部分高亮显示。
- 显示当前输入进度。
状态管理：通过StreamBuilder的snapshot.data获取最新输入内容，动态更新UI。
完成逻辑：当输入完整个目标文本时，停止监听并弹出胜利提示。

代码框架如下：

import 'package:flutter/material.dart';

void main() => runApp(TypingGameApp());

class TypingGameApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TypingGame(),
    );
  }
}

class TypingGame extends StatefulWidget {
  @override
  _TypingGameState createState() => _TypingGameState();
}

class _TypingGameState extends State<TypingGame> {
  final _controller = StreamController<String>();
  String targetText = "Hello World";
  String currentInput = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("打字游戏")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text(targetText, style: TextStyle(fontSize: 24)),
            StreamBuilder<String>(
              stream: _controller.stream,
              builder: (context, snapshot) {
                currentInput = snapshot.data ?? "";
                return Text(currentInput, style: TextStyle(fontSize: 24));
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.add(currentInput);
        },
        child: Icon(Icons.send),
      ),
    );
  }
}

该代码实现了一个基础版本，可根据需求扩展功能，如计时、错误统计等。

bupafengyu 3楼

Flutter StreamBuilder 打字游戏构建指南

使用StreamBuilder构建打字游戏是Flutter中一个很好的实践，它可以帮助你实时更新游戏状态。下面是一个简单的打字游戏构建示例：

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

class TypingGame extends StatefulWidget {
  @override
  _TypingGameState createState() => _TypingGameState();
}

class _TypingGameState extends State<TypingGame> {
  final StreamController<String> _streamController = StreamController();
  final TextEditingController _textController = TextEditingController();
  String targetText = "Flutter is awesome";
  int score = 0;

  @override
  void dispose() {
    _streamController.close();
    _textController.dispose();
    super.dispose();
  }

  void _checkText(String input) {
    if (input == targetText) {
      score += 10;
      _streamController.add("Correct! Score: $score");
      _textController.clear();
      // 可以在这里更新新的目标文本
    } else if (targetText.startsWith(input)) {
      _streamController.add("Keep going...");
    } else {
      _streamController.add("Wrong! Try again");
      _textController.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Typing Game')),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Text('Type this:', style: TextStyle(fontSize: 20)),
            Text(targetText, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            SizedBox(height: 20),
            TextField(
              controller: _textController,
              onChanged: _checkText,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Your input',
              ),
            ),
            SizedBox(height: 20),
            StreamBuilder<String>(
              stream: _streamController.stream,
              initialData: 'Start typing...',
              builder: (context, snapshot) {
                return Text(
                  snapshot.data!,
                  style: TextStyle(fontSize: 18, color: Colors.blue),
                );
              },
            ),
            SizedBox(height: 20),
            Text('Score: $score', style: TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}

游戏功能说明

StreamController 用于管理游戏状态流
TextField 接收用户输入
onChanged 回调实时检查输入
StreamBuilder 显示实时反馈
计分系统 正确完成打字后加分

你可以扩展这个基础版本，添加更多功能如：

倒计时计时器
随机生成目标文本
难度级别
打字速度计算
历史记录

这个示例展示了如何利用Flutter的响应式编程特性构建实时交互游戏。