第二步：向付费墙页面添加数据
在获取所有必要的产品数据之后，接下来就可以将这些数据映射到你在 FlutterFlow 中设计的精美付费墙页面了。本示例将演示如何映射产品标题和价格。
步骤 2.1：将产品名称添加到付费墙页面
- 双击付费墙页面上的产品文本。在 Set from Variable 窗口中，搜索
getPaywallProductResult变量并选择它。
- 按如下方式填写字段：
- Available Options: Data Structured Field
- Select Field: value
- Available Options: Item at Index
- List Index Options: First
- Available Options: Data Structured Field
- Select Field: localizedTitle
- Default Variable Value: null
- UI Builder Display Value: 任意内容，示例中为
product.title
- 点击 Confirm 保存更改。
步骤 2.2. 在付费墙页面添加价格文本
重复步骤 2.1 中的操作，为价格文本进行设置，如下所示：
- 双击付费墙页面上的价格文本。在 Set from Variable 窗口中，搜索
getPaywallProductResult变量并选择它。
- 按如下方式填写各字段：
- Available Options：Data Structured Field
- Select Field：value
- Available Options：Item at Index
- List Index Options：First
- Available Options：Data Structured Field
- Select Field：price
- Default Variable Value：null
- UI Builder Display Value：任意内容，在示例中为
product.price
- 点击 Confirm 按钮保存更改。
在付费墙页面添加本地货币价格
-
双击付费墙页面上的价格。在 Set from Variable 窗口中，搜索
getPaywallProductResult变量并选择它。 -
按如下方式填写字段：
- Available Options: Data Structured Field
- Select Field: value
- Available Options: Item at Index
- List Index Options: First
- Available Options: Data Structured Field
- Select Field: price
- Available Options: Data Structured Field
- Select Field: amount
- Available Options: Decimal
- Decimal Type: Automatic
- Default Variable Value: null
- UI Builder Display Value: Anything，示例中为
price.amount
- 点击 Confirm 保存更改。
就这样！现在，当你启动应用时，它会将 Adapty 付费墙中的产品数据直接显示在你的付费墙页面上！
接下来，是时候让你的用户购买这个产品了。