HarmonyOS 鸿蒙Next 关于text 渲染多级数据问题

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 关于text 渲染多级数据问题

数据格式如下

{
    “code”: 0,
    “data”: {
        “goods_id”: 766,
        “name”: “疯狂动物城 可爱出圈 -100%动物奶油”,
        “subtitle”: “”,
        “batching”: “100%使用动物稀奶油”,
        “describe”: “”,
        “expiration_date”: “1天”,
        “storage_mode”: “冷藏”,
        “other_describe”: “”,
        “quantity_sold”: 58,
        “freight”: 0,
        “is_cake”: 2,
        “production_time”: 0,
        “cover_url”: “https://p1-cdn-holiland.1900m.com/goods/detail_img_h/202409/04/2922a1725442609b1739.jpg”,
        “sale_model”: 0,
        “restricted_num”: 0,
        “restricted_mode”: 1,
        “least_buy_num”: 0,
        “sale_start_time”: “”,
        “sale_end_time”: “”,
        “delivery_start_time”: “”,
        “delivery_end_time”: “”,
        “buy_status”: 1,
        “other_xcx_app_id”: “”,
        “other_xcx_path”: “”,
        “other_xcx_ad_image_url”: “”,
        “activity_list”: [

        ],
        “all_event_list”: [

        ],
        “carousel_image_list”: [
            {
                “image_url”: “https://p1-cdn-holiland.1900m.com/goods/detail_img_h/202409/04/2922a1725442609b1739.jpg
            }
        ],
        “introduce_image_list”: [
            {
                “image_url”: “https://p1-cdn-holiland.1900m.com/goods/introduce_img/202409/04/2922a1725442851b8291.jpg
            },
            {
                “image_url”: “https://p1-cdn-holiland.1900m.com/goods/introduce_img/202409/04/2922a1725442880b5299.jpg
            }
        ],
        “sku”: [
            {
                “flavor_name”: “巧克力海盐芝士口味”,
                “specification_list”: [
                    {
                        “sku_id”: 1713,
                        “specification_name”: “Φ15cm*6cm”,
                        “horizontal_image_url”: “https://p1-cdn-holiland.1900m.com/goods/cover_s/202409/04/2922a1725442796b1739.jpg”,
                        “net_quantity”: “”,
                        “production_time”: 180,
                        “diners_number_config”: “2,4”,
                        “proposal”: “建议2至4人食用”,
                        “original_price”: 0,
                        “price”: “299.00”,
                        “stock”: 999999999,
                        “rationed_stock”: 0,
                        “rationed_initial_stock”: 0
                    }
                ]
            }
        ]
    },
    “message”: “成功”,
    “timestamp”: “1736216000”
}

深色代码主题
复制
使用数据 直接报错
Text(){
Span(‘¥’)
Span(this.goodsParam.sku[0].specification_list[0].price)
}.fontColor(’#cb986d’)

是不可以嵌套这么深的吗


更多关于HarmonyOS 鸿蒙Next 关于text 渲染多级数据问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

cke_177.png

cke_896.png

  [@State](/user/State)

  goodsParam: IShopDetail = {} as IShopDetail

接口类型

export interface IShopDetail {

  activity_list:Array<string>

  all_event_list:Array<string>

  batching:string

  buy_status:number

  carousel_image_list:Array<ICarouser>

  cover_url:string

  delivery_end_time:string

  delivery_start_time:string

  describe:string

  expiration_date:string

  freight:string

  goods_id:string

  introduce_image_list:ICarouser[]

  is_cake:number

  least_buy_num:number

  name:string

  other_describe:string

  other_xcx_ad_image_url:string

  other_xcx_app_id:string

  other_xcx_path:string

  production_time:number

  quantity_sold:number

  restricted_mode:number

  restricted_num:number

  sale_end_time:string

  sale_model:number

  sale_start_time:string

  sku:ISku[]

  storage_mode:string

  subtitle:string

}

更多关于HarmonyOS 鸿蒙Next 关于text 渲染多级数据问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


onReady里面接的数据?并且还await一下?大概率,是先构建UI,数据没回来。然后就空了。Text 里面加非空判断吧

获取数据放在aboutToApper

如果是json类型就可以直接使用的啊
深色代码主题
复制
@Entry
@Component
struct Tab {
  good =
    '{\"code\":0,\"data\":{\"goods_id\":766,\"name\":\"疯狂动物城 可爱出圈 -100%动物奶油\",\"subtitle\":\"\",\"batching\":\"100%使用动物稀奶油\",\"describe\":\"\",\"expiration_date\":\"1天\",\"storage_mode\":\"冷藏\",\"other_describe\":\"\",\"quantity_sold\":58,\"freight\":0,\"is_cake\":2,\"production_time\":0,\"cover_url\":\"https://p1-cdn-holiland.1900m.com/goods/detail_img_h/202409/04/2922a1725442609b1739.jpg\",\"sale_model\":0,\"restricted_num\":0,\"restricted_mode\":1,\"least_buy_num\":0,\"sale_start_time\":\"\",\"sale_end_time\":\"\",\"delivery_start_time\":\"\",\"delivery_end_time\":\"\",\"buy_status\":1,\"other_xcx_app_id\":\"\",\"other_xcx_path\":\"\",\"other_xcx_ad_image_url\":\"\",\"activity_list\":[],\"all_event_list\":[],\"carousel_image_list\":[{\"image_url\":\"https://p1-cdn-holiland.1900m.com/goods/detail_img_h/202409/04/2922a1725442609b1739.jpg\"}],\"introduce_image_list\":[{\"image_url\":\"https://p1-cdn-holiland.1900m.com/goods/introduce_img/202409/04/2922a1725442851b8291.jpg\"},{\"image_url\":\"https://p1-cdn-holiland.1900m.com/goods/introduce_img/202409/04/2922a1725442880b5299.jpg\"}],\"sku\":[{\"flavor_name\":\"巧克力海盐芝士口味\",\"specification_list\":[{\"sku_id\":1713,\"specification_name\":\"Φ15cm*6cm\",\"horizontal_image_url\":\"https://p1-cdn-holiland.1900m.com/goods/cover_s/202409/04/2922a1725442796b1739.jpg\",\"net_quantity\":\"\",\"production_time\":180,\"diners_number_config\":\"2,4\",\"proposal\":\"建议2至4人食用\",\"original_price\":0,\"price\":\"299.00\",\"stock\":999999999,\"rationed_stock\":0,\"rationed_initial_stock\":0}]}]},\"message\":\"成功\",\"timestamp\":\"1736216000\"}'
  goodsParam: ESObject = JSON.parse(this.good)

build() { Column() { Text() { Span(‘¥’) Span(this.goodsParam.data.sku[0].specification_list[0].price) }.fontColor(’#cb986d’) } } }

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17

方便了解下咱这个
深色代码主题
复制
goodsParam 

是啥类型的数据嘛?

深色代码主题
复制
goodsParam 是啥?string?

export interface IShopDetail {

activity_list:Array<string>

all_event_list:Array<string>

batching:string

buy_status:number

carousel_image_list:Array<ICarouser>

cover_url:string

delivery_end_time:string

delivery_start_time:string

describe:string

expiration_date:string

freight:string

goods_id:string

introduce_image_list:ICarouser[]

is_cake:number

least_buy_num:number

name:string

other_describe:string

other_xcx_ad_image_url:string

other_xcx_app_id:string

other_xcx_path:string

production_time:number

quantity_sold:number

restricted_mode:number

restricted_num:number

sale_end_time:string

sale_model:number

sale_start_time:string

sku:ISku[]

storage_mode:string

subtitle:string

} 就是我发的那种数据

在HarmonyOS鸿蒙Next系统中,处理text渲染多级数据的问题,通常涉及数据结构的组织、递归渲染逻辑以及UI组件的嵌套使用。

首先,确保你的数据结构是树形或层级结构,这样便于递归遍历。例如,可以使用嵌套的List或自定义的TreeNode类来组织数据。

其次,在布局文件中,定义可复用的模板组件,用于渲染单个数据项。这个模板组件应该能够接收并显示数据项的基本信息,如文本内容等。

接着,在JavaScript或TypeScript代码中,编写递归渲染逻辑。遍历你的数据结构,对于每一层数据,创建并配置一个新的模板组件实例,将其添加到UI树中。如果数据项有子项,则对子项递归调用渲染逻辑。

此外,考虑使用HarmonyOS提供的List组件或自定义的滚动视图来处理大数据量的情况,以提高性能。

最后,确保你的渲染逻辑正确处理了数据项的更新和删除操作,以维护UI的一致性和响应性。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部