func-package

@Entry
@Component
struct Index {

  build() {
    // 列部局容器（从上到下，每个组件之间有10vp的间隙）
    Column({space: 10}) {
      Text('margin and padding').fontSize(12).fontColor('#36D').width('90%')

      Row() {
        Row() {
          // size设置组件的宽高
          Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Blue)
        }
        // 设置组件的宽（80vp）,高（90vp）,内边距（10），外边距（20），背景色为白色
        .width(80).height(90).padding(10).margin(20).backgroundColor(Color.White)
      }
      // 组件背景色为粉色
      .backgroundColor(Color.Pink)

      Text('constraintSize').fontSize(12).fontColor('#36D').width('90%')
      Text('这是一个长的字符串，这个字符串会非常的长，这是一个长的字符串，这个字符串会非常的长，这是一个长的字符串，这个字符串会非常的长，这是一个长的字符串，这个字符串会非常的长')
        .width('90%')
        // 约束组件最大宽度是200vp
        .constraintSize({maxWidth: 200})

      Text('layoutWeight').fontSize(12).fontColor('#36D').width('90%')
      // 父容器尺寸确定，设置了layoutWeight的子元素在主轴布局尺寸按权重进行分配，忽略本身尺寸设置
      Row() {
        
        Text('layoutWeight(1)')
          .size({ width: '30%', height: 100 }).backgroundColor(Color.Orange).textAlign(TextAlign.Center)
        // 权重为1,占主轴的1/3
          .layoutWeight(1)
        Text('layoutWeight(2)')
          .size({ width: '30%', height: 100 }).backgroundColor(Color.Red).textAlign(TextAlign.Center)
        // 权重为2,占主轴的2/3
          .layoutWeight(2)
        Text('no layoutWeight')
          .size({ width: '30%', height: 100 }).backgroundColor(Color.Gray).textAlign(TextAlign.Center)
      }
      .size({ width: '90%', height: 120 }).backgroundColor(Color.Yellow)
    }.width('100%').margin({ top: 5})
  }
}

@Entry
@Component
struct PositionTest {

  build() {
    Column() {
      Column({ space: 10 }) {
        Text('align').fontSize(12).fontColor('#36D').width('90%')
        Text('top start')
          // 设置元素内容的对齐方式
          .align(Alignment.TopStart)
          .height(50)
          .width('90%')
          .fontSize(16)
          .backgroundColor(Color.Pink)

        Text('direction').fontSize(12).fontColor('#36D').width('90%')
        Row() {
          Text('1').height(50).width('25%').maxFontSize(16).backgroundColor(Color.Pink).textAlign(TextAlign.Center)
          Text('2').height(50).width('25%').maxFontSize(16).backgroundColor(Color.Yellow).align(Alignment.TopStart)
          Text('3').height(50).width('25%').maxFontSize(16).backgroundColor(Color.Pink).align(Alignment.Top)
          Text('4').height(50).width('25%').maxFontSize(16).backgroundColor(Color.Yellow).align(Alignment.Bottom)
        }
        .width('90%')
        // 元素水平方向上的布局
        .direction(Direction.Rtl)
      }
    }
    .width('100%').margin({top: 5}).direction(Direction.Rtl)
    
  }
}

@Entry
@Component
struct PositionTest2 {

  build() {
    Column({space: 15}) {
      // 绝对定位，容器左上角相对于父组件左上角的偏移量
      Text('position').fontSize(12).fontColor('#36D').width('90%')
      Row() {
        Text('1').size({width:'30%',height:'50'}).backgroundColor('#78a355').border({width:1}).fontSize(16)
        Text('2 position(30,10)')
          .size({width: '60%',height:'30'})
          .backgroundColor('#b22c46')
          .border({width:1})
          .fontSize(16)
          .align(Alignment.Start)
          .position({x:30,y:10})
        Text('3').size({width:'45%',height:'50'}).backgroundColor('#007d65').border({width:1}).fontSize(16)
        Text('4 position(50%,70%)')
          .size({width:'50%',height:'50'})
          .backgroundColor('#c37e00')
          .border({width:1})
          .fontSize(16)
          .position({x:'50%',y:'70%'})
      }
      .width('90%').height(100).border({width:1,style:BorderStyle.Dashed})

      // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0则向左，反之则向右
      // y为最终定位点距离起点垂直方向间距，y>0则向上，反之则向下
      Text('markAnchor').fontSize(12).fontColor('#36D').width('90%')
      Stack({alignContent: Alignment.TopStart}) {
        Row()
          .size({width: '100', height: '100'})
          .backgroundColor('#f2eada')
        Text('text')
          .size({width: 25, height: 25})
          .backgroundColor('#f15a22')
          .markAnchor({x: 25,y: 25})
        Text('text')
          .size({width: 25, height: 25})
          .backgroundColor('#f15a22')
          .markAnchor({x: -100,y: -25})
        Text('text')
          .size({width: 25, height: 25})
          .backgroundColor('#f15a22')
          .markAnchor({x: 25,y: -25})
      }
      .margin({top: 25}).border({width:1,style: BorderStyle.Dashed})

      // 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上
      Text('offset').fontColor('#36D').fontSize(12).width('90%')
      Row() {
        Text('1').size({width:'15%',height:'50'}).backgroundColor('#fedcbd').border({width:1}).fontSize(16)
        Text('2 offset(15,30)')
          .size({width:120,height:'50'})
          .backgroundColor('#4e72b8')
          .border({width: 1})
          .fontSize(16)
          .align(Alignment.Start)
          .offset({x:15,y:30})
        Text('3').size({width:'15%',height:'50'}).backgroundColor('#fedcbd').border({width:1}).fontSize(16)
        Text('4 offset(-5%,20%)')
          .size({width:100,height:'50'})
          .backgroundColor('#4e72b8')
          .border({width:1})
          .fontSize(16)
          .offset({x: '-5%',y:'20%'})
      }.width('90%').height(100).border({width:1,style:BorderStyle.Dashed})
    }
    .width('100%').margin({top: 25})
  }
}

@Entry
@Component
struct AspectRatioTest {
  private children: string[] = ['1','2','3','4','5','6']

  build() {
    Column({space: 20}) {
      Text('using container: row').fontSize(12).fontColor('#36D').width('100%')
      Row({space: 10}) {
        ForEach(this.children,(item) => {
          Text(item)
            .backgroundColor('#deab8a')
            .fontSize(16)
              // 指定组件的宽高比是1.5
            .aspectRatio(1.5)
            .height(60)
          Text(item)
            .backgroundColor('#deab8a')
            .fontSize(16)
              // 指定组件宽高比是1.5
            .aspectRatio(1.5)
            .width(60)
        },item => item)
      }
      .size({width: '100%',height: 100})
      .backgroundColor('#feeeed')
      .clip(true)

      Text('using container: grid').fontSize(12).fontColor('#36D').width('100%')
      Grid() {
        ForEach(this.children,(item) => {
          GridItem(){
            Text(item)
              .backgroundColor('#deab8a')
              .fontSize(16)
              .width(60)
              .aspectRatio(1.5)
          }
        },item => item)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .size({width:'100%',height:165})
      .backgroundColor('#feeeed')
    }.padding(10)
  }
}

// ../model/ContainerInfo.ts

export class ContainerInfo {
  label: string = ''
  size: string = ''
}

export class ChildInfo {
  text: string = ''
  priority: number = 0
}

import {ContainerInfo,ChildInfo} from '../model/ContainerInfo'

@Entry
@Component
struct DisplayPriorityTest {

  private container: ContainerInfo[] = [
    {label: 'Big container',size: '90%'},
    {label: 'Middle container',size: '50%'},
    {label: 'Small container',size: '30%'}
  ];
  private children: ChildInfo[] = [
    {text: '1\n(priority:2)', priority: 2},
    {text: '2\n(priority:1)', priority: 1},
    {text: '3\n(priority:3)', priority: 3},
    {text: '4\n(priority:1)', priority: 1},
    {text: '5\n(priority:2)', priority: 2}
  ]
  @State currentIndex: number = 0

  build() {
    Column({ space: 10 }) {
      Button(this.container[this.currentIndex].label).backgroundColor('#5c7a29')
        .onClick(() => {
          this.currentIndex = (this.currentIndex + 1) % this.container.length;
        })

      Flex({justifyContent: FlexAlign.SpaceBetween}) {
        ForEach(this.children, (item:ChildInfo) => {
          Text(item.text)
            .width(120)
            .height(60)
            .fontSize(24)
            .textAlign(TextAlign.Center)
            .backgroundColor('#b22c46')
            // 设置组件显示的优先级
            .displayPriority(item.priority)
        },item => item)
      }
      .width(this.container[this.currentIndex].size)
      .backgroundColor('#d3d7d4')
    }
    .width('100%')
    .margin({top:50})
  }
}

@Entry
@Component
struct FlexTest1 {

  build() {
    Column({space:5}) {
      Text('flexBasis').fontSize(12).fontColor('#36D').width('90%')
      // 基于主轴的基准尺寸
      Flex() {
        Text('flexBasis(100)')
          .flexBasis(100) // 宽度为100vp
          .height(100)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
        Text('flexBasis(auto)')
          .flexBasis('auto') // 保存原本宽度的60%
          .width('60%')
          .height(100)
          .backgroundColor('#8f4b2e')
          .textAlign(TextAlign.Center)
      }
      .width('90%').height(120).padding(10).backgroundColor('#deab8a')

      Text('flexShrink').fontSize(12).fontColor('#36D').width('90%')
      // flexShrink()表示该元素的压缩比例，它对超出的总尺寸进行计算
      // 压缩比例为0则不压缩
      Flex({direction:FlexDirection.Row}) {
        Text('flexShrink(0)')
          .flexShrink(0)
          .width('50%')
          .height(100)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
        Text('default flexShrink')  // 默认情况下 flexShrink的值值是1
          .width('40%')
          .height(100)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
        Text('flexShrink(1)')
          .flexShrink(1)
          .width('40%')
          .height(100)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
      }
      .width('90%').height(120).padding(10).backgroundColor('#deab8a')

      Text('alignSelf').fontSize(12).fontColor('#36D').width('90%')
      // alignSelf会覆盖掉Flex布局容器中的alignItems设置
      Flex({direction: FlexDirection.Row,alignItems: ItemAlign.Center}) {
        Text('no alignSelf,height:70')
          .width('33%')
          .height(70)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
        Text('alignSelf End')
          .alignSelf(ItemAlign.End)
          .width('33%')
          .height(70)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
        Text('no alignSelf,height:100%')
          .width('34%')
          .height('100%')
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
      }
      .width('90%').height(120).padding(10).backgroundColor('#deab8a')

    }
    .width('100%')
    .margin({top: 5})
  }
}

@Entry
@Component
struct BorderTest {

  build() {
    Column({space: 10}) {
      Flex({justifyContent: FlexAlign.SpaceAround,alignItems:ItemAlign.Center}) {
        Text('dashed')
          .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor('#003a6c').borderRadius(10)
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
        Text('dotted')
          .border({width: 5, color: '#769149', radius: 10, style: BorderStyle.Dotted})
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
      }.width('100%').height(150)

      Text('.border')
        .fontSize(30)
        .width(300)
        .height(300)
        .border({
          width: {left: '50px',right: '100px',top: '200px',bottom: '300px'},
          color: {left: '#1a2933', right: '#401c44', top: Color.Pink, bottom: Color.Orange},
          radius: {
            topLeft: 10,
            topRight: 20,
            bottomLeft:40,
            bottomRight: 60
          },
          style: {
            left: BorderStyle.Dotted,
            right: BorderStyle.Dotted,
            top: BorderStyle.Solid,
            bottom: BorderStyle.Dashed
          }
        }).textAlign(TextAlign.Center)
    }
  }
}

@Entry
@Component
struct BorderImageTest2 {
  @State WidthValue: number = 0;
  @State SliceValue: number = 0;
  @State OutSetValue: number = 0;
  @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch,RepeatMode.Round,RepeatMode.Space];
  @State SelectIndex: number = 0;
  @State SelectText: string = 'Repeat';
  @State FillValue: boolean = false;

  build() {
    Row() {
      Column({ space: 20 }) {
        Row() {
          Text('borderImage').textAlign(TextAlign.Center).fontSize(50)
        }
        .borderImage({
          source: $r('app.media.my_border'),  // 边框图片源或渐变色设置
          slice: this.SliceValue, // 设置图片边框的切割宽度
          width: this.WidthValue, // 设置图片边框的宽度
          outset: this.RepeatValue[this.SelectIndex], // 设置边框图片向外延生距离
          repeat: this.RepeatValue[this.SelectIndex], //  设置边框图片的重复方式
          fill: this.FillValue  // 设置边框图片中心填充
        })

        Column() {
          Text(`borderImageSlice = ${this.SliceValue}px`)
          Slider({
            value: this.SliceValue,
            min: 0,
            max: 100,
            style: SliderStyle.OutSet
          })
            .onChange((value:number,mode:SliderChangeMode) => {
              this.SliceValue = value;
            })
        }

        Column() {
          Text(`borderImageWidth = ${this.WidthValue}}px`)
          Slider({
            value: this.WidthValue,
            min:0,
            max:100,
            style:SliderStyle.OutSet
          })
            .onChange((value:number,mode:SliderChangeMode) => {
              this.WidthValue = value;
            })
        }

        Column() {
          Text(`borderImageOutSet = ${this.OutSetValue}px`)
            Slider({
              value: this.OutSetValue,
              min:0,
              max:100,
              style:SliderStyle.OutSet
            })
              .onChange((value:number,mode:SliderChangeMode) => {
                this.OutSetValue = value;
              })
        }

        Row() {
          Text('borderImageRepeat:')
          Select([{value:'Repeat'},{value:'Stretch'},{value:'Round'},{value:'Space'}])
            .value(this.SelectText)
            .onSelect((index:number,text:string) => {
              this.SelectIndex = index;
              this.SelectText = text;
            })
        }

        Row() {
          Text(`borderImageFill: ${this.FillValue}`)
          Toggle({type:ToggleType.Switch,isOn: this.FillValue})
            .onChange((isOn:boolean) => {
              this.FillValue = isOn;
            })
        }
      }
      .width('100%')
    }
    .height('100%')
  }

}

@Entry
@Component
struct BackgroundTest {

  build() {
    Column({space:5}) {
      Text('background color').tipStyle()
      // backgroundColor,设置背景颜色
      Row().width('90%').height(50).backgroundColor('#c77eb5').border({width: 1})

      Text('background image repeat along X').tipStyle()
      Row()
        // 设置背景图片
        .backgroundImage($r('app.media.my_border'), ImageRepeat.X)
        // 设置背景图像的高度和宽度
        .backgroundImageSize({width: '250px',height:'140px'})
        .width('90%')
        .height(70)
        .border({width: 1})

      Text('background image repeat along Y').tipStyle()
      Row()
        .backgroundImage($r('app.media.my_border'), ImageRepeat.Y)
        .backgroundImageSize({width: '500px',height:'120px'})
        .width('90%')
        .height(100)
        .border({width:1})

      Text('background image size').tipStyle()
      Row()
        .width('90%').height(150)
        .backgroundImage($r('app.media.my_border'), ImageRepeat.NoRepeat)
        .backgroundImageSize({width: 1000,height:500})
        .border({width: 1})

      Text('background fill the box(Cover)').tipStyle()
      // 不保证图片完整的情况下占满盒子
      Row()
        .width(200)
        .height(50)
        .backgroundImage($r('app.media.my_border'), ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Cover)
        .border({width: 1})

      Text('background fill the box(Contain)').tipStyle()
      // 保证图片完整的情况下放到最大
      Row()
        .width(200)
        .height(50)
        .backgroundImage($r('app.media.my_border'), ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Contain)
        .border({width: 1})

      Text('background image position').tipStyle()
      Row()
        .width(100)
        .height(50)
        .backgroundImage($r('app.media.my_border'), ImageRepeat.NoRepeat)
        .backgroundImageSize({width:1000,height:560})
        // 设置背景图在组件中显示位置，相对于组件左上角的坐标
        .backgroundImagePosition({x: -500, y: -300})
        .border({width: 1})
    }
    .width('100%').height('100%').padding({top: 5})
  }
}

@Extend(Text) function tipStyle() {
  .fontSize(12).width('90%').fontColor('#36D')
}

@Extend(Text) function tipStyle1() {
  .fontSize(12).width('90%').fontColor('#36D')
}

@Extend(Text) function opacityStyle(opacity:number) {
  .width('90%').height(50).opacity(opacity).backgroundColor('#005344')
}

@Entry
@Component
struct OpacityTest {

  build() {
    Column({space: 5}) {
      // @ts-ignore
      Text('opacity(1)').tipStyle1()
      Text().opacityStyle(1)
      Text('opacity(0.7)').tipStyle1()
      Text().opacityStyle(0.7)
      Text('opacity(0.4)').tipStyle1()
      Text().opacityStyle(0.4)
      Text('opacity(0.1)').tipStyle1()
      Text().opacityStyle(0.1)
      Text('opacity(0)').tipStyle1()
      Text().opacityStyle(0)
    }
    .width('100%')
    .padding({top:5})
  }
}

@Entry
@Component
struct VisibilityTest {

  build() {
    Column() {
      Column() {
        // 隐藏组件不参与占位
        Text('None').fontSize(12).width('90%').fontColor('#36D')
        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor('#008792')

        // 隐藏组件参与占位
        Text('Hidden').fontSize(12).width('90%').fontColor('#36D')
        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor('#008792')

        // 显示组件，默认情况下就是显示模式
        Text('Visible').fontSize(12).width('90%').fontColor('#36D')
        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor('#008792')
      }
      .width('90%').border({width: 1})
    }
    .width('100%').margin({top: 5})
  }
}

import Prompt from '@system.prompt'
@Entry
@Component
struct EnableTest {
  @State isEnable: boolean = false

  build() {
    Flex({justifyContent: FlexAlign.SpaceAround}){
      Button('点击我').enabled(this.isEnable).backgroundColor('#78a355').opacity(0.8)
        .onClick(() => {
          Prompt.showToast({
            message:'你点击了按钮',
            duration:2000
          })
        })
      Row(){
        Text('切换状态:').fontSize(12).fontColor('#36D').lineHeight(20)
        Toggle({type: ToggleType.Switch,isOn: this.isEnable})
          .onChange((isOn:boolean) => {
            this.isEnable = isOn;
          })
      }
    }
    .width('100%')
    .padding({top: 5})
  }
}

@Entry
@Component
struct OverlayTest {

  build() {
    Column() {
      Column(){
        Text('floating layer')
          .fontSize(12).fontColor('#36D').maxLines(1)
        Column() {
          Image($r('app.media.my_border'))
            .width(240).height(240)
            .overlay('这里的文本是图片组件上的遮罩文本',{
              align: Alignment.Bottom,
              offset: {x: 0, y: -15}
            })
        }
        .border({width:2,color:Color.Black})
      }.width('100%')
    }.padding({top: 15})

  }
}

@Entry
@Component
struct ZIndexTest {

  build() {
    Column(){
      Stack() {
        // stack会重叠组件，默认后定义的在最上面
        // 具有较高zIndex值的元素会在zIndex较小的元素前面
        Text('1, zIndex(2)')
          .size({width: '40%', height: '30%'}).backgroundColor('#b3424a')
          .textAlign(TextAlign.Center)
          .zIndex(2)
        Text('2, default zIndex(1)')
          .size({width: '70%', height: '50%'}).backgroundColor('#6d8346')
          .align(Alignment.TopStart)
          .zIndex(1)
        Text('3, zIndex(0)')
          .size({width: '90%', height: '80%'}).backgroundColor('#867892')
          .align(Alignment.TopStart)
      }.width('100%').height(200)
    }.width('100%').height(200)
  }
}

import matrix4 from '@ohos.matrix4'
@Extend(Text) function textStyleExtend() {
  .fontColor('#36D').padding(15).fontSize(12)
}

@Extend(Row) function rowStyleExtend(color:ResourceStr) {
  .width(100).height(100).backgroundColor(color)
}

@Entry
@Component
struct TransformTest {

  build() {
    Column(){
      Text('rotate').width('90%').textStyleExtend()
      Row()
        // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
        .rotate({
          x: 0,
          y: 0,
          z: 1,
          centerX: '50%',
          centerY: '50%',
          angle: 300
        })
        .rowStyleExtend('#ef5b9c')

      Text('translate').textStyleExtend()
      Row()
        // x轴方向平移100，y轴方向平移10
        .translate({x: 100,y:10})
        .rowStyleExtend('#f47920')

      Text('scale').textStyleExtend()
      Row()
        // 高度缩小一倍，宽度放大一倍，z轴在2D下看不到效果的
        .scale({x:2,y:0.5})
        .rowStyleExtend('#87843b')

      Text('Matrix4').textStyleExtend()
      Row()
        .rowStyleExtend('#003a6c')
        .transform(matrix4.identity().translate({x: 50, y: 50}).scale({x: 1.5,y:1}).rotate({
          x:0,
          y:0,
          z:1,
          angle:60
        }))
    }
    .width('100%').margin({top: 5})
  }
}

@Entry
@Component
struct ImageEffectsTest1 {

  build() {
    Column({space: 10}) {
      // 模糊字体
      Text('字体模糊').fontSize(12).fontColor('#36D').width('90%')
      Flex({alignItems: ItemAlign.Center}) {
        Text('正常字休').margin(10)
        Text('模糊级别1')
          .blur(1).margin(10)
        Text('模糊级别2')
          .blur(2).margin(10)
        Text('模糊级别3')
          .blur(3).margin(10)
      }
      .width('90%').height(40)
      .backgroundColor('#feeeed')

      // 背景模糊
      Text('背景模糊').fontSize(12).fontColor('#36D').width('90%')
      Text()
        .width('90%')
        .height(40)
        .backdropBlur(5)
        .backgroundImage($r('app.media.my_border'))
        .backgroundImageSize({width: 1200,height: 160})
    }
    .width('100%').margin({top: 5})
  }
}