鸿蒙ArkTS/ArkUI实战-个人中心

最新推荐文章于 2024-07-07 02:40:27 发布

只非鱼

最新推荐文章于 2024-07-07 02:40:27 发布

阅读量586

点赞数 2

分类专栏：鸿蒙应用开发文章标签：鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/qq107117/article/details/137642171

版权

鸿蒙应用开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细描述了如何在个人中心页面中使用Scroll组件和自定义的MyCellItemBuilder构建布局，展示了如何实现垂直滚动、设置样式以及展示多个菜单项。

摘要由CSDN通过智能技术生成

本章内容

个人中心页面，Scroll超出滚动, 占满余下高度

效果图：

相关源码：
MyPage.ets

@Entry
@Component
struct MyPage {
  scroller: Scroller = new Scroller();

  @Builder MyCellItemBuilder(title: string) {
    Row(){
      Text(title)
      Image($r('app.media.right_arrow'))
        .width(20)
        .height(20)
    }
    .padding(10)
    .width('100%')
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Flex({direction: FlexDirection.Column}) {
      Flex({direction: FlexDirection.Column}) {
        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
          Column({ space: 10 }) {
            Image($r('app.media.avatar'))
              .width(64)
              .height(64)
            Text('用户名')
          }.onClick(() => {

          })
        }
        .width('100%')
        .height(150)
        .backgroundColor(0x70DBDB)

        Flex({direction: FlexDirection.Column}) {
          Scroll(this.scroller) {
            Column({space:10}) {
              this.MyCellItemBuilder('我的收藏')
              this.MyCellItemBuilder('我的地址')
              this.MyCellItemBuilder('我的优惠券')
              this.MyCellItemBuilder('我订单')
              this.MyCellItemBuilder('设置')
              this.MyCellItemBuilder('设置1')
              this.MyCellItemBuilder('设置2')
              this.MyCellItemBuilder('设置3')
              this.MyCellItemBuilder('设置4')
              this.MyCellItemBuilder('设置5')
              this.MyCellItemBuilder('设置6')
              this.MyCellItemBuilder('设置7')
              this.MyCellItemBuilder('设置8')
              this.MyCellItemBuilder('设置9')
            }
          }
          .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
          .scrollBar(BarState.On) // 滚动条常驻显示
          .scrollBarColor(Color.Gray) // 滚动条颜色
          .scrollBarWidth(5) // 滚动条宽度
          .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
        }
        .width('100%')
        .flexGrow(1)
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xededed)
  }

}