SwiftUI 文本框TextField添加清除按钮

news2024/10/9 10:21:13

这里写自定义目录标题

    • 前言/背景
    • 实现
    • 参考

前言/背景

使用SwiftUI框架,希望在文本框TextField控件中输入内容后显示一个清除按钮,可以清空内容,像这样:
在这里插入图片描述

UIKit 框架的 UITextField可以配置clearButtonMode,但是SwiftUI框架里的TextField没有这个,需要自己实现。
IOS开发我不熟悉,也没花时间去细学,本解决方案来自 stackoverflow

建议多使用英文技术网站,这么简单一个问题我在中文网站搜了好久都没找到,要么文不对题要么需要付费(不是说不尊重别人的知识,只是就这么点东西~)
如果stackoverflow打开总是提示人机验证但是又没有可操作的图片或按钮那就是由于某些大家都熟知的原因没加载完全,参考Google 人机验证(reCaptcha)无法显示解决方案
可以解决。
如果英文不会,用关键字即可,例如 [ SwiftUI TextField clear button],这也比百度上啃哧吭哧搜好得多。

实现

  1. 新建一个swiftUI文件,创建一个clearButton组件,注意实现ViewModifier协议;以及使用ZStack来将按钮放在框内。
struct ClearButton: ViewModifier
{
    @Binding var text: String

    public func body(content: Content) -> some View
    {
        ZStack(alignment: .trailing)
        {
            content

            if !text.isEmpty
            {
                Button(action:
                {
                    self.text = ""
                })
                {
                    Image(systemName: "delete.left")
                        .foregroundColor(Color(UIColor.opaqueSeparator))
                }
                .padding(.trailing, 8)
            }
        }
    }
}
  1. 在TextField处添加对clearButton的使用
struct TestView : View {
  @Binding var label: String
  
  var body: some View {
      VStack {
          TextField("951405", text: $label)
              .textFieldStyle(.roundedBorder) // 圆角边框
              .modifier(TextFieldClearButton(text: $label)) //使用clearbutton
      }
  }
}

参考

[1] https://stackoverflow.com/questions/58200555/swiftui-add-clearbutton-to-textfield
[2] https://sanzaru84.medium.com/swiftui-how-to-add-a-clear-button-to-a-textfield-9323c48ba61c

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

javaScript常用语法

一、数据类型1. 原始数据类型(7个)number, string, boolean, undefined, null, symbol, bigint1.1 number包括以下三种浮点和整型数字(如3.1416926和3)NaN(not a number)不是数字infinity超出js数字范围的数值2. 引用数据类型(3个)object, array, function2.1 特殊类型RegExp, …

MySQL Performance Schema知识点

MySQL Performance Schema知识点 程序插桩(instrument)。程序插桩在MySQL代码中插入探测代码,以获取我们想了解的信息。 消费者表(consumer),指的是存储关于程序插桩代码信息的表。如果我们为查询模块添加…

基于Springboot搭建java项目(二十六)——创建Vue前端项目

创建Vue前端项目 一、创建Vue前端项目 1、安装 Vue CLI 1.1、下载Node.js 因为需要使用 npm 安装 Vue CLI,而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/en/,首页即可下载。 下…

day26|455.分发饼干、376. 摆动序列、53. 最大子序和。进军贪心

455.分发饼干 假设你是一位很棒的家长,想要给你的孩子们一些小饼干。但是,每个孩子最多只能给一块饼干。 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸;并且每块饼干 j,都有…

Python | 数据类型之元组和字典

知识目录一、元组(tuple)1.1 元组的创建1.2 访问和修改元组1.3 内置函数二、字典(dict)2.1 字典的创建2.2 访问和修改字典2.3 字典键的特性2.4 函数与方法一、元组(tuple) Python 的元组与列表类似,不同之处在于元组的元素不能修改。 元组使用小括号,列…

kubernetes-dashboard 实现 http 访问以及免 token 登录

文章目录[toc]下载官方 yaml 文件修改 yaml 文件修改 service 端口修改 clusterrolebinding修改 deployment 内容修改探针检测修改镜像拉取策略修改容器端口关闭 token 登录增加 ingress完整版 yaml下载官方 yaml 文件 最后有完整版的 yaml 文件,不想看细节的话&am…

苹果中的这些小技巧,你知道吗

技巧一:iPhone镜像 觉得手机屏幕太小看电影玩游戏不爽怎么办?投屏功能帮我们解决了问题,使用方法也很简单。打开控制中心,点击投屏,选择设备,连接投屏。这里需要注意的是,手机和连接的设备必须在…

【MIKE水动力】MIKE11基本原理(上)

Mike11软件包由水动力、对流~扩散、水质、降雨~径流、洪水预报等模块组成,核心模块为水动力模块。Mike11水动力模块采用6点Abbott~Ionescu有限差分格式对圣维南方程组求解。 一、圣维南方程组 1、基本要素与假设条件 Mike11模型…

开源流程引擎activiti、flowable、camunda选哪个好?

市场上比较有名的开源流程引擎有osworkflow、jbpm、activiti、flowable、camunda。其中:Jbpm4、Activiti、Flowable、camunda四个框架同宗同源,祖先都是Jbpm4,开发者只要用过其中一个框架,基本上就会用其它三个。低代码平台、办公…

IO流概念、FileWriter类及FileReader类详解

目录 IO流概述和分类 ​编辑FileWriter写数据 FileWriter写数据的方法 FileWriter写数据常见问题 FileReader读数据 IO流概述和分类 IO流用来处理设备之间的数据传输–文件复制,上传文件和下载文件 IO流分类–输出流——FileWriter –输入流——FileReader 图式详解&am…

< 每日算法 - Javascript解析: 交通枢纽 >

每日算法 - JavaScript解析:交通枢纽一、任务描述:》 示例一:》示例二二、题意解析拓展知识三、解决方案:往期内容 💨一、任务描述: 为了缓解「力扣嘉年华」期间的人流压力,组委会在活动期间开…

谷歌优化排名怎么做?Google SEO怎么优化?

本文主要分享关于Google自然排名优化中的一些方法和技巧,让你更快的做好谷歌排名。 本文由光算创作,有可能会被修改和剽窃,我们佛系对待这种行为吧。 谷歌优化排名怎么做?Google SEO怎么优化? 答案是:创…

CMOS器件与TTL器件CMOS电平与TTL电平

常用的数字芯片,按制造工艺主要分为TTL器件和CMOS器件。TTL器件是指其内部主要逻辑单元为双极性晶体管,CMOS器件是指其内部的主要逻辑单元为MOS管。现在绝大部分数字芯片使用的工艺都是CMOS工艺,在一些比较老的74系列芯片中还使用的是TTL工艺…

51单片机最强模块化封装(1)

文章目录前言一、sys文件创建和路径添加1.创建文件夹添加文件夹路径二、sys文件编写1.sys.h2.sys.c三、模块化的测试总结前言 今天将为大家讲解51单片机的模块化封装,为什么要讲这个模块化封装呢?模块化封装将提高我们代码的可移植性和可复用性&#xf…

力扣刷题记录——1002. 查找共用字符、905. 按奇偶排序数组、 977. 有序数组的平方

本专栏主要记录力扣的刷题记录,备战蓝桥杯,供复盘和优化算法使用,也希望给大家带来帮助,博主是算法小白,希望各位大佬不要见笑,今天要分享的是——《力扣刷题记录——1002. 查找共用字符、905. 按奇偶排序数…

服务器被ddos攻击的处置策略

如果您的服务器遭到了DDoS攻击,以下是一些可以采取的措施:使用防火墙和安全组进行限制:限制服务器的流量以防止进一步的攻击。升级服务器资源:为了应对更高的流量,可以升级服务器的内存,处理器等资源。安装…

GraspNet-1Billion

目录 .1 intro .2 Dataset 2.1 data collection: 2.2 data annotation 2.3 evaluation .3 backbone 3.1 Training and Inference 3.2 Experiment References .1 intro contribution: 一个具有统一评价体系的大规模抓取姿态检测数据集 评估系统通过解析计…

顶会论文 | 虚拟网络探测技术的探索与实践

作者:吕彪 阿里云网络齐天负责人 云网络由物理网络和虚拟网络共同组成,两者都会影响网络性能。过去的研究主要集中于解决物理网络探测,而在虚拟网络探测领域的相应研究则较少。本文将为大家分享一种专为大规模多租户虚拟网络设计的主动探测系…

SAP进阶技术分享一:ABAP增强(1)

一:基于源代码的增强 1.定义 源代码增强以子程序形式发布,可以用PERFORM调用这些子程序,发布的时候是空的,提供一个空代码的子过程,用户可以添加自己的代码。 2.特点 需要修改sap的标准代码。   屏幕增强以客户屏幕…

opencv轮廓相关函数

查找轮廓contours, hierarchy cv2.findContours(image,mode,method)参数:image:寻找轮廓所使用的图像。(寻找过程不修改此图像)mode:模式。cv2.RETR_EXTERNAL只检测外轮廓;cv2.RETR_LIST检测的轮廓不建立等…