使用区块

什么是区块？

注意： blocks 与此应用程序中也使用的 blocs 不同。

区块是 Flutter 新闻模板使用的数据格式，以确保各种新闻内容能够以一致的方式显示。客户端应用程序期望从服务器接收基于区块格式的数据。例如，Article 模型类包含一个区块列表。

这些区块包含应用程序渲染相应小部件所需的数据。

如实现 API 数据源中所述，您的后端负责将来自 CMS 的数据转换为应用程序期望的基于区块的格式。然后，应用程序会根据其内部渲染规则显示数据。

下图概述了区块在示例模板应用程序中的使用方式

在此示例中，来自 CMS 的数据由 Dart Frog 服务器转换为 PostLargeBlock，以响应来自应用程序的请求。CategoryFeed 小部件从应用程序的 FeedBloc 接收数据，并将 PostLargeBlock 提供给新构造的 PostLarge 小部件，以指示小部件应该在屏幕上渲染什么数据。

使用区块

您可以在 lib/article/widgets/article_content_item.dart 和 lib/article/widgets/category_feed_item.dart 文件中查看区块及其相应小部件之间的关系。

ArticleContentItem 指定区块如何在文章视图中呈现，而 CategoryFeedItem 指定区块如何在 Feed 视图中呈现。这两个类还为在用户交互（例如按下或点击）时表现出行为的小部件提供回调。浏览这些文件以查看可直接用于您的应用程序的可用区块。

请注意，如果您的 CMS 以 HTML 格式返回内容，您可能需要分割您的文章，并在 HtmlBlock 中将其提供给应用程序，该 HtmlBlock 会在 Html 小部件中渲染内容。HTML 内容的样式设置在本文档的更新应用程序排版部分中介绍。

另请注意，许多区块文件在其同文件夹中都有一个额外的 .g 文件，该文件与其名称相同。例如，既有 banner_ad_block.dart 也有 banner_ad_block.g.dart。.g 文件包含生成的代码，以支持诸如 JSON 序列化之类的功能。当您更改任何具有关联生成代码的文件时，请确保代码生成运行并与您的源代码内容保持最新。

自定义区块

区块是应用程序新闻内容的基本组织组件。重新排列区块的顺序允许您控制内容的显示方式和位置。

区块组织通常发生在您的 API 中，然后提供给您的应用程序。

参考 article_content_item.dart 和 category_feed_item.dart 文件以了解区块及其相应小部件之间的关系。

广告的放置在更新广告位置部分中介绍，但您可能希望控制其他小部件的放置，例如允许用户订阅邮件列表的 NewsletterBlock。排列区块的一种方法是编辑您的新闻数据源实现的 getFeed 或 getArticle 方法，例如，在返回列表中的第 15 个区块插入一个 NewsletterBlock。使用相同的方法将区块（例如 DividerHorizontalBlock、TextLeadParagraphBlock 和 SpacerBlock）引入到您的应用程序接收的区块提要中，所有这些都允许您进一步自定义应用程序的外观和内容。