Flutter 布局样式根据 api 响应变化

Posted 2023-05-07

【中文标题】Flutter 布局样式根据 api 响应变化

【英文标题】：Flutter layout style change according to api response

【发布时间】：2021-09-18 13:15:17

【问题描述】：

我想根据 api 响应更改布局。例如，如果 api 响应返回 gridview，我想在 gridview 中显示我的数据，如果它返回水平 listview，那么我希望我的数据采用 listview 格式。

所以我的问题是哪个是最好的实施方式？我尝试了 listview builder 但它不起作用。

我将在我的 api 响应中使用我的布局样式。

【参考方案1】：

为此使用 Flutter 的 Futurebuilder。

Future builder 将根据 Api 响应构建小部件。 这是 Future 构建器的示例。

return FutureBuilder(
  future: apiCall(),
  builder: (context, response)
    if(response.hasData)
      var data = response.data;
      if(data["layout"] == "gridview") return GridView.builder();
      else return ListView.builder();
    else return Container();
  ,
);

通过这种方式，您将能够根据 API 响应构建布局。

一如既往..快乐编码

【讨论】：

谢谢，我会试试这个。但是你能解释一下我如何将它与延迟加载或无限滚动集成，在那里我将接收 api 响应并根据响应构建这个布局。

您可以按照与现在非常相似的方式进行延迟加载。它不会影响加载过程。此外，如果您可以附上您的代码，那么这将有助于我们了解您想要实现的目标。

此外，如果此答案对您有所帮助，请不要忘记投票并接受此答案。 :-)

您好，我已附上相关代码。我有一列里面有几个元素我已经使用未来的构建器技术设置了这些元素的布局并且它可以工作。现在，当我向下滚动并到达底部时，我想在我的列中添加这些元素。

感谢附件。您可以使用 ScrollController 轻松实现延迟加载，并在滚动控制器中使用 extend after 添加元素。如果您想要一个详细的答案，只需再打开一个问题，并在此处提及链接。我会在那里给你一个详细的答复。