HarmonyOS ArkUI容器类组件-相对布局容器（RelativeContainer）

最新推荐文章于 2024-05-31 16:47:45 发布
最新推荐文章于 2024-05-31 16:47:45 发布
阅读量344 收藏 3
点赞数 6
分类专栏： HarmonyOS 移动开发 鸿蒙开发 文章标签： harmonyos openharmony 鸿蒙开发 ArkUI 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71263309/article/details/138083137
版权
移动开发 同时被 3 个专栏收录
105 篇文章 2 订阅
订阅专栏
鸿蒙开发
105 篇文章 0 订阅
订阅专栏
HarmonyOS
11 篇文章 0 订阅
订阅专栏

ArkUI 开发框架提供了 RelativeContainer 组件实现相对布局的能力，该布局适用于复杂场景下多元素对齐的情况。该组件可以包含多个子组件，本节笔者简单介绍一下 RelativeContainer 的使用。

RelativeContainer定义介绍

interface RelativeContainerInterface {
    (): RelativeContainerAttribute;
}

declare class RelativeContainerAttribute extends CommonMethod<RelativeContainerAttribute> {
}

RelativeContainer 默认构造方法无需任何额外参数，也没有定义额外的属性方法，简单样例如下所示：

@Entry @Component struct ArkUIClubTest {

  build() {
    Column({space: 10}) {
      RelativeContainer() {
        Text("text1")
          .fontSize(25)
          .width(160)
          .height(150)
          .id("text1")  // 必须添加 id，否则不显示
          .textAlign(TextAlign.End)
          .backgroundColor("#ccaabb")

        Text("text2")
          .fontSize(25)
          .width(90)
          .id("text2")  // 必须添加 id，否则不显示
          .textAlign(TextAlign.Start)
          .backgroundColor("#bbccaa")

        Text("text3")
          .fontSize(25)
          .width(90)
          .margin({top: 50})
          // .id("text3")  // 注释掉id，组件不显示
          .textAlign(TextAlign.Start)
          .backgroundColor("#bbccaa")
      }
      .width("100%")
      .height(190)
      .backgroundColor(Color.Pink)

    }
    .width("100%")
    .height("100%")
    .backgroundColor("#aabbcc")
    .padding(10)
  }

}

样例运行结果如下图所示：

📢：由运行结果可知 RelativeContainer 在默认情况下，子组件是按照堆叠排列并沿着自身左上角对齐。

RelativeContainer对齐介绍

RelativeContainer 对子组件的对齐方式分为水平方向和竖直方向：

  • 设置水平方向对齐

    RelativeContainer 的子组件在水平方向对齐方式分为 left 、middle 和 right，分别说明如下：

    • left： 设置子组件在水平方向上 左边框 的对齐方式，可选值说明如下：

      • HorizontalAlign.Start： 设置子组件左边框相对锚点组件的左边框位置对齐。
      • HorizontalAlign.Center： 设置子组件左边框相对锚点组件的中间位置对齐。
      • HorizontalAlign.End： 设置子组件左边框相对锚点组件的右边框位置对齐。
        @Entry @Component struct ArkUIClubTest {

          build() {
            Column({space: 10}) {
              RelativeContainer() {
                Text("Start")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    left: {
                      anchor: "__container__",
                      align: HorizontalAlign.Start
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(70)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Center")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    left: {
                      anchor: "__container__",
                      align: HorizontalAlign.Center
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(70)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("End")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    left: {
                      anchor: "__container__",
                      align: HorizontalAlign.End
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(70)
              .backgroundColor(Color.Pink)
            }
            .width("100%")
            .height("100%")
            .backgroundColor("#aabbcc")
            .padding({left: 50, top: 10, right: 50, bottom: 10})
          }

        }

样例运行结果如下图所示：

  • right： 设置子组件在水平方向上 右边框 的齐方式，可选值说明如下：
    • HorizontalAlign.Start： 设置子组件右边框相对锚点组件的左边框位置对齐。
    • HorizontalAlign.Center： 设置子组件右边框相对锚点组件的中间点位置对齐。
    • HorizontalAlign.End： 设置子组件右边框相对锚点组件的右边框位置对齐。
@Entry @Component struct ArkUIClubTest {

  build() {
    Column({space: 10}) {
      RelativeContainer() {
        Text("Start")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            right: {
              anchor: "__container__",
              align: HorizontalAlign.Start
            }
          })
          .id("test")
      }
      .width("100%")
      .height(70)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("Center")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            right: {
              anchor: "__container__",
              align: HorizontalAlign.Center
            }
          })
          .id("test")
      }
      .width("100%")
      .height(70)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("End")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            right: {
              anchor: "__container__",
              align: HorizontalAlign.End
            }
          })
          .id("test")
      }
      .width("100%")
      .height(70)
      .backgroundColor(Color.Pink)
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#aabbcc")
    .padding({left: 50, top: 10, right: 50, bottom: 10})
  }

}

样例运行结果如下图所示：

  • 设置竖直方向对齐

RelativeContainer 的子组件在竖直方向对齐配置分为：top、center 和 bottom，分别说明如下：

  • top： 设置子组件在竖直方向上 上边框 的对齐方式，可选值说明如下：

    • VerticalAlign.Top： 设置子组件上边框相对锚点组件的上边框位置对齐。
    • VerticalAlign.Center： 设置子组件上边框相对锚点组件的中间点位置对齐。
    • VerticalAlign.Bottom： 设置子组件上边框相对锚点组件的下边框位置对齐。
@Entry @Component struct ArkUIClubTest {

  build() {
    Column({space: 10}) {
      RelativeContainer() {
        Text("Top")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Top
            }
          })
          .id("test")
      }
      .width("100%")
      .height(90)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("Center")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Center
            }
          })
          .id("test")
      }
      .width("100%")
      .height(90)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("Bottom")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Bottom
            }
          })
          .id("test")
      }
      .width("100%")
      .height(90)
      .backgroundColor(Color.Pink)
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#aabbcc")
    .padding({left: 50, top: 10, right: 50, bottom: 10})
  }

}

样例运行结果如下图所示：

    • center： 设置子组件在竖直方向上 中间点 的对齐方式，可选值说明如下：

      • VerticalAlign.Top： 设置子组件中间点相对锚点组件的上边框位置对齐。
      • VerticalAlign.Center： 设置子组件中间点相对锚点组件的中间点位置对齐。
      • VerticalAlign.Bottom： 设置子组件中间点相对锚点组件的下边框位置对齐。
        @Entry @Component struct ArkUIClubTest {

          build() {
            Column({space: 10}) {
              RelativeContainer() {
                Text("Top")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    center: {
                      anchor: "__container__",
                      align: VerticalAlign.Top
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Center")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    center: {
                      anchor: "__container__",
                      align: VerticalAlign.Center
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Bottom")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    center: {
                      anchor: "__container__",
                      align: VerticalAlign.Bottom
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)
            }
            .width("100%")
            .height("100%")
            .backgroundColor("#aabbcc")
            .padding({left: 50, top: 50, right: 50, bottom: 10})
          }

        }
  • bottom： 设置子组件在竖直方向上 下边框 的对齐方式，可选值说明如下：
    • VerticalAlign.Top： 设置子组件下边框相对锚点组件的上边框位置对齐。
    • VerticalAlign.Center： 设置子组件下边框相对锚点组件的中间点位置对齐。
    • VerticalAlign.Bottom： 设置子组件下边框相对锚点组件的下边框位置对齐。
        @Entry @Component struct ArkUIClubTest {

          build() {
            Column({space: 10}) {
              RelativeContainer() {
                Text("Top")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    bottom: {
                      anchor: "__container__",
                      align: VerticalAlign.Top
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Center")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    bottom: {
                      anchor: "__container__",
                      align: VerticalAlign.Center
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Bottom")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    bottom: {
                      anchor: "__container__",
                      align: VerticalAlign.Bottom
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)
            }
            .width("100%")
            .height("100%")
            .backgroundColor("#aabbcc")
            .padding({left: 50, top: 50, right: 50, bottom: 10})
          }

        }

📢：注意事项：

  • 子组件可以将容器或者其他子组件设为锚点：
    • 参与相对布局的容器内组件必须设置id，不设置id的组件不显示，容器id固定为 __container__。
    • 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个。
    • 前端页面设置的子组件尺寸大小不会受到相对布局规则的影响。子组件某个方向上设置两个或以上alignRules时不建议设置此方向尺寸大小。
    • 对齐后需要额外偏移可设置offset。
  • 特殊情况
    • 互相依赖，环形依赖时容器内子组件全部不绘制。
    • 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。

完整样例

@Entry @Component struct ArkUIClubTest {

  build() {
    Column() {
      RelativeContainer() {
        Row()
          .width(100)
          .height(100)
          .backgroundColor("#FF3333")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Top
            },
            left: {
              anchor: "__container__",
              align: HorizontalAlign.Start
            }
          })
          .id("row1")

        Row()
          .width(100)
          .height(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Top
            },
            right: {
              anchor: "__container__",
              align: HorizontalAlign.End
            }
          })
          .id("row2")

        Row().height(100)
          .backgroundColor("#FF6633")
          .alignRules({
            top: {
              anchor: "row1",
              align: VerticalAlign.Bottom
            },
            left: {
              anchor: "row1",
              align: HorizontalAlign.End
            },
            right: {
              anchor: "row2",
              align: HorizontalAlign.Start
            }
          })
          .id("row3")

        Row()
          .backgroundColor("#FF9966")
          .alignRules({
            top: {
              anchor: "row3",
              align: VerticalAlign.Bottom
            },
            bottom: {
              anchor: "__container__",
              align: VerticalAlign.Bottom
            },
            left: {
              anchor: "__container__",
              align: HorizontalAlign.Start
            },
            right: {
              anchor: "row1",
              align: HorizontalAlign.End
            }
          })
          .id("row4")

        Row()
          .backgroundColor("#FF66FF")
          .alignRules({
            top: {
              anchor: "row3",
              align: VerticalAlign.Bottom
            },
            bottom: {
              anchor: "__container__",
              align: VerticalAlign.Bottom
            },
            left: {
              anchor: "row2",
              align: HorizontalAlign.Start
            },
            right: {
              anchor: "__container__",
              align: HorizontalAlign.End
            }
          })
          .id("row5")
      }
      .width(300)
      .height(300)
      .border({ width: 3, color: "#6699FF" })
    }
    .height('100%')
    .width("100%")
    .padding(10)
  }
}

码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线。大家可以进行参考学习：https://qr21.cn/FV7h05

①全方位，更合理的学习路径：
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！

②多层次，更多的鸿蒙原生应用：
路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。

③实战化，更贴合企业需求的技术点：
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：https://qr21.cn/FV7h05

如何快速入门：

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr21.cn/FV7h05

大厂鸿蒙面试题：：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

小米椒……
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
harmonyos2-container-interop:容器互操作性
07-01
和声2 容器互操作性 弃用警告！ 从 2017 年 2 月 13 日开始，container-interop 正式弃用，取而代之的是 . Container-interop 一直是 PSR-11 的试验台。 从 v1.2 开始，container-interop 直接扩展了 PSR-11 接口。 因此，所有实现容器互操作的容器现在实际上都与 PSR-11 兼容。 鼓励实现容器互操作接口的项目直接实现 PSR-11 接口。 强烈鼓励使用容器互操作接口的项目直接在 PSR-11 接口上进行类型提示，以便与与容器互操作不兼容的 PSR-11 容器兼容。 关于委托查找功能，它存在于容器互操作中而不是 PSR-11 中，该功能实际上是一种设计模式。 因此它不被弃用。 将来有关此设计模式的文档将从此存储库迁移到单独的网站。 关于 container-interop尝试识别和标准化容器对象（服务定位器、依赖注入容器等）中的特性，以实现互操作性。 通过讨论和试验，我们尝试创建一个标准，由通用接口和建议组成。 如果提供容器实现的 PHP 项目开始采用这些通用标准，那么使用容器的 PHP 应用程序和项目就
HarmonyOS应用开发实战-容器组件.docx
最新发布
06-03
HarmonyOS应用开发实战-容器组件
行业分类-设备装置-具有容器的纸盒.zip
09-08
行业分类-设备装置-具有容器的纸盒.zip
行业分类-设备装置-包装容器纸板.zip
08-23
行业分类-设备装置-包装容器纸板.zip
行业分类-设备装置-容器代笔画法.zip
09-01
行业分类-设备装置-容器代笔画法.zip
鸿蒙开发笔记(十六): 相对布局 RelativeContainer,栅格布局 GridRow/GridCol,媒体查询 mediaquery
Waruler的博客
01-19 667
相对布局 RelativeContainer,栅格布局 GridRow/GridCol,媒体查询 mediaquery
HarmonyOS ArkUI常用布局及组件库介绍
weixin_44640245的博客
01-03 696
HarmonyOS ArkUI常用布局及组件库介绍
OpenHarmony实战开发-相对布局 (RelativeContainer)
m0_70749039的博客
04-26 678
在应用的开发过程中，经常需要设计复杂界面，此时涉及到多个相同或不同组件之间的嵌套。如果布局组件嵌套深度过深，或者嵌套组件数过多，会带来额外的开销。如果在布局的方式上进行优化，就可以有效的提升性能，减少时间开销。请参考优化布局时间了解RelativeContainer相对于List，在布局时间上的性能提升。
HarmonyOS UI布局-性能优化
1
04-23 357
应用开发中的用户界面（UI）布局是用户与应用程序交互的关键部分。使用不同类型的布局可以将页面排布的更加美观，但也容易带来不合理的布局。不合理的布局虽然能在界面显示上达到相同效果，但是过度的布局计算，界面嵌套带来了渲染和计算的大量开销，造成性能的衰退，本文重点介绍了几种常见的布局功能和适用场景，同时提供了几种优化布局结构的方法。内置ArkUI Inspector工具，开发者可以使用ArkUIInspector，在DevEco Studio上查看应用在真机上的UI显示效果。
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
初级认证 HarmonyOS应用开发能力工程师模拟测试
鸿蒙ArkUI开发：常用布局【相对布局】
m0_62167422的博客
05-14 780
从上面的OpenHarmony技术梳理来看，，下面推荐一些：完整内容可在头像页保存，或这。
OpenHarmony实战开发-应用列表场景性能提升实践。
m0_70749039的博客
04-22 745
在应用的UI开发中，使用列表是一种常规场景，因此，对列表性能进行优化是非常重要的。本文将针对应用开发列表场景的性能提升实践方法展开介绍。
鸿蒙HarmonyOS实战-ArkUI组件（RelativeContainer）
shudaoshanQAQ的博客
01-04 1513
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。想要获取文中提到的学习资料，请点击→全套鸿蒙HarmonyOS学习资料或者关注小编后私信回复【666】也可获取资料哦~~
HarmonyOS鸿蒙学习笔记（28）@entry和@Component的生命周期
菜鸟博客
05-31 1009
@entry和@Component的生命周期
鸿蒙工程目录介绍
shinecjj的博客
05-30 511
鸿蒙项目目录
市场巨变，移动开发行业即将迎来“第二春”?
maniuT的博客
05-29 1094
随着鸿蒙生态的不断壮大，越来越多的企业开始加入其中，对鸿蒙OS开发工程师的需求也越来越迫切。年初时还只有200个APP宣布加入鸿蒙生态，而最近华为也已经官宣，已经有4000+多个应用加入鸿蒙，短短三个月就增加了20倍。对于那些有志于从事鸿蒙开发的人来说，这是一个难得的机会。随着越来越多的互联网企业加入到鸿蒙生态当中，随着鸿蒙强势崛起是不是暗示着。
【错误记录】HarmonyOS 运行报错 ( Failure INSTALL_PARSE_FAILED_USESDK_ERROR )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-28 1165
Failure[INSTALL_PARSE_FAILED_USESDK_ERROR] compileSdkVersion and releaseType of the app do not match the apiVersion and releaseType on the device.
Container 布局容器样式 element-plus
05-13
Element Plus 是一套基于 Vue.js 2.0 的 UI 组件库，它提供了一系列常用的 UI 组件，如按钮、表格、表单、弹窗等。在 Element Plus 中，容器布局组件是用来对其他组件进行布局的，常用的容器布局组件有： 1. el-row：行布局容器，用于在水平方向上排列一组列组件。 2. el-col：列布局容器，用于在垂直方向上排列一组行组件。 3. el-container：容器布局容器，用于包含一组布局组件，并提供一些基本的布局样式。 4. el-header：顶部布局容器，用于包含顶部的布局组件。 5. el-aside：侧边栏布局容器，用于包含侧边栏的布局组件。 6. el-main：主体布局容器，用于包含主体区域的布局组件。 这些容器布局组件都提供了一些基本的样式，如 margin、padding、background-color 等，可以通过设置这些样式来实现各种布局效果。例如，可以通过设置 el-row 和 el-col 的 gutter 属性来控制它们之间的间距，通过设置 el-container 的 background-color 属性来设置容器的背景色等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值