模拟日历选座场景,买票或者住宿软件都有选座的情景

买票或者住宿软件都有选座的情景

HarmonyOS
2024-05-26 12:00:14
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
OwenOO

使用的核心API

Gird组件

图像效果 colorBlend 属性--为当前组件添加颜色叠加效果,入参为叠加的颜色。

形状裁剪 clip 属性--参数为相应类型的组件,按指定的形状对当前组件进行裁剪;参数为boolean类型时,设置是否按照父容器边缘轮廓进行裁剪。默认值:false

核心代码解释

// xxx.ets 
@Entry 
@Component 
struct GridExample { 
  @State Number: String[] = ['1', '2', '3', '4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'] 
  scroller: Scroller = new Scroller() 
  @State num1:number[]= [] 
  @State StartColor :string= '#ff90e25d' 
  @State color:string ='#0xF9CF93' 
  
  build() { 
    Column({ space: 6 }) { 
      Grid() { 
          ForEach(this.Number, (day: string,index1:number) => { 
            GridItem() { 
              Column(){ 
                Stack(){ 
                  Text(day) 
                    .zIndex(999) 
                    .fontSize(16) 
                    .fontColor(Color.Black) 
                      // .backgroundColor('0xF9CF93') 
                    .backgroundColor(this.color) 
                    .width('100%') 
                    .height('100%') 
                    .textAlign(TextAlign.Center) 
                    // 为当前组件添加颜色叠加效果,入参为叠加的颜色。 
                    .colorBlend(false?this.StartColor:this.StartColor) 
                    .clip(true) 
                    .borderRadius(10) 
                    .onClick(()=>{ 
                      // 点击添加索引到一个数组里面判断 
                      if(this.num1.length<2){ 
                        this.num1.push(index1) 
                      }else { 
                        this.num1.shift() 
                        this.num1.push(index1) 
                      } 
                      console.info(JSON.stringify(this.num1) ) 
                    }) 
                  if(index1===this.num1[0] || index1 ===this.num1[1] ){ 
                    Text() 
                      .fontSize(16) 
                      .fontColor(Color.Black) 
                      .backgroundColor(Color.Green) 
                      .width('100%') 
                      .height('100%') 
                      .textAlign(TextAlign.Center) 
                      .colorBlend(false?this.StartColor:this.StartColor) 
                      .clip(true) 
                      .borderRadius(10) 
                      .width('100%').margin({ top: 0}) 
                      .position({}) 
                  }else if(this.num1[0] < index1  &&  index1 <this.num1[1] || this.num1[0] > index1  &&  index1 >this.num1[1] ){ 
                    Text() 
                      .fontSize(16) 
                      .textAlign(TextAlign.Center) 
                      .backgroundColor('#ffd01f89') 
                      .clip(true) 
                      .borderRadius(10) 
                      .width('100%') 
                      .height('100%') 
                      .position({}) 
                  } 
                } 
              } 
            } 
          }, (day: string) => day) 
      } 
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr') 
      .columnsGap(10) 
      .rowsGap(10) 
      .width('90%') 
      .backgroundColor(0xFAEEE0) 
      .height(500) 
    }.width('100%').margin({ top: 5 }) 
  } 
}

实现效果

选择两天后,头尾颜色一样,中间有不一样的颜色

适配的版本信息

SDK:4.0.10.10

IDE:DevEco Studio 4.0.3.600

分享
微博
QQ
微信
回复
2024-05-27 15:54:00
相关问题
使用Grid 组件实现场景
410浏览 • 1回复 待解决
编译一个页面,实现场景
370浏览 • 1回复 待解决
模拟器启动不了,创建时phone
5821浏览 • 3回复 已解决
老师请问这道多选题怎么
3648浏览 • 1回复 待解决
要做一款优秀UI程序,那条路
2561浏览 • 2回复 待解决
基于AOP代码插桩,都有哪些场景
282浏览 • 1回复 待解决
如何模拟应用升级场景
332浏览 • 1回复 待解决
OB支持索引类型都有哪些?
4538浏览 • 1回复 待解决
软件下载问题 软件下载问题!?!
4585浏览 • 1回复 待解决
有没有调用日历接口?
5044浏览 • 1回复 待解决
PA开发,如何添加日历提醒?
2670浏览 • 1回复 待解决
JS如何添加日历日程提醒?
6798浏览 • 1回复 待解决
xml文件数据解析 ,都有哪些步骤?
300浏览 • 1回复 待解决