{"id":5595,"date":"2022-04-24T11:33:00","date_gmt":"2022-04-24T03:33:00","guid":{"rendered":"http:\/\/123.57.164.21\/?p=5595"},"modified":"2022-04-24T11:33:00","modified_gmt":"2022-04-24T03:33:00","slug":"swiftui-textfield-%e8%bf%9b%e9%98%b6-%e6%a0%bc%e5%bc%8f%e4%b8%8e%e6%a0%a1%e9%aa%8c","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=5595","title":{"rendered":"SwiftUI TextField \u8fdb\u9636\u2014\u2014\u683c\u5f0f\u4e0e\u6821\u9a8c"},"content":{"rendered":"\n<p>\u8f6c\u8f7d\uff1ahttps:\/\/www.fatbobman.com\/posts\/textfield-1\/<\/p>\n\n\n\n<p>SwiftUI \u7684 TextField \u53ef\u80fd\u662f\u5f00\u53d1\u8005\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u6700\u5e38\u4f7f\u7528\u7684\u6587\u672c\u5f55\u5165\u7ec4\u4ef6\u4e86\u3002\u4f5c\u4e3a UITextField\uff08NSTextField\uff09\u7684 SwiftUI \u5c01\u88c5\uff0c\u82f9\u679c\u4e3a\u5f00\u53d1\u8005\u63d0\u4f9b\u4e86\u4f17\u591a\u7684\u6784\u9020\u65b9\u6cd5\u548c\u4fee\u9970\u7b26\u4ee5\u63d0\u9ad8\u5176\u4f7f\u7528\u7684\u4fbf\u5229\u6027\u3001\u5b9a\u5236\u6027\u3002\u4f46 SwiftUI \u5728\u5c01\u88c5\u4e2d\u4e5f\u5c4f\u853d\u4e86\u4e0d\u5c11\u7684\u9ad8\u7ea7\u63a5\u53e3\u548c\u529f\u80fd\uff0c\u589e\u52a0\u4e86\u5f00\u53d1\u8005\u5b9e\u73b0\u67d0\u4e9b\u7279\u5b9a\u9700\u8981\u7684\u590d\u6742\u6027\u3002\u672c\u6587\u4e3a\u3010SwiftUI \u8fdb\u9636\u3011\u7cfb\u5217\u6587\u7ae0\u4e2d\u7684\u4e00\u7bc7\uff0c\u5728\u672c\u6587\u4e2d\uff0c\u6211\u5c06\u4ecb\u7ecd\u5982\u4f55\u5728 TextField \u4e2d\u5b9e\u73b0\u5982\u4e0b\u529f\u80fd\uff1a<\/p>\n\n\n\n<ul><li>\u5c4f\u853d\u65e0\u6548\u5b57\u7b26<\/li><li>\u5224\u65ad\u5f55\u5165\u7684\u5185\u5bb9\u662f\u5426\u6ee1\u8db3\u7279\u5b9a\u6761\u4ef6<\/li><li>\u5bf9\u5f55\u5165\u7684\u6587\u672c\u5b9e\u65f6\u683c\u5f0f\u5316\u663e\u793a<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/textfieldDemo1-3998601.gif\" alt=\"\" class=\"wp-image-5596\" width=\"488\" height=\"225\"\/><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"60\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-158-1024x60.png\" alt=\"\" class=\"wp-image-5597\" srcset=\"https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-158-1024x60.png 1024w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-158-300x17.png 300w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-158-768x45.png 768w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-158-1536x89.png 1536w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-158-830x48.png 830w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-158-230x13.png 230w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-158-350x20.png 350w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-158-480x28.png 480w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-158.png 1822w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>\u4e3a\u4ec0\u4e48\u4e0d\u81ea\u5df1\u5c01\u88c5\u65b0\u7684\u5b9e\u73b0<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>\u5bf9\u4e8e\u5f88\u591a\u4ece UIKit \u8f6c\u5230 SwiftUI \u7684\u5f00\u53d1\u8005\uff0c\u5f53\u9047\u5230 SwiftUI \u5b98\u65b9 API \u529f\u80fd\u65e0\u6cd5\u6ee1\u8db3\u67d0\u4e9b\u9700\u6c42\u7684\u60c5\u51b5\u4e0b\uff0c\u975e\u5e38\u81ea\u7136\u5730\u4f1a\u60f3\u901a\u8fc7 UIViewRepresentable \u6765\u5c01\u88c5\u81ea\u5df1\u7684\u5b9e\u73b0\uff08\u53c2\u9605 <a href=\"https:\/\/www.fatbobman.com\/posts\/uikitInSwiftUI\/\">\u5728 SwiftUI \u4e2d\u4f7f\u7528 UIKit \u89c6\u56fe<\/a> \u4e86\u89e3\u66f4\u591a\u5185\u5bb9\uff09\u3002\u5728 SwiftUI \u65e9\u671f\uff0c\u8fd9\u786e\u5b9e\u662f\u5341\u5206\u6709\u6548\u7684\u624b\u6bb5\u3002\u4e0d\u8fc7\u968f\u7740 SwiftUI \u7684\u9010\u6e10\u6210\u719f\uff0c\u82f9\u679c\u4e3a SwiftUI \u7684 API \u63d0\u4f9b\u4e86\u5927\u91cf\u72ec\u6709\u529f\u80fd\u3002\u5982\u679c\u4ec5\u4e3a\u4e86\u67d0\u4e9b\u9700\u6c42\u800c\u653e\u5f03\u4f7f\u7528\u5b98\u65b9\u7684 SwiftUI \u65b9\u6848\u6709\u4e9b\u5f97\u4e0d\u507f\u5931\u3002<\/p>\n\n\n\n<p>\u56e0\u6b64\uff0c\u5728\u6700\u8fd1\u51e0\u4e2a\u6708\u7684\u65f6\u95f4\u91cc\uff0c\u6211\u9010\u6e10\u629b\u5f03\u4e86\u901a\u8fc7\u81ea\u884c\u5c01\u88c5\u6216\u4f7f\u7528\u5176\u4ed6\u7b2c\u4e09\u65b9\u6269\u5c55\u5e93\u6765\u5b9e\u73b0\u67d0\u4e9b\u9700\u6c42\u601d\u8def\u3002\u5728\u4e3a SwiftUI \u589e\u52a0\u65b0\u529f\u80fd\u65f6\uff0c\u8981\u6c42\u81ea\u5df1\u5c3d\u91cf\u9075\u5b88\u4ee5\u4e0b\u539f\u5219\uff1a<\/p>\n\n\n\n<ul><li>\u4f18\u5148\u8003\u8651\u80fd\u5426\u5728 SwiftUI \u539f\u751f\u65b9\u6cd5\u4e2d\u627e\u5230\u89e3\u51b3\u624b\u6bb5<\/li><li>\u5982\u786e\u9700\u91c7\u7528\u975e\u539f\u751f\u65b9\u6cd5\uff0c\u5c3d\u91cf\u91c7\u7528\u975e\u7834\u574f\u6027\u7684\u5b9e\u73b0\uff0c\u65b0\u589e\u529f\u80fd\u4e0d\u80fd\u4ee5\u727a\u7272\u539f\u6709\u529f\u80fd\u4e3a\u4ee3\u4ef7\uff08\u9700\u517c\u5bb9\u5b98\u65b9\u7684 SwiftUI \u4fee\u9970\u65b9\u6cd5\uff09<\/li><\/ul>\n\n\n\n<p>\u4ee5\u4e0a\u539f\u5219\uff0c\u5728 <a href=\"https:\/\/www.fatbobman.com\/posts\/sheetKit\/\">SheetKit\u2014\u2014SwiftUI \u6a21\u6001\u89c6\u56fe\u6269\u5c55\u5e93<\/a> \u548c <a href=\"https:\/\/www.fatbobman.com\/posts\/NavigationViewKit\/\">\u7528 NavigationViewKit \u589e\u5f3a SwiftUI \u7684\u5bfc\u822a\u89c6\u56fe<\/a> \u4e2d\u5747\u6709\u4f53\u73b0\u3002<\/p>\n\n\n\n<p><strong>\u5982\u4f55\u5728 TextField \u4e2d\u5b9e\u73b0\u683c\u5f0f\u5316\u663e\u793a<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p id=\"\u73b0\u6709\u683c\u5f0f\u5316\u65b9\u6cd5\"><strong>\u73b0\u6709\u683c\u5f0f\u5316\u65b9\u6cd5<\/strong><\/p>\n\n\n\n<p>\u5728 SwiftUI 3.0 \u4e2d\uff0cTextField \u65b0\u589e\u4e86\u4f7f\u7528\u65b0\u8001\u4e24\u79cd Formatter \u7684\u6784\u9020\u65b9\u6cd5\u3002\u5f00\u53d1\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u975e String \u7c7b\u578b\u7684\u6570\u636e\uff08\u5982\u6574\u6570\u3001\u6d6e\u70b9\u6570\u3001\u65e5\u671f\u7b49\uff09\uff0c\u901a\u8fc7 Formatter \u6765\u683c\u5f0f\u5316\u5f55\u5165\u7684\u5185\u5bb9\u3002\u4f8b\u5982\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct FormatterDemo:View{\n    @State var number = 100\n    var body: some View{\n        Form{\n            TextField(\"inputNumber\",value:$number,format: .number)\n        }\n    }\n}\n<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/textFieldDemo2.gif\" alt=\"\" class=\"wp-image-5598\" width=\"452\" height=\"209\"\/><\/figure><\/div>\n\n\n\n<p>\u4e0d\u8fc7\u975e\u5e38\u9057\u61be\u7684\u662f\uff0c\u5c3d\u7ba1\u6211\u4eec\u53ef\u4ee5\u8bbe\u7f6e\u6700\u7ec8\u683c\u5f0f\u5316\u7684\u6837\u5f0f\uff0c\u4f46\u662f TextField \u5e76\u4e0d\u80fd\u5728\u6587\u5b57\u5f55\u5165\u8fc7\u7a0b\u4e2d\u5bf9\u6587\u672c\u8fdb\u884c\u683c\u5f0f\u5316\u663e\u793a\u3002\u53ea\u6709\u5f53\u89e6\u53d1 submit \u72b6\u6001\uff08commit\uff09\u6216\u5931\u53bb\u7126\u70b9\u65f6\uff0c\u624d\u4f1a\u5bf9\u6587\u672c\u8fdb\u884c\u683c\u5f0f\u5316\u3002\u884c\u4e3a\u4e0e\u6211\u4eec\u7684\u6700\u521d\u7684\u9700\u6c42\u6709\u4e00\u5b9a\u5dee\u8ddd\u3002<\/p>\n\n\n\n<p><strong>\u53ef\u80fd\u7684\u683c\u5f0f\u5316\u89e3\u51b3\u601d\u8def<\/strong><\/p>\n\n\n\n<ul><li>\u5728\u5f55\u5165\u8fc7\u7a0b\u4e2d\u6fc0\u6d3b TextField \u5185\u7f6e\u7684 Formatter\uff0c\u8ba9\u5176\u80fd\u591f\u5728\u6587\u672c\u53d1\u751f\u53d8\u5316\u65f6\u5bf9\u5185\u5bb9\u8fdb\u884c\u683c\u5f0f\u5316<\/li><li>\u5728\u6587\u672c\u53d1\u751f\u53d8\u5316\u65f6\u8c03\u7528\u81ea\u5df1\u5b9e\u73b0\u7684 Format \u65b9\u6cd5\uff0c\u5bf9\u5185\u5bb9\u8fdb\u884c\u5b9e\u65f6\u683c\u5f0f\u5316<\/li><\/ul>\n\n\n\n<p>\u5bf9\u4e8e\u7b2c\u4e00\u79cd\u601d\u8def\uff0c\u76ee\u524d\u6211\u4eec\u53ef\u4ee5\u91c7\u7528\u4e00\u79cd\u975e\u6b63\u5e38\u624b\u6bb5\u5373\u53ef\u6fc0\u6d3b\u5b9e\u65f6\u683c\u5f0f\u5316\u2014\u2014\u66ff\u6362\u6216\u53d6\u6d88\u6389\u5f53\u524d\u7684 TextFiled \u7684 delegate \u5bf9\u8c61\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">  TextField(\"inputNumber\",value:$number,format: .number)\n                .introspectTextField{ td in\n                    td.delegate = nil\n                }\n<\/pre>\n\n\n\n<p>\u4e0a\u9762\u7684\u4ee3\u7801\u901a\u8fc7 <a href=\"https:\/\/github.com\/siteline\/SwiftUI-Introspect\" target=\"_blank\" rel=\"noreferrer noopener\">SwiftUI-Introspect<\/a> \u5b9e\u73b0\u4e86\u5bf9\u6307\u5b9a\u7684 TextField \u8eab\u540e\u5bf9\u5e94\u7684 UITextField \u7684 delegate \u66ff\u6362\uff0c\u5373\u53ef\u5b8c\u6210\u5b9e\u65f6\u683c\u5f0f\u5316\u7684\u6fc0\u6d3b\u5de5\u4f5c\u3002\u672c\u6587\u7684\u65b9\u6848\u4e00\u4fbf\u662f\u8fd9\u79cd\u601d\u8def\u7684\u5177\u4f53\u5b9e\u73b0\u3002<\/p>\n\n\n\n<p>\u7b2c\u4e8c\u79cd\u601d\u8def\uff0c\u5219\u662f\u4e0d\u4f7f\u7528\u9ed1\u9b54\u6cd5\uff0c\u4ec5\u901a\u8fc7 SwiftUI \u7684\u539f\u751f\u65b9\u5f0f\uff0c\u5728\u5f55\u5165\u6587\u672c\u53d1\u751f\u53d8\u5316\u65f6\uff0c\u5bf9\u6587\u672c\u8fdb\u884c\u683c\u5f0f\u5316\u3002\u672c\u6587\u7684\u65b9\u6848\u4e8c\u662f\u8be5\u601d\u8def\u7684\u5177\u4f53\u5b9e\u73b0\u3002<\/p>\n\n\n\n<p><strong>\u5982\u4f55\u5728 TextField \u4e2d\u5c4f\u853d\u65e0\u6548\u5b57\u7b26<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p id=\"\u73b0\u6709\u5c4f\u853d\u5b57\u7b26\u65b9\u6cd5\"><strong>\u73b0\u6709\u5c4f\u853d\u5b57\u7b26\u65b9\u6cd5<\/strong><\/p>\n\n\n\n<p>\u5728 SwiftUI \u4e2d\uff0c\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6e\u4ec5\u4f7f\u7528\u7279\u5b9a\u7684\u952e\u76d8\u7c7b\u578b\u6765\u5b9e\u73b0\u4e00\u5b9a\u7a0b\u5ea6\u4e0a\u7684\u5f55\u5165\u9650\u5236\u3002\u6bd4\u5982\uff0c\u4e0b\u9762\u7684\u4ee3\u7801\u5c06\u4ec5\u5141\u8bb8\u7528\u6237\u5f55\u5165\u6570\u5b57\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">TextField(\"inputNumber\",value:$number,format: .number)\n    .keyboardType(.numberPad)<\/pre>\n\n\n\n<p>\u7136\u800c\uff0c\u4e0a\u8ff0\u65b9\u6848\u8fd8\u662f\u6709\u76f8\u5f53\u7684\u5c40\u9650\u6027\u7684\u3002<\/p>\n\n\n\n<ul><li>\u53ea\u652f\u6301\u90e8\u5206\u7c7b\u578b\u7684\u8bbe\u5907<\/li><li>\u652f\u6301\u7684\u952e\u76d8\u7c7b\u578b\u6709\u9650<\/li><\/ul>\n\n\n\n<p>\u4f8b\u5982\u5728 iPad \u4e0b keyboardType \u662f\u65e0\u6548\u7684\uff0c\u5728\u82f9\u679c\u9f13\u52b1\u5e94\u7528\u7a0b\u5e8f\u5bf9\u591a\u8bbe\u5907\u7c7b\u578b\u652f\u6301\u7684\u4eca\u5929\uff0c\u8ba9\u7528\u6237\u5728\u4e0d\u540c\u7684\u8bbe\u5907\u4e0a\u4eab\u53d7\u5230\u76f8\u540c\u7684\u4f53\u9a8c\u81f3\u5173\u91cd\u8981\u3002<\/p>\n\n\n\n<p>\u53e6\u5916\uff0c\u7531\u4e8e\u5176\u652f\u6301\u952e\u76d8\u7c7b\u578b\u6709\u9650\uff0c\u5728\u5f88\u591a\u7684\u5e94\u7528\u573a\u5408\u90fd\u6349\u895f\u89c1\u8098\u3002\u6700\u5178\u578b\u7684\u4f8b\u5b50\u5c31\u662f<code>numberPad<\/code>\u662f\u4e0d\u652f\u6301<code>\u8d1f\u53f7<\/code>\u7684\uff0c\u610f\u5473\u7740\u5b83\u4ec5\u80fd\u9002\u7528\u4e8e\u6b63\u6574\u6570\u3002\u6709\u4e9b\u5f00\u53d1\u8005\u53ef\u4ee5\u901a\u8fc7\u81ea\u5b9a\u4e49\u952e\u76d8\u6216\u6dfb\u52a0<code>inputAccessoryView<\/code>\u6765\u89e3\u51b3\uff0c\u4f46\u5bf9\u4e8e\u5176\u4ed6\u6ca1\u6709\u80fd\u529b\u6216\u7cbe\u529b\u7684\u5f00\u53d1\u8005\u6765\u8bf4\uff0c\u5982\u679c\u80fd\u76f4\u63a5\u5bf9\u5f55\u5165\u7684\u65e0\u6548\u5b57\u7b26\u8fdb\u884c\u5c4f\u853d\u5219\u4e5f\u662f\u4e0d\u9519\u7684\u89e3\u51b3\u65b9\u6848\u3002<\/p>\n\n\n\n<p><strong>\u53ef\u80fd\u7684\u5c4f\u853d\u5b57\u7b26\u89e3\u51b3\u601d\u8def<\/strong><\/p>\n\n\n\n<ul><li>\u4f7f\u7528 UITextFieldDelegate \u7684<code>textField<\/code>\u65b9\u6cd5<\/li><li>\u5728 SwiftUI \u7684\u89c6\u56fe\u4e2d\uff0c\u4f7f\u7528<code>onChange<\/code>\u5728\u5f55\u5165\u53d1\u751f\u53d8\u5316\u65f6\u8fdb\u884c\u5224\u65ad\u5e76\u4fee\u6539<\/li><\/ul>\n\n\n\n<p>\u7b2c\u4e00\u79cd\u601d\u8def\uff0c\u4ecd\u9700\u4f7f\u7528 Introspect \u4e4b\u7c7b\u7684\u65b9\u5f0f\uff0c\u5bf9 TextField \u8eab\u540e\u7684 UITextField \u8fdb\u884c\u4fb5\u5165\uff0c\u66ff\u6362\u6389\u5b83\u539f\u6709\u7684<code>textField<\/code>\u65b9\u6cd5\uff0c\u5728\u5176\u4e2d\u8fdb\u884c\u5b57\u7b26\u5224\u65ad\u3002\u5b9e\u8df5\u4e2d\uff0c\u8fd9\u79cd\u65b9\u5f0f\u662f\u6700\u9ad8\u6548\u7684\u624b\u6bb5\uff0c\u56e0\u4e3a\u8be5\u5224\u65ad\u53d1\u751f\u5728\u5b57\u7b26\u88ab UITextField \u786e\u8ba4\u4e4b\u524d\uff0c\u5982\u679c\u6211\u4eec\u53d1\u73b0\u65b0\u6dfb\u52a0\u7684<code>string<\/code>\u4e0d\u6ee1\u8db3\u6211\u4eec\u7684\u8bbe\u5b9a\u7684\u5f55\u5165\u8981\u6c42\uff0c\u53ef\u4ee5\u76f4\u63a5\u8fd4\u56de false\uff0c\u5219\u6700\u8fd1\u5f55\u5165\u7684\u5b57\u7b26\u5c06\u4e0d\u4f1a\u663e\u793a\u5728\u5f55\u5165\u6846\u4e2d\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {\n        \/\/ \u68c0\u67e5 string \u662f\u5426\u6ee1\u8db3\u6761\u4ef6\n        if \u6ee1\u8db3\u6761\u4ef6 { return true } \/\/ \u5c06\u65b0\u589e\u5b57\u7b26\u6dfb\u52a0\u5230\u8f93\u5165\u6846\n        else { return false}\n }\n<\/pre>\n\n\n\n<p>\u4f46\u662f\u901a\u8fc7 Delegate \u7684\u65b9\u6cd5\uff0c\u6211\u4eec\u5e76\u4e0d\u80fd\u9009\u62e9\u4fdd\u7559\u90e8\u5206\u5b57\u7b26\uff0c\u4e5f\u5c31\u662f\u8bf4\u8981\u4e0d\u5168\u90e8\u63a5\u53d7\u3001\u8981\u4e0d\u90fd\u4e0d\u63a5\u53d7\uff08\u5982\u679c\u81ea\u884c\u5305\u88c5 UITextField\uff0c\u6211\u4eec\u53ef\u4ee5\u5b9e\u73b0\u4efb\u4f55\u903b\u8f91\uff09\u3002\u65b9\u6848\u4e00\u91c7\u7528\u4e86\u672c\u601d\u8def\u3002<\/p>\n\n\n\n<p>\u7b2c\u4e8c\u79cd\u601d\u8def\u6211\u4eec\u662f\u652f\u6301\u9009\u62e9\u6027\u4fdd\u5b58\u7684\uff0c\u4f46\u662f\u5176\u4e5f\u6709\u5c40\u9650\u6027\u3002\u7531\u4e8e TextField \u7684 Formatter \u6784\u9020\u65b9\u6cd5\u91c7\u7528\u4e86\u7279\u522b\u7684\u5305\u88c5\u65b9\u5f0f\uff0c\u6211\u4eec\u65e0\u6cd5\u83b7\u5f97\u7ed1\u5b9a\u503c\u4e0d\u662f<code>String<\/code>\u65f6\uff08\u4f8b\u5982\u6574\u6570\u3001\u6d6e\u70b9\u6570\u3001\u65e5\u671f\u7b49\uff09\u7684\u5f55\u5165\u6846\u5185\u5bb9\u7684\u3002\u56e0\u6b64\uff0c\u91c7\u7528\u8fd9\u79cd\u601d\u8def\uff0c\u6211\u4eec\u53ea\u80fd\u4f7f\u7528\u5b57\u7b26\u4e32\u4f5c\u4e3a\u7ed1\u5b9a\u7c7b\u578b\uff0c\u5c06\u65e0\u6cd5\u4eab\u53d7\u5230 SwiftUI \u65b0\u7684\u6784\u9020\u65b9\u6cd5\u5e26\u6765\u7684\u4fbf\u6377\u6027\u3002\u65b9\u6848\u4e8c\u91c7\u7528\u4e86\u8be5\u601d\u8def\u3002<\/p>\n\n\n\n<p><strong>\u5982\u4f55\u5728 TextField \u4e2d\u68c0\u67e5\u5185\u5bb9\u662f\u5426\u7b26\u5408\u6307\u5b9a\u6761\u4ef6<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>\u76f8\u8f83\u4e0a\u8ff0\u4e24\u4e2a\u76ee\u6807\uff0c\u5728 SwiftUI \u4e2d\u68c0\u67e5 TextField \u5185\u5bb9\u662f\u5426\u7b26\u5408\u6307\u5b9a\u6761\u4ef6\u662f\u76f8\u5f53\u65b9\u4fbf\u7684\u3002\u4f8b\u5982\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">TextField(\"inputNumber\", value: $number, format: .number)\n                .foregroundColor(number &lt; 100 ? .red : .primary)\n<\/pre>\n\n\n\n<p><em>\u4e0a\u9762\u7684\u4ee3\u7801\u5728\u5f55\u5165\u7684\u6570\u5b57\u5c0f\u4e8e 100 \u65f6\u4f1a\u5c06\u6587\u5b57\u663e\u793a\u989c\u8272\u8bbe\u7f6e\u4e3a\u7ea2\u8272\u3002<\/em><\/p>\n\n\n\n<p>\u5f53\u7136\uff0c\u6211\u4e48\u4e5f\u53ef\u4ee5\u5ef6\u7eed\u4e0a\u9762\u65b9\u6848\u7684\u601d\u8def\uff0c\u5728 delegate \u7684<code>textfield<\/code>\u65b9\u6cd5\u4e2d\u5bf9\u6587\u672c\u8fdb\u884c\u5224\u65ad\u3002\u4e0d\u8fc7\u8fd9\u79cd\u65b9\u5f0f\u5bf9\u7c7b\u578b\u7684\u9002\u7528\u6027\u4e0d\u5f3a\uff08\u975e<code>String<\/code>\u7c7b\u578b\u9700\u8f6c\u6362\uff09\u3002<\/p>\n\n\n\n<p><strong>\u5176\u4ed6\u9700\u8981\u6ce8\u610f\u7684\u95ee\u9898<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>\u5728\u4f7f\u7528\u4e0a\u9762\u7684\u601d\u8def\u8fdb\u884c\u5b9e\u9645\u7f16\u7a0b\u524d\uff0c\u6211\u4eec\u8fd8\u9700\u8981\u8003\u8651\u5176\u4ed6\u51e0\u4e2a\u95ee\u9898\uff1a<\/p>\n\n\n\n<p id=\"\u672c\u5730\u5316\"><strong>\u672c\u5730\u5316<\/strong><\/p>\n\n\n\n<p>\u672c\u6587\u63d0\u4f9b\u7684 <a href=\"https:\/\/github.com\/fatbobman\/TextFieldFomatAndValidateDemo\" target=\"_blank\" rel=\"noreferrer noopener\">\u6f14\u793a\u4ee3\u7801<\/a> \u4e2d\u5b9e\u73b0\u4e86\u5bf9<code>Int<\/code>\u548c<code>Double<\/code>\u4e24\u79cd\u7c7b\u578b\u7684\u5b9e\u65f6\u5904\u7406\u3002\u5c3d\u7ba1\u8fd9\u4e24\u79cd\u7c7b\u578b\u57fa\u672c\u4e0a\u90fd\u662f\u4ee5\u6570\u5b57\u4e3a\u4e3b\uff0c\u4f46\u5728\u5904\u7406\u65f6\u4ecd\u9700\u6ce8\u610f\u672c\u5730\u5316\u95ee\u9898\u3002<\/p>\n\n\n\n<p>\u5bf9\u4e8e\u4e0d\u540c\u5730\u533a\u7684\u6570\u5b57\uff0c\u5176\u5c0f\u6570\u70b9\u548c\u7ec4\u5206\u9694\u7b26\u53ef\u80fd\u662f\u4e0d\u4e00\u6837\u7684\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">1,000,000.012 \/\/ \u5927\u591a\u6570\u5730\u533a\n1 000 000,012 \/\/ fr<\/pre>\n\n\n\n<p>\u56e0\u6b64\uff0c\u5728\u5224\u65ad\u6709\u6548\u5b57\u7b26\u65f6\uff0c\u6211\u4eec\u9700\u8981\u901a\u8fc7 Locale \u6765\u83b7\u53d6\u8be5\u5730\u533a\u7684<code>decimalSeparator<\/code>\u548c<code>groupingSeparator<\/code>\u3002<\/p>\n\n\n\n<p>\u5982\u679c\u4f60\u9700\u8981\u5224\u65ad\u7684\u662f\u65e5\u671f\u6216\u5176\u4ed6\u81ea\u5b9a\u4e49\u683c\u5f0f\u6570\u636e\uff0c\u6700\u597d\u4e5f\u5728\u4ee3\u7801\u4e2d\u63d0\u4f9b\u9488\u5bf9\u672c\u5730\u5316\u5b57\u7b26\u7684\u5904\u7406\u8fc7\u7a0b\u3002<\/p>\n\n\n\n<p id=\"Formatter\"><strong>Formatter<\/strong><\/p>\n\n\n\n<p>SwiftUI \u7684 TextField \u76ee\u524d\u5bf9\u65b0\u8001\u4e24\u79cd Formatter \u90fd\u63d0\u4f9b\u4e86\u5bf9\u5e94\u7684\u6784\u9020\u65b9\u6cd5\u3002\u6211\u503e\u5411\u4e8e\u4f7f\u7528\u65b0\u7684 Formatter API\u3002\u5176\u4e3a\u65e7 Formatter API \u7684 Swift \u539f\u751f\u5b9e\u73b0\uff0c\u63d0\u4f9b\u4e86\u66f4\u4fbf\u6377\u3001\u66f4\u5b89\u5168\u7684\u7684\u58f0\u660e\u65b9\u5f0f\u3002\u5173\u4e8e\u65b0 Formatter \u7684\u66f4\u591a\u8d44\u6599\u8bf7\u9605\u8bfb <a href=\"https:\/\/www.fatbobman.com\/posts\/newFormatter\/\">WWDC 2021 \u65b0 Formatter API\uff1a\u65b0\u8001\u6bd4\u8f83\u53ca\u5982\u4f55\u81ea\u5b9a\u4e49<\/a>\u3002<\/p>\n\n\n\n<p>\u4e0d\u8fc7\uff0cTextField \u5bf9\u65b0 Formatter \u7684\u652f\u6301\u76ee\u524d\u4ecd\u6709\u90e8\u5206\u95ee\u9898\uff0c\u56e0\u6b64\u5728\u7f16\u5199\u4ee3\u7801\u65f6\u9700\u7279\u522b\u6ce8\u610f\u3002\u4f8b\u5982<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@State var number = 100 \nTextField(\"inputNumber\", value: $number, format: .number)<\/pre>\n\n\n\n<p>\u5728\u7ed1\u5b9a\u503c\u4e3a<code>Int<\/code>\u7684\u60c5\u51b5\u4e0b\uff0c\u5f53\u5f55\u5165\u7684\u6570\u5b57\u8d85\u591a 19 \u4e2a\u5b57\u7b26\u5c06\u4ea7\u751f\u6ea2\u51fa\uff0c\u5bfc\u81f4\u7a0b\u5e8f\u5d29\u6e83\uff08\u5df2\u63d0\u4ea4 FB\uff0c\u4f30\u8ba1\u4e4b\u540e\u7684\u7248\u672c\u4f1a\u6709\u4fee\u6b63\uff09\u3002\u597d\u5728\u672c\u6587\u7684\u6f14\u793a\u4ee3\u7801\u4e2d\uff0c\u63d0\u4f9b\u4e86\u5bf9\u5f55\u5165\u5b57\u7b26\u6570\u91cf\u7684\u9650\u5236\uff0c\u53ef\u4ee5\u6682\u65f6\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u3002<\/p>\n\n\n\n<p id=\"\u6613\u7528\u6027\"><strong>\u6613\u7528\u6027<\/strong><\/p>\n\n\n\n<p>\u5982\u679c\u4ec5\u5b9e\u73b0\u672c\u6587\u6700\u521d\u8bbe\u5b9a\u7684\u76ee\u6807\u5176\u5b9e\u5e76\u4e0d\u590d\u6742\uff0c\u4e0d\u8fc7\u5b9e\u73b0\u65b9\u5f0f\u6700\u597d\u80fd\u63d0\u4f9b\u65b9\u4fbf\u7684\u8c03\u7528\u624b\u6bb5\u5e76\u51cf\u5c11\u5bf9\u539f\u6709\u4ee3\u7801\u7684\u6c61\u67d3\u3002<\/p>\n\n\n\n<p>\u4f8b\u5982\uff0c\u4e0b\u9762\u7684\u4ee3\u7801\u4e3a\u65b9\u6848\u4e00\u548c\u65b9\u6848\u4e8c\u7684\u8c03\u7528\u65b9\u5f0f\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u65b9\u6848\u4e00\nlet intDelegate = ValidationDelegate(type: .int, maxLength: 6)\n\nTextField(\"0...1000\", value: $intValue, format: .number)\n       .addTextFieldDelegate(delegate: intDelegate)\n       .numberValidator(value: intValue) { $0 &lt; 0 || $0 > 1000 }\n\n\/\/ \u65b9\u6848\u4e8c\n@StateObject var intStore = NumberStore(text: \"\",\n                                        type: .int,\n                                        maxLength: 5,\n                                        allowNagative: true,\n                                        formatter: IntegerFormatStyle&lt;Int>())\n\nTextField(\"-1000...1000\", text: $intStore.text)\n       .formatAndValidate(intStore) { $0 &lt; -1000 || $0 > 1000 }<\/pre>\n\n\n\n<p>\u4ee5\u4e0a\u8c03\u7528\u65b9\u6cd5\u4ecd\u6709\u5f88\u5927\u7684\u4f18\u5316\u548c\u96c6\u6210\u7684\u7a7a\u95f4\uff0c\u4f8b\u5982\u5bf9 TextField \u4e8c\u5ea6\u5305\u88c5\uff08\u91c7\u7528 View\uff09\uff0c\u5728\u65b9\u6848\u4e8c\u4f7f\u7528\u5c5e\u6027\u5305\u88c5\u5668\u5bf9\u6570\u5b57\u548c\u5b57\u7b26\u4e32\u8fdb\u884c\u6865\u63a5\u7b49\u3002<\/p>\n\n\n\n<p><strong>\u65b9\u6848\u4e00<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u53ef\u4ee5\u5728 <a href=\"https:\/\/github.com\/fatbobman\/TextFieldFomatAndValidateDemo\" target=\"_blank\" rel=\"noreferrer noopener\">Github<\/a> \u4e0a\u4e0b\u8f7d\u672c\u6587\u7684 Demo \u4ee3\u7801\u3002\u6587\u7ae0\u4e2d\u4ec5\u5bf9\u90e8\u5206\u4ee3\u7801\u8fdb\u884c\u8bf4\u660e\uff0c\u5b8c\u6574\u7684\u5b9e\u73b0\u8bf7\u53c2\u7167\u6e90\u4ee3\u7801\u3002<\/p><\/blockquote>\n\n\n\n<p>\u65b9\u6848\u4e00\u4f7f\u7528 TextField \u7684\u65b0 Formatter \u6784\u9020\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public init&lt;F>(_ titleKey: LocalizedStringKey, value: Binding&lt;F.FormatInput>, format: F, prompt: Text? = nil) where F : ParseableFormatStyle, F.FormatOutput == String<\/pre>\n\n\n\n<p>\u901a\u8fc7\u66ff\u6362 delegate \u6765\u6fc0\u6d3b TextField \u5185\u7f6e\u7684 Format \u673a\u5236\uff0c\u5728 delegte \u7684<code>textfield<\/code>\u65b9\u6cd5\u4e2d\u5c4f\u853d\u65e0\u6548\u5b57\u7b26\u3002<\/p>\n\n\n\n<p>\u5c4f\u853d\u65e0\u6548\u5b57\u7b26\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {\n        let text = textField.text ?? \"\"\n        return validator(text: text, replacementString: string)\n    }\n\nprivate func validator(text: String, replacementString string: String) -> Bool {\n        \/\/ \u5224\u65ad\u6709\u6548\u5b57\u7b26\n        guard string.allSatisfy({ characters.contains($0) }) else { return false }\n        let totalText = text + string\n\n        \/\/ \u68c0\u67e5\u5c0f\u6570\u70b9\n        if type == .double, text.contains(decimalSeparator), string.contains(decimalSeparator) {\n            return false\n        }\n\n        \/\/ \u68c0\u67e5\u8d1f\u53f7\n        let minusCount = totalText.components(separatedBy: minusCharacter).count - 1\n\n        if minusCount > 1 {\n            return false\n        }\n        if minusCount == 1, !totalText.hasPrefix(\"-\") {\n            return false\n        }\n\n        \/\/ \u68c0\u67e5\u957f\u5ea6\n        guard totalText.count &lt; maxLength + minusCount else {\n            return false\n        }\n        return true\n}<\/pre>\n\n\n\n<p>\u5176\u4e2d\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u4e0d\u540c\u7684 Locale \u5c06\u63d0\u4f9b\u4e0d\u540c\u7684\u6709\u6548\u5b57\u7b26\u96c6\uff08<code>characters<\/code>\uff09\u3002<\/p>\n\n\n\n<p>\u6dfb\u52a0 View \u6269\u5c55<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">extension View {\n    \/\/ \u6839\u636e\u662f\u5426\u6ee1\u8db3\u6307\u5b9a\u6761\u4ef6\u8c03\u6574\u6587\u5b57\u989c\u8272\n    func numberValidator&lt;T: Numeric>(value: T, errorCondition: (T) -> Bool) -> some View {\n        foregroundColor(errorCondition(value) ? .red : .primary)\n    }\n    \/\/ \u66ff\u6362 delegate\n    func addTextFieldDelegate(delegate: UITextFieldDelegate) -> some View {\n        introspectTextField { td in\n            td.delegate = delegate\n        }\n    }\n}<\/pre>\n\n\n\n<p><strong>\u65b9\u6848\u4e8c<\/strong><\/p>\n\n\n\n<p>\u65b9\u6848\u4e8c\uff0c\u91c7\u7528\u4e86 SwiftUI \u539f\u751f\u7684\u65b9\u6cd5\u6765\u5b9e\u73b0\u540c\u6837\u7684\u76ee\u6807\uff0c\u7531\u4e8e\u65e0\u6cd5\u5229\u7528 TextField \u5185\u7f6e\u7684 Formatter\u3001\u539f\u59cb\u6587\u672c\u7b49\u529f\u80fd\uff0c\u56e0\u6b64\u5b9e\u73b0\u4e0a\u8981\u6bd4\u65b9\u6848\u4e00\u590d\u6742\u4e00\u4e9b\u3002\u53e6\u5916\uff0c\u4e3a\u4e86\u80fd\u591f\u5b9e\u65f6\u6821\u9a8c\u5f55\u5165\u5b57\u7b26\uff0c\u56e0\u6b64\u53ea\u80fd\u91c7\u7528\u5b57\u7b26\u4e32\u7c7b\u578b\u4f5c\u4e3a TextField \u7684\u7ed1\u5b9a\u7c7b\u578b\uff0c\u5728\u8c03\u7528\u4e0a\u4e5f\u6bd4\u65b9\u6848\u4e00\u7565\u663e\u590d\u6742\uff08\u53ef\u4ee5\u901a\u8fc7\u518d\u6b21\u5305\u88c5\u505a\u8fdb\u4e00\u6b65\u7b80\u5316\uff09\u3002<\/p>\n\n\n\n<p>\u4e3a\u4e86\u4fdd\u5b58\u4e00\u4e9b\u6682\u5b58\u6570\u636e\uff0c\u6211\u4eec\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u7b26\u5408 ObservableObejct \u7684\u7c7b\uff0c\u6765\u5bf9\u6570\u636e\u8fdb\u884c\u7edf\u4e00\u7ba1\u7406<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class NumberStore&lt;T: Numeric, F: ParseableFormatStyle>: ObservableObject where F.FormatOutput == String, F.FormatInput == T {\n    @Published var text: String\n    let type: ValidationType\n    let maxLength: Int\n    let allowNagative: Bool\n    private var backupText: String\n    var error: Bool = false\n    private let locale: Locale\n    let formatter: F\n\n    init(text: String = \"\",\n         type: ValidationType,\n         maxLength: Int = 18,\n         allowNagative: Bool = false,\n         formatter: F,\n         locale: Locale = .current)\n    {\n        self.text = text\n        self.type = type\n        self.allowNagative = allowNagative\n        self.formatter = formatter\n        self.locale = locale\n        backupText = text\n        self.maxLength = maxLength == .max ? .max - 1 : maxLength\n    }<\/pre>\n\n\n\n<p>formatter \u4f20\u9012\u7ed9<code>NumberStore<\/code>\uff0c\u5e76\u5728<code>getValue<\/code>\u4e2d\u8c03\u7528\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u8fd4\u56de\u9a8c\u8bc1\u540e\u7684\u6570\u5b57\n    func getValue() -> T? {\n        \/\/ \u7279\u6b8a\u5904\u7406\uff08\u65e0\u5185\u5bb9\u3001\u53ea\u6709\u8d1f\u53f7\u3001\u6d6e\u70b9\u6570\u9996\u5b57\u6bcd\u4e3a\u5c0f\u6570\u70b9\uff09\n        if text.isEmpty || text == minusCharacter || (type == .double &amp;&amp; text == decimalSeparator) {\n            backup()\n            return nil\n        }\n\n        \/\/ \u7528\u53bb\u9664\u7ec4\u5206\u9694\u7b26\u540e\u7684\u5b57\u7b26\u4e32\u5224\u65ad\u5b57\u7b26\u662f\u5426\u6709\u6548\n        let pureText = text.replacingOccurrences(of: groupingSeparator, with: \"\")\n        guard pureText.allSatisfy({ characters.contains($0) }) else {\n            restore()\n            return nil\n        }\n\n        \/\/ \u5904\u7406\u591a\u4e2a\u5c0f\u6570\u70b9\u60c5\u51b5\n        if type == .double {\n            if text.components(separatedBy: decimalSeparator).count > 2 {\n                restore()\n                return nil\n            }\n        }\n\n        \/\/ \u591a\u4e2a\u8d1f\u53f7\u60c5\u51b5\n        if minusCount > 1 {\n            restore()\n            return nil\n        }\n\n        \/\/ \u8d1f\u53f7\u5fc5\u987b\u4e3a\u9996\u5b57\u6bcd\n        if minusCount == 1, !text.hasPrefix(\"-\") {\n            restore()\n            return nil\n        }\n\n        \/\/ \u5224\u65ad\u957f\u5ea6\n        guard text.count &lt; maxLength + minusCount else {\n            restore()\n            return nil\n        }\n\n        \/\/ \u5c06\u6587\u5b57\u8f6c\u6362\u6210\u6570\u5b57\uff0c\u7136\u540e\u518d\u8f6c\u6362\u4e3a\u6587\u5b57\uff08\u4fdd\u8bc1\u6587\u5b57\u683c\u5f0f\u6b63\u786e\uff09\n        if let value = try? formatter.parseStrategy.parse(text) {\n            let hasDecimalCharacter = text.contains(decimalSeparator)\n            text = formatter.format(value)\n            \/\/ \u4fdd\u62a4\u6700\u540e\u7684\u5c0f\u6570\u70b9\uff08\u4e0d\u7279\u522b\u5904\u7406\u7684\u8bdd\uff0c\u8f6c\u6362\u56de\u6765\u7684\u6587\u5b57\u53ef\u80fd\u4e0d\u5305\u542b\u5c0f\u6570\u70b9\uff09\n            if hasDecimalCharacter, !text.contains(decimalSeparator) {\n                text.append(decimalSeparator)\n            }\n            backup()\n            return value\n        } else {\n            restore()\n            return nil\n        }\n    }<\/pre>\n\n\n\n<p>\u5728\u65b9\u6848\u4e8c\u4e2d\uff0c\u9664\u4e86\u9700\u8981\u5c4f\u853d\u65e0\u6548\u5b57\u7b26\u5916\uff0c\u6211\u4eec\u8fd8\u9700\u8981\u81ea\u5df1\u5904\u7406 Format \u7684\u5b9e\u73b0\u3002\u65b0\u7684 Formatter API \u5bf9\u5b57\u7b26\u4e32\u7684\u5bb9\u9519\u80fd\u529b\u975e\u5e38\u597d\uff0c\u56e0\u6b64\uff0c\u5c06\u6587\u672c\u5148\u901a\u8fc7 parseStrategy \u8f6c\u6362\u6210\u6570\u503c\uff0c\u7136\u540e\u518d\u8f6c\u6362\u6210\u6807\u51c6\u7684\u5b57\u7b26\u4e32\u5c06\u80fd\u591f\u4fdd\u8bc1 TextField \u4e2d\u7684\u6587\u5b57\u59cb\u7ec8\u4fdd\u6301\u6b63\u786e\u7684\u663e\u793a\u3002<\/p>\n\n\n\n<p>\u53e6\u5916\uff0c\u9700\u8981\u8003\u8651\u5230\u9996\u5b57\u7b26\u4e3a<code>-<\/code>\u4ee5\u53ca\u6700\u540e\u5b57\u7b26\u4e3a\u5c0f\u6570\u70b9\u7684\u60c5\u51b5\uff0c\u56e0\u4e3a parseStrategy \u4f1a\u5728\u8f6c\u6362\u540e\u4e22\u5931\u8fd9\u4e9b\u4fe1\u606f\uff0c\u6211\u4eec\u9700\u8981\u5728\u6700\u7ec8\u7684\u8f6c\u6362\u7ed3\u679c\u4e2d\u91cd\u73b0\u8fd9\u4e9b\u5b57\u7b26\u3002<\/p>\n\n\n\n<p>View \u6269\u5c55<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">extension View {\n    @ViewBuilder\n    func formatAndValidate&lt;T: Numeric, F: ParseableFormatStyle>(_ numberStore: NumberStore&lt;T, F>, errorCondition: @escaping (T) -> Bool) -> some View {\n        onChange(of: numberStore.text) { text in\n            if let value = numberStore.getValue(),!errorCondition(value) {\n                numberStore.error = false \/\/ \u901a\u8fc7 NumberStore \u8f6c\u5b58\u6821\u9a8c\u72b6\u6001\n            } else if text.isEmpty || text == numberStore.minusCharacter {\n                numberStore.error = false\n            } else { numberStore.error = true }\n        }\n        .foregroundColor(numberStore.error ? .red : .primary)\n        .disableAutocorrection(true)\n        .autocapitalization(.none)\n        .onSubmit { \/\/ \u5904\u7406\u53ea\u6709\u4e00\u4e2a\u5c0f\u6570\u70b9\u7684\u60c5\u51b5\n            if numberStore.text.count > 1 &amp;&amp; numberStore.text.suffix(1) == numberStore.decimalSeparator {\n                numberStore.text.removeLast()\n            }\n        }\n    }\n}\n<\/pre>\n\n\n\n<p>\u540c\u65b9\u6848\u4e00\u5c06\u5904\u7406\u903b\u8f91\u5206\u6563\u5230\u591a\u4e2a\u7684\u4ee3\u7801\u90e8\u5206\u4e0d\u540c\uff0c\u65b9\u6848\u4e8c\u4e2d\uff0c\u6240\u6709\u7684\u903b\u8f91\u90fd\u662f\u5728<code>onChange<\/code>\u4e2d\u6fc0\u53d1\u8c03\u7528\u7684\u3002<\/p>\n\n\n\n<p>\u7531\u4e8e<code>onChange<\/code>\u662f\u5728\u6587\u5b57\u53d1\u751f\u53d8\u5316\u540e\u624d\u4f1a\u8c03\u7528\uff0c\u56e0\u6b64\uff0c\u65b9\u6848\u4e8c\u4f1a\u5bfc\u81f4\u89c6\u56fe\u4e8c\u5ea6\u5237\u65b0\uff0c\u4e0d\u8fc7\u8003\u8651\u5230\u6587\u5b57\u5f55\u5165\u7684\u5e94\u7528\u573a\u666f\uff0c\u6027\u80fd\u635f\u5931\u53ef\u4ee5\u5ffd\u7565\uff08 \u5982\u4f7f\u7528\u5c5e\u6027\u5305\u88c5\u5668\u8fdb\u4e00\u6b65\u5bf9\u6570\u503c\u540c\u5b57\u7b26\u4e32\u8fdb\u884c\u94fe\u63a5\uff0c\u53ef\u80fd\u4f1a\u8fdb\u4e00\u6b65\u589e\u52a0\u89c6\u56fe\u7684\u5237\u65b0\u6b21\u6570\uff09\u3002<\/p>\n\n\n\n<p><strong>\u4e24\u79cd\u65b9\u6848\u7684\u6bd4\u8f83<\/strong><\/p>\n\n\n\n<ul><li>\u6548\u7387<\/li><\/ul>\n\n\n\n<p>\u7531\u4e8e\u65b9\u6848\u4e00\u5728\u6bcf\u6b21\u5f55\u5165\u65f6\u4ec5\u9700\u5237\u65b0\u4e00\u6b21\u89c6\u56fe\uff0c\u56e0\u6b64\u7406\u8bba\u4e0a\u5176\u6267\u884c\u6548\u7387\u8981\u9ad8\u4e8e\u65b9\u6848\u4e8c\uff0c\u4e0d\u8fc7\u5728\u5b9e\u9645\u4f7f\u7528\u4e2d\uff0c\u4e8c\u8005\u90fd\u53ef\u4ee5\u63d0\u4f9b\u6d41\u7545\u3001\u53ca\u65f6\u7684\u4ea4\u4e92\u6548\u679c\u3002<\/p>\n\n\n\n<ul><li>\u652f\u6301\u7684\u7c7b\u578b\u79cd\u7c7b<\/li><\/ul>\n\n\n\n<p>\u65b9\u6848\u4e00\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u591a\u79cd\u6570\u636e\u7c7b\u578b\uff0c\u65b9\u6848\u4e8c\u4e2d\u9700\u5728 TextField \u7684\u6784\u9020\u65b9\u6cd5\u4e2d\u5c06\u539f\u59cb\u6570\u503c\u8f6c\u6362\u6210\u5bf9\u5e94\u683c\u5f0f\u7684\u5b57\u7b26\u4e32\u3002\u65b9\u6848\u4e8c\u7684\u6f14\u793a\u4ee3\u7801\u4e2d\uff0c\u53ef\u4ee5\u901a\u8fc7<code>result<\/code>\u83b7\u53d6\u5b57\u7b26\u4e32\u5bf9\u5e94\u7684\u6570\u503c\u3002<\/p>\n\n\n\n<ul><li>\u53ef\u9009\u503c\u652f\u6301<\/li><\/ul>\n\n\n\n<p>\u65b9\u6848\u4e00\u91c7\u7528\u7684 TextField \u6784\u9020\u65b9\u6cd5\uff08\u652f\u6301 formatter\uff09\u5e76\u4e0d\u652f\u6301\u53ef\u9009\u503c\u7c7b\u578b\uff0c\u5fc5\u987b\u8981\u63d0\u4f9b\u521d\u59cb\u503c\u3002\u4e0d\u5229\u4e8e\u5224\u65ad\u7528\u6237\u662f\u5426\u5f55\u5165\u65b0\u7684\u4fe1\u606f\uff08\u66f4\u591a\u7684\u4fe1\u606f\u53ef\u53c2\u9605 <a href=\"https:\/\/www.fatbobman.com\/posts\/swiftui-input-form\/\">\u5982\u4f55\u5728 SwiftUI \u4e2d\u521b\u5efa\u4e00\u4e2a\u5b9e\u65f6\u54cd\u5e94\u7684 Form<\/a>\uff09\u3002<\/p>\n\n\n\n<p>\u65b9\u6848\u4e8c\u4e2d\u5141\u8bb8\u4e0d\u63d0\u4f9b\u521d\u59cb\u503c\uff0c\u652f\u6301\u53ef\u9009\u503c\u3002<\/p>\n\n\n\n<p>\u53e6\u5916\uff0c\u5728\u65b9\u6848\u4e00\u4e2d\u5982\u679c\u5c06\u6240\u6709\u7684\u5b57\u7b26\u90fd\u6e05\u7a7a\uff0c\u7ed1\u5b9a\u53d8\u91cf\u4ecd\u5c06\u6709\u6570\u503c\uff08\u539f API \u884c\u4e3a\uff09\uff0c\u5bb9\u6613\u9020\u6210\u7528\u6237\u5728\u5f55\u5165\u65f6\u7684\u56f0\u60d1\u3002<\/p>\n\n\n\n<ul><li>\u53ef\u6301\u7eed\u6027\uff08SwiftUI \u5411\u540e\u517c\u5bb9\u6027\uff09<\/li><\/ul>\n\n\n\n<p>\u65b9\u6848\u4e8c\u7531\u4e8e\u5b8c\u5168\u91c7\u7528 SwiftUI \u65b9\u5f0f\u7f16\u5199\uff0c\u56e0\u6b64\u5176\u53ef\u6301\u7eed\u6027\u4ece\u7406\u8bba\u4e0a\u5e94\u5f3a\u4e8e\u65b9\u6848\u4e00\u3002\u4e0d\u8fc7\u9664\u975e SwiftUI \u5bf9\u80cc\u540e\u7684\u5b9e\u73b0\u903b\u8f91\u8fdb\u884c\u4e86\u8f83\u5927\u4fee\u6539\uff0c\u5426\u5219\u65b9\u6848\u4e00\u5728\u6700\u8fd1\u51e0\u4e2a\u7248\u672c\u4e2d\u4ecd\u4f1a\u6b63\u5e38\u8fd0\u884c\uff0c\u800c\u4e14\u65b9\u6848\u4e00\u53ef\u4ee5\u652f\u6301\u66f4\u65e9\u7248\u672c\u7684 SwiftUI\u3002<\/p>\n\n\n\n<ul><li>\u5bf9\u5176\u4ed6\u4fee\u9970\u65b9\u6cd5\u7684\u517c\u5bb9\u6027<\/li><\/ul>\n\n\n\n<p>\u65e0\u8bba\u65b9\u6848\u4e00\u8fd8\u662f\u65b9\u6848\u4e8c\u90fd\u6ee1\u8db3\u4e86\u672c\u6587\u4e4b\u524d\u63d0\u51fa\u7684\u5bf9\u5b98\u65b9 API \u7684\u5b8c\u5168\u517c\u5bb9\uff0c\u5728\u6ca1\u6709\u635f\u5931\u7684\u60c5\u51b5\u4e0b\u83b7\u5f97\u4e86\u5176\u4ed6\u529f\u80fd\u7684\u63d0\u5347\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8f6c\u8f7d\uff1ahttps:\/\/www.fatbobman.com\/posts\/textfield-1\/ SwiftUI [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/5595"}],"collection":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5595"}],"version-history":[{"count":3,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/5595\/revisions"}],"predecessor-version":[{"id":5601,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/5595\/revisions\/5601"}],"wp:attachment":[{"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}