responseData:他是一个数据,数组成员是对象,所以称为对象数组。
[
{
"patternName": "蔬菜",
"todayIntake": "43",
"childNodes": [
{
"foodSubgroupName": "深绿色蔬菜",
"conversionRecommendedAmounts": "592",
"conversionUnit": "毫升",
"eatingCycle": "周"
},
{
"foodSubgroupName": "其他蔬菜",
"conversionRecommendedAmounts": "1301",
"conversionUnit": "毫升",
"eatingCycle": "周"
}
]
},
{
"patternName": "谷物",
"todayIntake": "77",
"childNodes": [
{
"foodSubgroupName": "精制谷物",
"conversionRecommendedAmounts": "128",
"conversionUnit": "克",
"eatingCycle": "天"
}
]
}
]
responseData数据和组件布局映射关系如下:

绿色方框是子组件,要实现效果:子组件滑动条数据变化时,其父组件的responseData数据也跟着同步变化,(或者父组件滑轨为零时,子食物组的所有checked设置为false,并重新渲染组件)则实现如下:
responseData数据结构如下:
@State responseData: FoodRecommendedAmountsClassSecond[] = [];
@Observed
export class FoodRecommendedAmountsClassSecond {
patternName: string= '';
todayIntake: string= '';//本日摄入
childNodes: FoodRecommendedAmountsInter[]= [];
用@Observed装饰的类FoodRecommendedAmountsClassSecond
@Observed和@ObjectLink类类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步。
父组件传入子组件:
List() {
ForEach(this.responseData,(item:FoodRecommendedAmountsClassSecond)=>{
// 蔬菜组
ListItem() {
List(){
// 蔬菜组标题、目标达成进度
ListItem() {
FoodGroupComponents({info:item});
}
子组件接收如下:
@Component
export default struct FoodGroupComponents {
@ObjectLink info: FoodRecommendedAmountsClassSecond;
...
build() {
Column() {
// 蔬菜组标题
Row() {
Text(this.info.patternName)
...
子组件中@ObjectLink装饰器装饰的状态变量(@ObjectLink info)用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。