【问题标题】:How to build widgets based on if-else statement?如何基于 if-else 语句构建小部件?
【发布时间】:2018-11-28 07:37:39
【问题描述】:

我需要根据数据构建一个小部件,如下所示。 我需要先运行 CircularProgressIndicator。我的问题是我需要从服务器 1 获取数据。如果服务器 1 没有数据,请停止 CircularProgressIndicator 并显示“未找到注册”小部件。如果服务器 1 有数据,则从服务器 2 获取详细数据。如果服务器 2 没有数据,则显示“临时数据不可用”小部件。如果服务器 2 有数据,则显示“服务器 2 数据小部件”

Run loading animation widget (CircularProgressIndicator)
    - Get Data from Server 1
        - If Server 1 Data is okay
            - Get Data from Server 2 using Server 1 Data item value
                - If Server 2 Data is okay
                    - Show Server 2 Data Widget
                - Else
                    - Show “Temporarily Data is not available” Widget
       - Else
            - Show “No Registration Found” Widget

我尝试创建一个布尔变量,并在主构建小部件中尝试显示页面。但是我不断收到错误并一直显示“未找到注册”小部件,几秒钟后,当我使用 setState 获取服务器 2 数据时,它显示“服务器 2 数据小部件”。但它从不显示 CircularProgressIndicator。知道如何根据我上面解释的 if else 语句构建小部件。

bool _runLoading = true;
bool _data1 = false;
bool _data2 = false;

    return _runLoading == true
        ? _buildLoadingAnimation
        : _data2 == true
          ? _buildServer2Data
          : _buildNoDataFound

【问题讨论】:

  • ¿您能在决定构建什么的地方添加代码吗?

标签: if-statement widget flutter


【解决方案1】:

我觉得可以是这样的:

Future makeRequest1() {
  // make first request
}

Future makeRequest2() {
  // make second request
}

@override
Widget build(BuildContext context) {
  return FutureBuilder(
    future: makeRequest1(),
      builder: (context, snapshot) {
    if (snapshot.hasData) {

      if ([Server 1 Data is okay]) {
        return FutureBuilder(
          future: makeRequest2(),
            builder: (context, snapshot) {
          if (snapshot.hasData) {

            if ([Server 2 Data is okay]) {
              return Server2DataWidget();
            } else {
              return TemporarilyDataIsNotAvailableWidget();
            }

          } else {
            return CircularProgressIndicator()
          }
        });
      } else {
        return NoRegistrationFoundWidget();
      }

    } else {
      return CircularProgressIndicator();
    }
  });
}

【讨论】:

  • 谢谢安德烈,我实现了你的代码,它现在可以工作了。
猜你喜欢
  • 1970-01-01
  • 2020-12-29
  • 1970-01-01
  • 2021-04-11
  • 1970-01-01
  • 1970-01-01
  • 2022-08-16
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多