四、线性径向渐变、阴影、space、主轴交叉轴对齐方式

原创已于 2024-10-26 17:53:16 修改 · 359 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #javascript

于 2024-10-24 19:53:59 首次发布

鸿蒙基础专栏收录该内容

9 篇文章

订阅专栏

1. 渐变

线性渐变 linearGradient

径向渐变 radialGradient

@Entry
@Component
struct Index {
  build() {
    Column({space:10}) {
      Text('线性渐变')
        .width(100)
        .height(100)
        .backgroundColor('#FFCD44')
        // 线性渐变
        // angle和direction，angle设置后direction不生效
        .linearGradient({
          // 线性渐变的起始角度
          angle:45,
          // 线性渐变方向
          direction:GradientDirection.Right,
          // 颜色
          colors:[[Color.Pink,0],[Color.Green,0.8]],
        //   是否重复着色
          repeating:true,
        })

      Text('径向渐变')
        .width(100)
        .height(100)
        .backgroundColor('#FFCD44')
          // 径向渐变
        .radialGradient({
          //中心点坐标 默认左上角
          center:[50,40],
          // 径向渐变的半径
          radius:50,
          colors:[[Color.Pink,0],[Color.Green,1]],
        })
    }
    .height('100%')
    .width('100%')
  }
}

2. 阴影 shadow

@Entry
@Component
struct Index {
  build() {
    Column({space:10}) {
      Text('阴影shadow')
        .fontSize(20)
        .fontWeight(600)
        .width(150)
        .height(150)
        .backgroundColor('#FFCD44')
        .textAlign(TextAlign.Center)
        // 阴影
        .shadow({
          // 阴影半径
          radius:20,
          // 阴影颜色，透明度
          color:'#9e000000',
          // X轴偏移
          offsetX:2,
          // Y轴偏移
          offsetY:5
        })
    }
    .height('100%')
    .width('100%')
  }
}

3. 案例-华为商品卡片

@Entry
@Component
struct Index {
  build() {
    Column({space:10}) {
      // 案例-华为商品卡片
      Column(){
        Image($r('app.media.all_x5'))
          .width('100%')
        Text('HUAWEI MateX5')
          .width('100%')
          .fontSize(25)
          .fontWeight(600)
          .margin({top:10,bottom:10})
        Text('￥12999起')
          .width('100%')
          .margin({top:10,bottom:10})
        Row(){
          Text('了解更多')
          Image($r('app.media.ic_public_arrow_right'))
            .width(16)
            .margin({right:10})
          Text('购买')
          Image($r('app.media.ic_public_arrow_right'))
            .width(16)
        }
        .width('100%')
        .margin({top:10,bottom:10})
        // .backgroundColor(Color.Yellow)

      }
      .width('80%')
      .backgroundColor('#fff')
      .padding(10)
      .borderRadius(10)
      .shadow({
        radius:10
      })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#ececec')
  }
}

4. space

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 主布局方向 内容之间添加相等的间距
      // 主布局方向就是内容的排列的方向
      // Column({ space: 10 }) {
      Row({ space: 10 }) {
        Text('1')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
        Text('2')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
        Text('3')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.Blue)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#ececec')
  }
}

5. 主轴对齐方式 justifyContent

@Entry
@Component
struct Index {
  build() {
    Column({space:20}) {
      Row() {
        Text('1')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
        Text('2')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
        Text('3')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.Blue)
      // 主轴对齐方式
      // 主轴方向上不设置尺寸，justifyContent属性不生效
      .justifyContent(FlexAlign.SpaceBetween)

      Column() {
        Text('1')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
        Text('2')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
        Text('3')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.Blue)
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#ececec')
  }
}

6. 案例-得物商品卡片

@Entry
@Component
struct Index {
  build() {
    Column({space:20}) {
      // 案例-得物产品卡片
      Column(){
        // 产品图片
        Image($r('app.media.nick'))
          .width('100%')
          // .borderRadius({topLeft:10,topRight:10})
        // 文字区域
        Column({space:10}){
          // 标题
          Text('今晚吃这个 | 每日艺术分享No.43')
            .fontSize(18)
            .lineHeight(25)
            .width('100%')
            .fontWeight(600)

          // 最下一行 作者及点赞量
          Row(){
            // 左边 作者头像及昵称
            Row({space:5}){
              Image($r('app.media.user'))
                .width(20)
                .aspectRatio(1)
                .borderRadius(10)
                // .borderRadius('50%')
              Text('插画师分享聚集地')
                .fontSize(14)
            }
            // 右边 点赞图标及点赞量
            Row({space:5}){
              Image($r('app.media.ic_like'))
                .width(16)
                .fillColor(Color.Gray)
              Text('2300')
                .fontSize(14)
                .fontColor(Color.Gray)
            }
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .width('100%')
        .padding(10)
        // .backgroundColor(Color.Yellow)
      }
      .width('70%')
      .borderRadius(10)
      // 裁剪，如图片左上及右上溢出的角角
      .clip(true)
      .shadow({
        radius:10
      })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#ececec')
  }
}

7. 交叉轴对齐方式及主轴自适应缩放

alignItems

alignSelf

layoutWeight

@Entry
@Component
struct Index {
  build() {
    Column({space:20}) {
      Row() {
        Text('1')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
        Text('2')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
          // 单个子元素交叉轴对齐方式 Stretch拉伸
          .alignSelf(ItemAlign.Stretch)
          // 主轴方向-自适应缩放
          .layoutWeight(1)
        Text('3')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.Blue)
      // .justifyContent(FlexAlign.SpaceBetween)

      // 交叉轴对齐方式
      .alignItems(VerticalAlign.Bottom)

      Column() {
        Text('1')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
        Text('2')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
          .alignSelf(ItemAlign.Stretch)
        Text('3')
          .width(50)
          .height(50)
          .backgroundColor(Color.Green)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.Blue)
      .justifyContent(FlexAlign.SpaceBetween)
      .alignItems(HorizontalAlign.Start)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#ececec')
  }
}

8. 案例-用户关注

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 案例-用户关注
      Row({space:5}) {
        // 头像
        Image($r('app.media.user'))
          .width(50)
          .borderRadius(25)
        //  昵称
        Text('插画设计师')
          .fontSize(20)
          .fontWeight(700)
          .layoutWeight(1)
        // 关注
        Text('关注')
          .fontSize(16)
          .padding({ left:10,right:10,top:5,bottom:5 })
          .border({
            width: 2,
            color: Color.Grey,
            radius:5
          })
          // .borderRadius(8)
      }
      .width('100%')
      .padding(10)
      .backgroundColor(Color.White)
    }
    .height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor('#ececec')
  }
}

9. 案例-头条新闻

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 案例-头条新闻
      Row({space:5}){
        // 左边文字区域
        Column(){
          Text('第五个国际数学日，全世界和数据一起玩儿')
            .fontSize(14)
          Row(){
            Text('中国青年网 昨天')
              .fontSize(12)
              .fontColor(Color.Gray)
              // .layoutWeight(1)
            Image($r('app.media.ic_close'))
              .width(12)
              .fillColor('#999')
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .height('100%')
        // 主轴对齐方式
        .justifyContent(FlexAlign.SpaceBetween)
        // 交叉轴对齐方式
        .alignItems(HorizontalAlign.Start)
        // 父组件主轴方向上自适应缩放
        .layoutWeight(1)

        // 右边图片区域
        Image($r('app.media.math'))
          .width(90)
      }
      .width('100%')
      .height(80)
      .padding(10)
      .backgroundColor(Color.White)
    }
    .height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor('#ececec')
  }
}

10. 作业1_大众点评产品简介

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 大众点评产品简介
      Column(){
        // 图片区域
        Image($r('app.media.product'))
          .width('100%')
        // 卡片文字区域
        Column({space:5}){
          Text('大家看一下要不要50元门票走一趟')
            .width('100%')
            .fontSize(15)
            .lineHeight(22)
          Row(){
            // 左边 头像及昵称
            Row({space:3}){
              Image($r('app.media.avatar'))
                .width(20)
                .aspectRatio(1)
                .borderRadius(10)
              Text('Nina_8888')
                .fontSize(14)
                .fontColor('#666666')
            }
            // 右边 点赞图标及点赞量
            Row({space:3}){
              Image($r('app.media.ic_like'))
                .width(14)
                .fillColor('#999999')
              Text('8888')
                .fontSize(14)
                .fontColor('#999999')
            }
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .width('100%')
        .padding({ top:5,left:5,right:5,bottom:10 })
      }
      .width(200)
      .backgroundColor(Color.White)
      .borderRadius(10)
      .clip(true)
    }
    .height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor('#ececec')
  }
}

11. 作业2_多点产品卡片（怡宝）

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 多点 产品卡片
      Column() {
        // 图片
        Image($r('app.media.yibao'))
          .width('100%')
        // 文字
        Column({ space: 10 }) {
          Text('怡宝纯净水 555ml*12')
            .fontSize(14)
          Text('采用全球现金净水科技，二级反。采用全球现金净水科技，二级反')
            .maxLines(1)
            .fontSize(12)
            .fontColor('#666666')
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          Row() {
            // 左边价格
            Column({ space: 3 }) {
              Text('￥ 10.90')
                .fontSize(14)
                .fontColor('#f60')
              Text('￥ 17.00')
                .fontSize(12)
                .fontColor('#999')
                .decoration({
                  type: TextDecorationType.LineThrough,
                  color: '#999'
                })
            }
            // 右边图片
            Image($r('app.media.ic_jia'))
              .width(16)
              .aspectRatio(1)
              .borderRadius(8)
              .backgroundColor('#f60')
              .padding(3)
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .alignItems(HorizontalAlign.Start)
        .padding({
          top: 10,
          left: 5,
          right: 5,
          bottom: 10
        })
      }
      .width(200)
      .borderRadius(10)
      .clip(true)
      .backgroundColor('#fff')
    }
    .height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor('#ececec')
  }
}

12. 作业3_淘宝订单

独立练习

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 淘宝订单
      Row(){
        // 左边图片
        Image($r('app.media.top1'))
          .width(80)
          .borderRadius(8)
        // 中间区域
        Column({space:8}){
          // 第一行
          Row(){
            Text('程序员2024春季新款百搭程序员2024春季新款百搭')
              .fontWeight(600)
              .maxLines(1)
              .textOverflow({overflow:TextOverflow.Ellipsis})
              .layoutWeight(1)
            Text('￥359')
              .fontWeight(600)
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)

          // 第二行
          Row(){
            Text('条纹/XXL')
              .fontColor('#999')
              .fontSize(14)

            Row(){
              Image($r('app.media.ic_x'))
                .fillColor('#999')
                .width(12)
              Text('1')
                .fontSize(14)
                .fontColor('#999')
            }
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)

          // 第三行
          Row({space:5}){
            Text('假一赔四')
              .fontSize(12)
              .fontColor('#f60')
              .border({
                width:1,
                color:'#f60',
                radius:3
              })
              .padding(2)
            Text('7天无理由退换')
              .fontSize(12)
              .fontColor('#f60')
              .border({
                width:1,
                color:'#f60',
                radius:3
              })
              .padding(2)
          }
          .width('100%')
        }
        .padding(5)
        .height('100%')
        // .backgroundColor(Color.Yellow)
        .layoutWeight(1)
      }
      .width('100%')
      .height(100)
      .padding(5)
      .backgroundColor(Color.White)
    }
    .height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor('#ececec')
  }
}

老师讲解+ForEach进阶

@Entry
@Component
struct Index {
  @State
  arr: string[] = ['假一赔四', '7天无理由退换']

  build() {
    Column() {
      //   241026
      //   淘宝订单老师讲解后练习
      //   布局 左中右（与昨天布局不一样）
      Row({ space: 5 }) {
        // 左边图片
        Image($r('app.media.top1'))
          .width(80)
          .borderRadius(8)
          // 图片闪烁
          .syncLoad(true)

        // 中间区域
        Column({ space: 8 }) {
          // 第一行
          Text('程序员2024春季新款百搭程序员2024春季新款百搭')
            .fontWeight(600)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .fontSize(14)
          // 第二行
          Text('条纹/XXL')
            .fontColor('#999')
            .fontSize(14)

          // 第三行
          // 渲染控制练习ForEach
          Row({ space: 5 }) {
            ForEach(this.arr, (item: string) => {
              Text(`${item}`)
                .fontSize(12)
                .fontColor('#f60')
                .border({
                  width: 1,
                  color: '#f60',
                  radius: 3
                })
                .padding(2)
            })
            /*Text('7天无理由退换')
              .fontSize(12)
              .fontColor('#f60')
              .border({
                width: 1,
                color: '#f60',
                radius: 3
              })
              .padding(2)*/
          }
        }
        .layoutWeight(1)
        .height('100%')
        .alignItems(HorizontalAlign.Start)

        // 右边区域
        Column({ space: 8 }) {
          // 第一行
          Text('￥359')
            .fontWeight(600)
            .fontSize(14)
          // 第二行
          Row() {
            Image($r('app.media.ic_x'))
              .fillColor('#999')
              .width(12)
            Text('1')
              .fontSize(14)
              .fontColor('#999')
          }
        }
        .height('100%')
        .alignItems(HorizontalAlign.End)
      }
      .width('100%')
      .height(100)
      .padding(10)
      .backgroundColor(Color.White)
    }
    .height('100%')
    .width('100%')
    // .padding(10)
    .backgroundColor('#ececec')
  }
}