编译一个页面,实现选座场景

通过Gird组件,实现选中位置,颜色叠加。

HarmonyOS
2024-05-26 15:09:28
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
makeer

使用的核心API

Grid

核心代码解释

Grid() { 
  ForEach(this.services, service => { 
    GridItem() { 
      SeatItem() 
    } 
  }, service => service) 
} 
.rowsGap(20) 
.columnsTemplate('1fr 1fr 1fr 1fr')

使用Grid组件,通过rowGap设置行间距20,通过columnsTemplate设置为4列且占比一样。

自定义座位Item组件

@Component 
export default struct SeatItem { 
  @State isSelected: boolean = false; 
  @State itemBg: string = "#ff25b7b7" 
 
  build() { 
    Column() { 
 
    }.height(50) 
    .width(50) 
    .onClick(() => { 
      this.isSelected = !this.isSelected; 
      this.itemBg = this.isSelected ? "#ffb72597" : "#ff25b7b7";}).backgroundColor(this.itemBg) 
  } 
}

通过@State 修饰 isSelected变量,记录当前item是否选中。设置点击事件来设置不同的背景颜色。

适配的版本信息

IDE版本:DevEco Studio 4.1.1.300

SDK版本:4.1.3.5

分享
微博
QQ
微信
回复
2024-05-27 20:11:22
相关问题
使用Grid 组件实现场景
370浏览 • 1回复 待解决
编写一个页面,实现吸顶效果
414浏览 • 1回复 待解决
编写一个页面实现不规则列表
364浏览 • 1回复 待解决
一个页面怎么实现多个AbilitySlice?
13080浏览 • 5回复 待解决
如何实现一个折叠组件
403浏览 • 1回复 待解决
ArkTS如何实现一个底部弹窗?
69浏览 • 1回复 待解决
如何实现一个组件不停地旋转
854浏览 • 1回复 待解决
如何实现一个GIF图显示指定次数
797浏览 • 1回复 待解决
有谁知道如何实现一个表格
613浏览 • 1回复 待解决
利用native接口实现一个圆角矩形
565浏览 • 1回复 待解决
鸿蒙 如何实现一个渐变的圆形图片;
11056浏览 • 2回复 已解决
如何判断一个对象实现了某个接口
608浏览 • 1回复 待解决
如何通过定时器和画布实现一个时钟
393浏览 • 1回复 待解决