Flutter ListView刷新问题

Question

做的是文字类对话游戏,需要用循环播放剧本

List messages = []; //消息容器列表

//聊天页面
Column(children: [
            Flexible(
                child: SizeCacheWidget(
                    estimateCount: 60,
                    child: Padding(
                        padding: EdgeInsets.only(
                            top: 40.h, bottom: choose_one.isEmpty ? 0 : 80.h),
                        child: ListView.builder(
                          controller: _scrollController, //绑定控件
                          scrollDirection: Axis.vertical, //垂直滑动
                          reverse: false, //正序显示
                          shrinkWrap: true, //内容适配
                          physics: BouncingScrollPhysics(), //内容超过一屏 上拉有回弹效果
                          itemBuilder: (_, int index) => messages[index],
                          itemCount: messages.length,
                        ))))
          ])

//消息气泡类:中气泡
class MiddleMsg extends StatelessWidget {
  MiddleMsg({required this.text});
  final String text; //消息气泡内文本

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(top: 10.h), //消息间隔
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center, //水平居中对齐
            children: <Widget>[
              // 消息气泡容器
              Container(
                  padding: EdgeInsets.all(10.r), //容器内边距
                  //圆角
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(38, 38, 38, 1), //容器背景颜色
                      borderRadius:
                          BorderRadius.all(Radius.circular(7))), //圆角角度
                  //消息文本
                  child: Text(
                    text,
                    textAlign: TextAlign.center, 
                    style:
                        TextStyle(fontSize: 20.sp)
                  )),
            ]));
  }
}

//发送中气泡
  sendMiddle(String text)  {
    MiddleMsg message = MiddleMsg(text: text);
    messages.add(message);
    setState(() {});
  }

//模拟播放剧本
List msg = ['对方已上线', '对方已上线', '对方已上线', '对方已上线', '对方已上线'];
  test() {
    do {
      for (var value in msg) {
        sendMiddle(value);
      }
    } while (messages.length < msg.length);
  }

运行,本来我是想发送出来的消息是逐条刷新的(模拟真实聊天),没想到一次刷新出全部来,我该如何修改,试过用Timer和Future.delayed延迟执行,但还是没有达到我想要的效果,加了延迟也还是一次全部刷新出来

Answer 1

要实现逐条刷新的效果，可以使用Future的延迟来模拟聊天的时间间隔，以便一条一条地添加消息并更新UI。下面是一个简单的实现示例：

test() async {
  for (var value in msg) {
    sendMiddle(value);
    await Future.delayed(Duration(seconds: 1)); // 模拟聊天间隔为1秒
  }
}