SwiftUI 文本框TextField添加清除按钮

news/2024/7/20 20:58:39 标签: swiftui, ios, swift

这里写自定义目录标题

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

前言/背景

使用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>swiftui-add-clearbutton-to-textfield
[2] https://sanzaru84.medium.com/swiftui>swiftui-how-to-add-a-clear-button-to-a-textfield-9323c48ba61c


http://www.niftyadmin.cn/n/31785.html

相关文章

vue前端框架应用案例(二)实现简单的SPA应用

目录路由使用步骤案例效果案例目录结构App.vueAbout.vueHome.vueindex.jsmain.jsindex.html本博客参考尚硅谷官方课程,详细请参考 【尚硅谷bilibili官方】 本博客以vue2作为学习目标(请勿混淆v2与v3的代码规范,否则可能出现报错&#xff09…

国联易安:2023年网络安全“五大技术”预测

我国对网络安全非常重视,明确指出“安全是发展的前提,发展是安全的保障,安全和发展要同步推进”。作为国内专注于保密与非密领域的分级保护、等级保护、业务连续性安全和大数据安全产品解决方案与相关技术研究开发的领军企业,国联…

linux基本功系列-top命令实战

文章目录一. top命令介绍二. 语法格式及常用选项三. 参考案例3.1 显示进程信息3.2 显示完整的进程命令3.3 以批处理的形式展示3.4 设置信息更新频次3.5 显示指定进程号的信息3.6 top面板中常用参数3.7 其他用法四. top的相关说明4.1 交互命令介绍4.2 top面板每行信息的含义4.2.…

高阶导数——“高等数学”

各位CSDN的uu们你们好呀,今天,小雅兰的内容是高阶导数,在这之前,我们学习了导数的概念和函数的求导法则,那么今天,就让我们一起进入高阶导数的世界吧 一、高阶导数的定义 二、高阶导数的计算 1.直接法 2.间…

房地产OA信息化选型中的误区与正解(必看哦)

说起OA信息化,不少未上OA信息化的企业恨不得马上开始导入,而一些做过OA信息化企业感同身受就太多了! 一、为什么不少房地产企业青睐上OA信息化?其迫切程度比制造业更为紧迫? 这个答案不难给出!因为房地产企…

Leetcode:343. 整数拆分(C++)

目录 问题描述: 实现代码与解析: 动态规划: 原理思路: 优化版: 原理思路: 数学方法: 原理思路: 问题描述: 给定一个正整数 n ,将其拆分为 k 个 正整数…

关于【继承】这些你都了解吗?

致前行的人: 要努力,但不要着急,繁花锦簇,硕果累累,都需要过程! 目录 1.继承的概念和定义 1.1继承的概念 1.2继承的定义 2.基类和派生类对象赋值转换 3.继承中的作用域 4.派生类的默认成员函数 5.继承与友元…

OpenHarmony3.1 配合Hi3861 轻量级 应用开发demo

参考连大神的文章,一步步来 OpenHarmony轻量系统开发【4】编写第一个程序、启动流程分析_连志安的博客的博客-CSDN博客_openharmony 应用启动流程 但是有一个地方要注意 模块的BUILD.gn文件里面 lite_component("app") { features [ #"startup&…