Harmony OS Next 实战笔记-我的页面

• Model的生成
• @Builder的组件
• Stack的布局
• Divider()的布局
• 渐变颜色的背景布局
• List的使用
• ForEach(this.dataModels)

WX20241206-113404@2x.png

对应的代码
import { MyConstant } from "../../utils/MyConstant";

@Preview
@Component
export default struct  MinePage {


dataModels: Array<MineListItemModel> = [
 new MineListItemModel( 1,"常见问题",$r('app.media.ic_qa')),
  new MineListItemModel( 2,"账号安全",$r('app.media.ic_safe_account')),
  new MineListItemModel( 3,"联系客服",$r('app.media.ic_contact_service')),
  new MineListItemModel( 4,"关于我们",$r('app.media.ic_about_us')),
];
  @Builder MineListItem(item: MineListItemModel, index: number) {
    ListItem() {
      Column(){
        Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center}) {
          Row({space: 10}){
            Image(item.imageName)
              .width(30)
              .height(30) // 根据需要设置图片的宽度和高度
              .borderRadius(15) // 设置圆角半径为50
              .objectFit(ImageFit.Cover) // 设置图片的适应方式
            Text(item.title)
              .fontSize(12)
          }
          .padding({top: 10, bottom: 10})
          .flexGrow(1) // 设置flexGrow为1，使子组件撑开以填充剩余空间
          .backgroundColor(Color.White)

          Image($r('app.media.ic_arrow_right'))
            .width(10)
            .height(10)
        }
        .padding({left: 15, right: 10})

        Divider()
          .padding({left: 55,right: 10})
          .color( index == this.dataModels.length - 1 ? Color.Transparent : $r("app.color.color_EFF2FC"))
      }
      .width(MyConstant.FULL_PERCENT)
      .backgroundColor(Color.White)
      .onClick(() => {
        // 点击事件处理，可以根据需要添加逻辑
        console.log('Clicked:', item.title);
      })
    }
  }

  build() {
    Column() {
      Column({ space: 15 }) {
        // 会员信息
        Row({ space: 15 }) {
          // 头像
          Image('https://img2.baidu.com/it/u=246493236,1763577649&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500')
            .width(75)
            .height(75)// 根据需要设置图片的宽度和高度
            .borderRadius(36)// 设置圆角半径为50
            .objectFit(ImageFit.Cover); // 设置图片的适应方式

          Column({ space: 20 }) {
            Text('团团')
              .fontSize(14)
              .fontColor($r('app.color.color_000000'))
              .fontWeight(600)

            Text('18595971222')
              .fontSize(11)
              .fontColor($r('app.color.color_000000'))
          }
          .justifyContent(FlexAlign.Start)
          .alignItems(HorizontalAlign.Start)
        }

        // 加入会员
        Stack() {
          Row() {
            Row({space: 10}){
              Image($r("app.media.ic_home_vip"))
                .width(40)
              Text("加入会员享优惠特权")
                .fontColor($r('app.color.color_FF0D3BB'))
                .fontSize(16)
            }

            Button(){
              Text("立即加入")
                .padding({left: 15,right: 15, top: 8, bottom: 8})
                .fontSize(12)
                .fontColor($r('app.color.color_000000'))
            }
              .linearGradient({
                angle: 90,
                colors: [[0xF7DEC6, 0.0],[0xE6BD98, 1.0]]
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .padding({left: 15, right: 15})
        }
        .width('100%')
        .height(50)
        .linearGradient({
          angle: 90, // 渐变角度为90度
          colors: [
            [0xFF3C3636, 1.0], // 起始颜色为
            [0xFF1D1D1C, 0.0]// 结束颜色为
          ]
        })
        .borderRadius({ topLeft: '26px', topRight: '26px' })
      }
      .alignItems(HorizontalAlign.Start)
      .padding({ left: 15, right: 15, top: 60 })
      // 常见设置
      Column() {
        List() {
          // 遍历listData并生成列表项
          ForEach(this.dataModels, (item: MineListItemModel, index: number) => { // 注意：在某些版本中，可能不需要加this前缀，直接使用listData
            // 如果你的环境报错，尝试将this.listData改为listData
            this.MineListItem(item, index)
          })
        }
        .padding({ top: 20 })

        //使用Image组件显示网络图片
        Image($r('app.media.ic_app_watermark'))
          .padding({
            left: 40,
            right: 40,
            bottom: 40,
            top: 70
          })
          .width('100%')
          .objectFit(ImageFit.Contain); // 设置图片的适应方式
      }
      .alignItems(HorizontalAlign.Start)
    }
    .height(MyConstant.FULL_PERCENT)
    .backgroundColor($r('app.color.page_background'))
  }
}


// 假设我们有一个数据接口
class MineListItemModel {
  id: number;
  title: string;
  imageName: Resource; // 图片的URL，用于展示

  constructor(id: number, title: string, imageName: Resource) {
    this.id = id;
    this.title = title;
    this.imageName = imageName;
  }
}