鸿蒙NEXT开发-常用样式编写

按钮

PS：我这里按钮都没有使用Button用的Text来添加样式变成按钮

圆角边框按钮：

Text('取消订单')
  .fontSize(14)
  .fontColor('#969696')
  .border({width:1})
  .borderColor('#969696')
  .borderRadius(5)
  .padding({left:12,right:12,top:5,bottom:5})

• border({width:1})：边框粗细
• borderColor('#969696')：边框颜色
• borderRadius(5)：边框圆角颜色
• padding({left:12,right:12,top:5,bottom:5})：文字与边框距离

渐变背景圆角按钮：

Text('确认订单')
  .fontColor(Color.White)
  .fontSize(14)
  .linearGradient({
    angle: 90,
    colors: [['#FF6600', 0.0],['#FF944C', 1.0]]
  })
  .borderRadius(5)
  .padding({left:12,right:12,top:5,bottom:5})

linearGradient({})：颜色渐变

• angle渐变角度90就是从左到右也可以使用

direction: GradientDirection.Left, // 渐变方向

• colors：颜色数组

圆点

Circle()
  .width(6)
  .height(6)
  .colorBlend('#FF4B10')

虚线

纵向

Line()
  .width(1)
  .height(17)
  .startPoint([0, 0])
  .endPoint([0, 17])
  .stroke('#EF4034')
  .strokeWidth(1)
  .strokeDashArray([2])

• startPoint([0, 0])：开始位置
• endPoint([0, 17])：结束为止
• stroke('#EF4034')：线条颜色
• strokeWidth(1)：线条粗细
• strokeDashArray([2])：线条间隔

横向

Line()
  .width(71)
  .height(1)
  .startPoint([0, 0])
  .endPoint([71, 0])
  .stroke('#969696')
  .strokeWidth(1)
  .strokeDashArray([2])

属性同上

以上就是常用的一下鸿蒙的组件样式信息，希望对大家有所帮助。