123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405 |
- @Component
- export struct InfoRow {
- label: string = ''
- @Prop value: string = ''
- valueColor?: Resource = $r('app.color.FFFFFF') // 默认白色,可覆盖
- build() {
- Row({ space: 5 }) {
- Circle()
- .width($r('app.float.virtualSize_3'))
- .height($r('app.float.virtualSize_3'))
- .fill($r('app.color.FFFFFF'))
- Text(this.label)
- .fontColor($r('app.color.FFFFFF'))
- .fontSize($r('app.float.fontSize_8'))
- Text(this.value)
- .fontColor(this.valueColor)
- .fontSize($r('app.float.fontSize_8'))
- }
- .width('100%')
- }
- }
- @Component
- export struct RgvButton {
- @Prop text: string = ''
- // 按钮图标资源
- @Prop icon: Resource = $r('app.media.rgv_turn_off')
- @State scaleValue : number = 1
- onButtonClick: () => void = () => {}
- build() {
- Button({type: ButtonType.Normal}) {
- Row() {
- Image(this.icon)
- .width('10%')
- .height('50%')
- .margin({ right: '5%' ,left:'10%'})
- Text(this.text)
- .fontSize($r('app.float.fontSize_12'))
- .fontColor($r('app.color.FFFFFF'))
- }.justifyContent(FlexAlign.Start).width('100%')
- }
- .width('100%')
- .height('100%')
- .backgroundColor($r('app.color.20FFFFFF'))
- .borderRadius($r('app.float.virtualSize_6_4'))
- .scale({ x: this.scaleValue, y: this.scaleValue })
- .animation({
- duration: 200,
- curve: Curve.Linear // 弹性曲线更生动
- })
- .onClick(() => {
- this.scaleValue = 0.9; // 点击时缩小
- setTimeout(() => {
- this.scaleValue = 1; // 0.2秒后恢复
- }, 200);
- if (this.onButtonClick) {
- this.onButtonClick()
- }
- })
- }
- }
- @Entry
- @Component
- export struct RobotSelector {
- private scrollerForList: Scroller = new Scroller()
- @State isListVisible: boolean = false
- @Prop robotsList: string[] = ["",""]
- // @Link selectRobotIndex: number
- @State selectedRobot: string =''
- build() {
- Column() {
- // 主体按钮
- Button({type:ButtonType.Normal}) {
- Row() {
- Text(this.selectedRobot)
- .fontColor($r('app.color.FFFFFF'))
- .fontSize($r('app.float.fontSize_12'))
- .margin({left:'5%'})
- Image($r('app.media.general_return'))
- .height($r('app.float.virtualSize_22_4'))
- .width($r('app.float.virtualSize_22_4'))
- .fillColor($r('app.color.FFFFFF'))
- .margin({left:'30%'})
- .rotate({ // 添加旋转属性
- angle: -90, // 逆时针旋转90度(负值表示逆时针)
- centerX: '50%', // 旋转中心X轴位置(相对宽度)
- centerY: '50%' // 旋转中心Y轴位置(相对高度)
- })
- }
- .width('100%')
- .justifyContent(FlexAlign.Start)
- }
- .width('100%')
- .height('25%')
- .backgroundColor($r('app.color.20FFFFFF')) // 灰色背景
- .borderRadius($r('app.float.virtualSize_6_4'))
- .onClick(() => {
- this.isListVisible = !this.isListVisible
- })
- if (this.isListVisible) {
- Column() {
- List({ space: 8, scroller: this.scrollerForList }) {
- ForEach(this.robotsList, (item: string) => {
- ListItem() {
- Column() {
- Text(item)
- .fontColor($r('app.color.FFFFFF'))
- .fontSize($r('app.float.fontSize_12'))
- }
- .padding(12)
- }
- .onClick(() => {
- this.selectedRobot = item
- this.isListVisible = false
- })
- })
- }. divider({
- strokeWidth: 1,
- color: $r('app.color.20FFFFFF')
- })
- }
- .width('100%')
- .borderRadius(8)
- .backgroundColor($r('app.color.20FFFFFF')) // 列表背景色
- .height('80%')
- .margin({top:'1%'})
- }
- }
- .width('100%')
- .height('100%')
- }
- }
- @Component
- export struct MoveControllerButton {
- @State scaleValue : number = 1
- @Prop icon: Resource = $r('app.media.rgv_turn_off')
- onButtonClick: () => void = () => {}
- build() {
- Row() {
- Button({ type: ButtonType.Normal }) {
- Image(this.icon)
- .width('50%')
- .height('50%')
- .objectFit(ImageFit.Contain)
- .fillColor($r('app.color.FFFFFF'))
- }
- .width('100%')
- .height('100%')
- .backgroundColor($r('app.color.20FFFFFF'))
- .borderRadius($r('app.float.virtualSize_6_4'))
- .scale({ x: this.scaleValue, y: this.scaleValue })
- .animation({
- duration: 200,
- curve: Curve.Linear // 弹性曲线更生动
- })
- .onClick(() => {
- this.scaleValue = 0.9; // 点击时缩小
- setTimeout(() => {
- this.scaleValue = 1; // 0.2秒后恢复
- }, 200);
- if (this.onButtonClick) {
- this.onButtonClick()
- }
- })
- }
- }
- }
- // 在文件顶部或单独组件文件中定义
- @CustomDialog
- export struct CommonConfirmDialog {
- @State title: string = '提示'
- @State message: string = '确定要执行此操作吗?'
- @State confirmText: string = '确定'
- @State cancelText: string = '取消'
- controller: CustomDialogController
- onConfirm: () => void = () => {}
- build() {
- Column() {
- // 标题
- Column(){
- Text(this.title)
- .fontColor($r('app.color.FFFFFF'))
- .fontSize($r('app.float.fontSize_15_2'))
- }.height('30%')
- .justifyContent(FlexAlign.Center)
- Column(){
- Text(this.message)
- .fontColor($r('app.color.30FFFFFF'))
- .fontSize($r('app.float.fontSize_12'))
- }.height('30%')
- .justifyContent(FlexAlign.Center)
- Column(){
- Divider()
- .vertical(false)
- .strokeWidth(1)
- .color($r('app.color.20FFFFFF'))
- Row(){
- Row(){
- Text('取消')
- .fontColor($r('app.color.60FFFFFF'))
- .fontSize($r('app.float.fontSize_12'))
- }
- .justifyContent(FlexAlign.Center)
- .width('50%')
- .onClick(() => this.controller.close())
- Divider()
- .vertical(true)
- .strokeWidth(1)
- .color($r('app.color.20FFFFFF'))
- Row(){
- Text('确认')
- .fontColor($r('app.color.007AFF'))
- .fontSize($r('app.float.fontSize_12'))
- }
- .justifyContent(FlexAlign.Center)
- .width('50%')
- .onClick(() => {
- this.onConfirm();
- this.controller.close();
- })
- }
- }
- .width('100%')
- .height('30%')
- // // 按钮区域
- // Flex({ justifyContent: FlexAlign.SpaceAround }) {
- // Button(this.cancelText, { type: ButtonType.Normal })
- // .width('45%')
- // .backgroundColor('#0A84FF')
- // .fontColor($r('app.color.FFFFFF'))
- // .onClick(() => this.controller.close())
- //
- // Button(this.confirmText, { type: ButtonType.Normal })
- // .width('45%')
- // .backgroundColor($r('app.color.0A84FF'))
- // .fontColor($r('app.color.FFFFFF'))
- // .onClick(() => {
- // this.onConfirm();
- // this.controller.close();
- // })
- // }
- // .width('100%')
- // .margin({ bottom: 20 })
- }
- .height(200)
- .width(400)
- .backgroundColor($r('app.color.2A2A2A'))
- .justifyContent(FlexAlign.End)
- .borderRadius(16)
- }
- }
- // 弹窗组件定义
- @CustomDialog
- export struct MoveDialog {
- @Link rgvEndX: number
- @Link rgvEndY: number
- controller: CustomDialogController
- onConfirm: () => void = () => {}
- build() {
- Column() {
- Column(){
- Text('终点移动')
- .fontColor($r('app.color.FFFFFF'))
- .fontSize($r('app.float.fontSize_15_2'))
- }.height('30%')
- .justifyContent(FlexAlign.Center)
- Text('设置终点坐标')
- .fontColor($r('app.color.FFFFFF'))
- .fontSize($r('app.float.fontSize_8'))
- .width('70%')
- .textAlign(TextAlign.Start)
- .margin({ bottom: '2%'})
- // 输入区域
- Column() {
- // 第一个X轴输入
- Row() {
- Text('X轴')
- .fontColor($r('app.color.30FFFFFF'))
- .fontSize($r('app.float.fontSize_12'))
- .width('15%')
- .textAlign(TextAlign.Center)
- .margin({top:'10%',bottom:'10%'})
- Divider()
- .vertical(true)
- .strokeWidth(1)
- .color($r('app.color.20FFFFFF'))
- .margin({top:'2%',bottom:'2%'})
- TextInput({ text: `${this.rgvEndX }`})
- .width('85%')
- .height('100%')
- .backgroundColor('#000000')
- .fontSize($r('app.float.fontSize_12'))
- .fontColor($r('app.color.FFFFFF'))
- .type(InputType.Number)
- .maxLength(2)
- .onChange((value: string) => {
- let num = Number(value);
- num = Math.max(1, Math.min(num, 9));
- this.rgvEndX = num;
- })
- }
- .backgroundColor($r('app.color.000000'))
- .width('70%')
- .height('40%')
- .borderRadius($r('app.float.virtualSize_11_6'))
- // 第二个X轴输入
- Row() {
- Text('Y轴')
- .fontColor($r('app.color.30FFFFFF'))
- .fontSize($r('app.float.fontSize_12'))
- .width('15%')
- .textAlign(TextAlign.Center)
- Divider()
- .vertical(true)
- .strokeWidth(1)
- .color($r('app.color.20FFFFFF'))
- .margin({top:'2%',bottom:'2%'})
- TextInput({ text: String(this.rgvEndY)})
- .width('85%')
- .height('100%')
- .backgroundColor('#000000')
- .fontSize($r('app.float.fontSize_12'))
- .fontColor($r('app.color.FFFFFF'))
- .type(InputType.Number)
- .maxLength(2)
- .onChange((value: string) => {
- let num = Number(value);
- num = Math.max(1, Math.min(num, 13));
- this.rgvEndY = num;
- })
- }
- .width('70%')
- .height('40%')
- .backgroundColor($r('app.color.000000'))
- .borderRadius($r('app.float.virtualSize_11_6'))
- }
- .justifyContent(FlexAlign.SpaceBetween)
- .height('35%')
- .margin({bottom:'10%'})
- // 按钮区域
- Column(){
- Divider()
- .vertical(false)
- .strokeWidth(1)
- .color($r('app.color.20FFFFFF'))
- Row(){
- Row(){
- Text('取消')
- .fontColor($r('app.color.60FFFFFF'))
- .fontSize($r('app.float.fontSize_12'))
- }
- .justifyContent(FlexAlign.Center)
- .width('50%')
- .onClick(() => this.controller.close())
- Divider()
- .vertical(true)
- .strokeWidth(1)
- .color($r('app.color.20FFFFFF'))
- Row(){
- Text('确认')
- .fontColor($r('app.color.007AFF'))
- .fontSize($r('app.float.fontSize_12'))
- }
- .justifyContent(FlexAlign.Center)
- .width('50%')
- .onClick(() => {
- this.onConfirm();
- this.controller.close();
- })
- }
- }
- .width('100%')
- .height('15%')
- }
- .height('40%')
- .width('30%')
- .backgroundColor($r('app.color.2A2A2A'))
- .justifyContent(FlexAlign.End)
- .borderColor($r('app.color.000000'))
- .borderWidth(1)
- .borderRadius($r('app.float.virtualSize_11_6'))
- }
- }
|