时间戳

首页 > 解决方案 > setState 不会导致 UI 刷新

flutter - setState 不会导致 UI 刷新

问题描述

使用有状态的小部件，我有这个构建功能：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            Icon(MdiIcons.atom),
            Text("Message Channel")
          ],
        )
      ),

      body: compileWidget(context),

      bottomSheet: Row(
        children: [
          Expanded(
              child: DefaultTextFormField(true, null, hintText: "Message ...", controller: messageField)
          ),

          IconButton(
              icon: Icon(Icons.send),
              onPressed: onSendPressed
          )
        ],
      ),
    );
  }

正如您在正文中看到的，有一个compileWidget函数定义为：

  FutureBuilder<Widget> compileWidget(BuildContext context) {
    return FutureBuilder(
      future: createWidget(context),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            print("DONE loading widget ");
            return snapshot.data;
          } else {
            return Container(
              child: Center(
                child: CircularProgressIndicator()
              ),
            );
          }
        }
    );
  }

反过来，该createWidget函数如下所示：

List<Widget> bubbles;

  Future<Widget> createWidget(BuildContext context) async {
    await updateChatList();
    // when working, return listview w/ children of bubbles
    return Padding(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: this.bubbles,
      ),
    );
  }

// update chat list below

  Future<void> updateChatList({Message message}) async {
    if (this.bubbles != null) {
      if (message != null) {
        print("Pushing new notification into chat ...");
        this.bubbles.add(bubbleFrom(message));
      } else {
        print("Update called, but nothing to do");
      }
    } else {
      var initMessages = await Message.getMessagesBetween(this.widget.implicatedCnac.implicatedCid, this.widget.peerNac.peerCid);
      print("Loaded ${initMessages.length} messages between ${this.widget.implicatedCnac.implicatedCid} and ${this.widget.peerNac.peerCid}");
      // create init bubble list

      this.bubbles = initMessages.map((e) {
        print("Adding bubble $e");
        return bubbleFrom(e);
      }).toList();
      print("Done loading bubbles ...");
    }
  }

聊天气泡井然有序地填充屏幕。但是，一旦收到新消息并由以下人员接收：

  StreamSubscription<Message> listener;

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

    this.listener = Utils.broadcaster.stream.stream.listen((message) async {
      print("{${this.widget.implicatedCnac.implicatedCid} <=> ${this.widget.peerNac.peerCid} streamer received possible message ...");
      if (this.widget.implicatedCnac.implicatedCid == message.implicatedCid && this.widget.peerNac.peerCid == message.peerCid) {
        print("Message meant for this screen!");
        await this.updateChatList(message: message);
        setState(() {});
      }
    });
  }

“针对此屏幕的消息！” 打印，然后在updateChatList“将新通知推送到聊天中......”打印，暗示气泡被添加到数组中。最后， setState 被调用，但是，额外的气泡没有被渲染。这里可能出了什么问题？

标签： fluttersetstate

解决方案

首先，让我setState根据此链接解释如何工作。

每当您更改对象的内部状态时，请在您传递给State的函数中进行更改。调用通知框架该对象的内部状态已以可能影响该子树中的用户界面的方式发生变化，这导致框架为该对象安排构建。setStatesetStateState

在你的情况下，我会说这只是一个约定。您可以在有状态类中定义一个消息对象并在侦听器中更新它，setstate就像这样：

setState(() { this.message = message; });

警告：

在进行任何更改之前，您需要检查此问题

将 FutureBuilder 与 setState 一起使用

因为使用setstetewithFutureBuilder会造成无限循环，StatefulWidget从而降低性能和灵活性。或许，您应该改变设计屏幕的方法，因为FutureBuilder每次尝试获取数据时都会自动更新状态。

更新：

您的问题有更好的解决方案。因为您正在使用流来读取消息，所以您可以使用StreamBuilder代替侦听器和FutureBuilder. 它为提供数据流的服务带来更少的实现和更高的可靠性。每次StreamBuilder从 Stream 接收到消息时，它都会显示您想要的任何数据快照。

推荐阅读