Flutter中如何实现延时逐字显示单词内容并动态添加Widget

1. 拆分单词生成指定格式数组 #

使用字符串split方法拆分单个字符，遍历判断是否为末位字符，拼接后缀即可，示例代码：

const targetWord = 'money';
// 输出结果为 ['m-', 'o-', 'n-', 'e-', 'y']
const formattedCharList = targetWord.split('').map((char, index) => {
  return index === targetWord.length - 1 ? char : `${char}-`;
});

2. 定时器实现动态追加显示 #

核心逻辑为维护一个指向字符数组的指针，每2秒指针后移一位，将对应字符拼接至当前展示文本末尾，指针超出数组长度时销毁定时器即可。以下提供两种常见场景的实现：

原生JavaScript实现 #

<!-- 展示容器 -->
<div id="textContainer"></div>
<script>
const targetWord = 'money';
const formattedCharList = targetWord.split('').map((char, index) => index === targetWord.length - 1 ? char : `${char}-`);
const container = document.getElementById('textContainer');
let currentPointer = 0;

// 首次渲染第一个字符
container.innerText = formattedCharList[currentPointer];
currentPointer++;

const renderTimer = setInterval(() => {
  if (currentPointer >= formattedCharList.length) {
    // 所有字符渲染完成，清除定时器避免内存泄漏
    clearInterval(renderTimer);
    return;
  }
  // 追加字符
  container.innerText += formattedCharList[currentPointer];
  currentPointer++;
}, 2000);
</script>

React实现 #

import { useState, useEffect } from 'react';

const ProgressiveText = () => {
  const [showText, setShowText] = useState('');
  const targetWord = 'money';
  const formattedCharList = targetWord.split('').map((char, index) => index === targetWord.length - 1 ? char : `${char}-`);

  useEffect(() => {
    let currentPointer = 0;
    setShowText(formattedCharList[currentPointer]);
    currentPointer++;

    const renderTimer = setInterval(() => {
      if (currentPointer >= formattedCharList.length) {
        clearInterval(renderTimer);
        return;
      }
      setShowText(prev => prev + formattedCharList[currentPointer]);
      currentPointer++;
    }, 2000);

    // 组件卸载时清除定时器
    return () => clearInterval(renderTimer);
  }, []);

  return <span>{showText}</span>;
};

export default ProgressiveText;

其他框架的实现逻辑完全一致，仅UI更新的API存在差异。

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