鸿蒙ArkUI日期选择组件

鸿蒙ArkUI日期选择组件,基于基础组件进行的二次封装的日期选择组件,快速实现日期选择。

/**
 * 日期
 */
@Component
export default  struct DiygwDate{
  //绑定的值
  @Link @Watch('onValue') value:string;

  // 隐藏值
  @State valueField: string = 'value';
  // 显示值
  @State labelField: string = 'label';
  // 选中/未选中状态下的图标
  @State checkedValues: Resource[] = [];
  @State placeHolder:string = '请选择'
  //未选中图标
  @State labelImg: Resource = $r('app.media.user');
  //是否文本图片
  @State isLabelImg: boolean = false;
  @State labelImgWidth: number = 20;
  @State labelImgHeight: number = 20;
  //标题文本
  @State label:string = '下拉';
  //水平状态时,文本占大小
  @State labelWidth:number = 80;
  //是否标题文本换行
  @State isWrapLabel:boolean = false;
  //是否标题文本
  @State isLabel:boolean = true;
  //标题颜色
  @State labelColor:string = "#333333";
  //自动标题长度
  @State isLabelAuto:boolean = false;
  //文本字体大小
  @State textSize:number = 14;
  //选中图版本大小
  @State imgSize:number = 28;
  //组件内边距
  @State leftRightPadding:number = 16;
  @State topBottomPadding:number = 6;

  @State textAlign:TextAlign = TextAlign.End
  @State range:string[]=[];
  @State selectLabel:string = "";
  @State isBorder:boolean = true;

  //初始化选中
  initCheck(){
  }

  //监听选中
  onValue() {
    this.initCheck()
  }

  build() {
    Flex({
      alignItems:this.isWrapLabel?ItemAlign.Start:ItemAlign.Center,
      direction:this.isWrapLabel?FlexDirection.Column:FlexDirection.Row,
      justifyContent:FlexAlign.Start
    }){
      if(this.isLabel){
        Row(){
          if(this.isLabelImg){
            Image(this.labelImg)
              .width(this.labelImgWidth)
              .height(this.labelImgHeight)
              .margin({ left:3 }).flexShrink(0)
          }
          if(this.isLabelAuto){
            Text(this.label).flexShrink(0).fontColor(this.labelColor).fontSize(this.textSize).margin({
              bottom:this.isWrapLabel?10:0,
              right:10,
            }).textAlign(TextAlign.Start);
          }else{
            Text(this.label).fontColor(this.labelColor).width(this.isWrapLabel?'100%':this.labelWidth).fontSize(this.textSize).margin({
              bottom:this.isWrapLabel?10:0
            }).textAlign(TextAlign.Start);
          }
        }.margin({
          top:this.isWrapLabel?10:0
        })
      }
      Flex({
        alignItems:ItemAlign.Center,
      }){
        Text(this.selectLabel).width('100%').fontSize(this.textSize).textAlign(this.isWrapLabel?TextAlign.Start:this.textAlign);
        Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')
      }.onClick(() => {
        DatePickerDialog.show({
          // selected: this.selectedDate,
          lunar: false,
          onAccept: (value: DatePickerResult) => {
            this.value = `${value.year}-${value.month + 1}-${value.day}`
            this.selectLabel = this.value
          }
        })
      }).flexGrow(1)
    }.borderWidth({
      bottom: this.isBorder?1:0
    }).borderColor({
      bottom: "#eee"
    }).borderStyle(BorderStyle.Solid).height(this.textSize+(this.isWrapLabel?20:0)+30+this.topBottomPadding*2).padding({left:this.leftRightPadding,right:this.leftRightPadding,top:this.topBottomPadding,bottom:this.topBottomPadding})
    .onAppear(() => {
      this.selectLabel = this.placeHolder;
      this.initCheck()
    })
  }
}

import {
    navigateTo
} from '../common/Page'
import {
    IDynamicObject
} from '../component/IType';
import DiygwDate from '../component/Date'
@Entry
@Component
export struct User {
    @State date: string = '';

    async onPageShow() {}

    async aboutToAppear() {
        await this.onPageShow()
    }

    build() {
        Column() {
            Navigation()
                .width('100%')
                .height('56vp')
                .backgroundColor('#07c160')
                .title(this.NavigationTitle())
                .titleMode(NavigationTitleMode.Mini)
                .align(Alignment.Center)
                .hideBackButton(true)
            Scroll() {
                Flex({
                    direction: FlexDirection.Column
                }) {
                    DiygwDate({
                        label: '日期',
                        value: $date
                    })

                }.height('100%')
            }.height('100%').layoutWeight(1)
        }.alignItems(HorizontalAlign.Start).height('100%')
    }

    @Builder
    NavigationTitle() {
        Column() {
            Text('个人中心')
                .width('100%')
                .textAlign(TextAlign.Center)
                .height('28vp')
                .fontSize('20fp')
                .fontWeight(500)
                .fontColor('#fff')
        }
    }


}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/364878.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【靶场实战】Pikachu靶场不安全的文件下载漏洞关卡详解

Nx01 系统介绍 Pikachu是一个带有漏洞的Web应用系统,在这里包含了常见的web安全漏洞。 如果你是一个Web渗透测试学习人员且正发愁没有合适的靶场进行练习,那么Pikachu可能正合你意。 Nx02 不安全的文件下载漏洞概述 文件下载功能在很多web系统上都…

移动机器人激光SLAM导航(二):运动控制与传感器篇

参考引用 机器人工匠阿杰wpr_simulation 1. 机器人运动控制 1.1 测试环境安装 wpr_simulation 安装$ mkdir -p catkin_ws/src $ cd catkin_ws/src $ git clone https://github.com/6-robot/wpr_simulation.git $ cd wpr_simulation/scripts/ $ ./install_for_melodic.sh # 自…

Elasticsearch-内存结构

ElasticSearch的内存从大的结构可以分堆内存(On Heap)和堆外内存(Off Heap)。Off Heap部分由Lucene进行管理。On Heap部分存在可GC部分和不可GC部分,可GC部分通过GC回收垃圾对象,从而释放内存。不可GC部分不…

【项目日记(七)】第三层: 页缓存的具体实现(上)

💓博主CSDN主页:杭电码农-NEO💓   ⏩专栏分类:项目日记-高并发内存池⏪   🚚代码仓库:NEO的学习日记🚚   🌹关注我🫵带你做项目   🔝🔝 开发环境: Visual Studio 2022 项目日…

three.js CSS3DRenderer、CSS3DObject渲染HTML标签

有空的老铁关注一下我的抖音&#xff1a; 效果&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red;position: relative;"><…

react 之 useInperativeHandle

useInperativeHandle是通过ref暴露子组件中的方法 1.场景说明-直接调用子组件内部的方法 import { forwardRef, useImperativeHandle, useRef } from "react"// 子组件const Son forwardRef((props, ref) > {// 实现聚焦逻辑const inputRef useRef(null)const …

【知识点】Java常用

文章目录 基础基础数据类型内部类Java IOIO多路复用重要概念 Channel **通道**重要概念 Buffer **数据缓存区**重要概念 Selector **选择器** 关键字final 元注解常用接口异常处理ErrorException JVM与虚拟机JVM内存模型本地方法栈虚拟机栈 Stack堆 Heap方法区 Method Area (JD…

npm安装报错,出现.staging

问题场景&#xff1a;同事发了一个本地的安装包&#xff0c;拿到了没仔细看&#xff0c;直接npm install&#xff0c;没有发现根目录下的package-lock.json。然后就发现安装一直不成功&#xff0c;还会卡主。并且在node_modules文件夹下还会出现.staging文件夹&#xff0c;正常…

计算机网络实验六

目录 实验6 静态路由与RIP协议配置 1、实验目的 2、实验设备 &#xff08;1&#xff09;内容一&#xff1a;&#xff08;静态路由配置&#xff09; &#xff08;2&#xff09;内容二&#xff1a;&#xff08;RIP协议配置&#xff09; 3、网络拓扑及IP地址分配 &#xff…

3593 蓝桥杯 查找最大元素 简单

3593 蓝桥杯 查找最大元素 简单 // C风格解法1&#xff0c;通过率100%&#xff0c;多组数据处理样式//str "abcdefgfedcba" //abcdefg(max)fedcba//str "xxxxx" //x(max)x(max)x(max)x(max)x(max)#include<bits/stdc.h>const int N 1e2 10;char …

无法在 word 中登录 Grammarly

目录 1. 情况描述 2. 解决方法 3. 原因分析 1. 情况描述 在浏览器中可以登录 Grammarly&#xff0c;但是在 word 中登录失败&#xff0c;大致如下图所示&#xff1a; 我自己没有截图&#xff0c;这是网上别人的图&#xff0c;但差不多都长这个样子。 2. 解决方法 我点击了…

量化交易学习4(投资组合基本认识)

1 如何衡量投资组合的收益率 1.1 投资组合收益率的计算方法 1.2 投资组合的绝对收益率和相对收益率 2 如何衡量投资组合的风险 2.1 风险的定义 风险是指在未来可能发生的不确定性事件所带来的潜在损失。 在投资领域中&#xff0c;风险通常指投资所面临的不确定性和潜在的损失…

react native错误记录

第一次运行到安卓失败 Could not find implementation class com.facebook.react.ReactRootProjectPlugin for plugin com.facebook.react.rootproject specified in jar:file:/D:/Android_Studio_Data/.gradle/caches/jars-9/o_3a1fd35320f05989063e7069031b710f/react-nativ…

钉钉群机器人-发送群消息

1、钉钉群创建机器人 添加完成后&#xff0c;要记住 Webhook 路径&#xff1b; 2、机器人接入文档网址 自定义机器人接入 - 钉钉开放平台 3、JAVA代码 import com.dingtalk.api.DefaultDingTalkClient; import com.dingtalk.api.DingTalkClient; import com.dingtalk.api.re…

JVM工作原理与实战(三十二):GC调优

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、GC调优 二、GC调优的核心指标 总结 前言 JVM作为Java程序的运行环境&#xff0c;其负责解释和执行字节码&#xff0c;管理内存&#xff0c;确保安全&#xff0c;支持多线程和提供…

idea 中 tomcat 乱码问题修复

之前是修改 Tomcat 目录下 conf/logging.properties 的配置&#xff0c;将 UTF-8 修改为 GBK&#xff0c;现在发现不用这样修改了。只需要修改 IDEA 中 Tomcat 的配置就可以了。 修改IDEA中Tomcat的配置&#xff1a;添加-Dfile.encodingUTF-8 本文结束

网络协议与攻击模拟_13缓存DNS与DNS报文

一、缓存DNS服务器 1、引入缓存DNS 工作可能会遇到这样的场景&#xff0c;内网部署有一台缓存DNS服务器&#xff0c;这台服务器是由我们自己搭建的。为什么放在内网呢&#xff1f;因为我内网中的机器请求内网返回会比较快。第一次会慢点&#xff0c;因为有一个转发的过程&am…

arcgis javascript api4.x加载非公开或者私有的arcgis地图服务

需求&#xff1a; 加载arcgis没有公开或者私有的地图服务&#xff0c;同时还想实现加载时不弹出登录窗口 提示&#xff1a;​ 下述是针对独立的arcgis server&#xff0c;没有portal的应用场景&#xff1b; 如果有portal可以参考链接&#xff1a;https://mp.weixin.qq.com/s/W…

供应商规模成倍增长,医疗器械制造商如何让采购效率更进一步|创新场景50...

ITValue 随着企业的快速发展&#xff0c;采购供应链网络日益庞大&#xff0c;企业在供应商管理上面临着管理体系分散、风险难以管控&#xff0c;采购过程环节多等问题&#xff0c;供应商内外协同亟待解决。 作者&#xff5c;秦聪慧 专题&#xff5c;创新场景50 ITValue 制造企业…

SpringMVC处理ajax请求之@ResponseBody注解,将后端数据响应到浏览器

上一篇文章讲到SpringMVC处理ajax请求用到的RequestBody注解SpringMVC处理ajax请求&#xff08;RequestBody注解&#xff09;&#xff0c;ajax向后端传递的数据格式详解-CSDN博客&#xff0c;这个注解帮我们解决了如何将客户端的数据通过json数据传递到服务器&#xff0c;简单说…