如何在 TextField (SwiftUI) 上添加底线 [英] How can I add a bottom line on TextField (SwiftUI)

问题描述

我使用 Rectangle() 在 TextField (SwiftUI) 上添加底部边框

但我想使用 protocol TextFieldStyle 作为像 RoundedBorderTextFieldStyle 这样的 TextField 样式的底线

如何在不使用矩形的情况下为 TextField 制作自定义样式?

struct ContentView : 查看 {@State private var username = "Text Hellow"var主体:一些视图{VStack() {文本字段($用户名).foregroundColor(颜色.黄色)长方形().frame(高度:1.0，对齐方式:.bottom).relativeWidth(1).foregroundColor(颜色.红色)}.填充()}功能编辑更改(){}}#if 调试struct ContentView_Previews : PreviewProvider {静态 var 预览:一些视图 {内容视图()}}#万一

解决方案

kontiki 的解决方案不适用于 Beta 6.所以我创建了一个解决方案，我在新视图中嵌入了一个 TextField 和一个绘制的底线.您可以复制代码并通过编写使用它 TextFieldWithBottomLine(placeholder: "My placeholder") 在它看起来像的视图中使用:

我首先创建的是一条水平线:

导入 SwiftUIstruct Horizo​​ntalLineShape:形状{func path(in rect: CGRect) ->小路 {让填充 = CGRect(x: 0, y: 0, 宽度: rect.size.width, height: rect.size.height)var 路径 = 路径()path.addRoundedRect(in:fill,cornerSize:CGSize(width:2,height:2))返回路径}}结构水平线:查看{私有变量颜色:颜色?= 零私有变量高度:CGFloat = 1.0初始化(颜色:颜色，高度:CGFloat = 1.0){self.color = 颜色self.height = 高度}var主体:一些视图{Horizo​​ntalLineShape().fill(self.color!).frame(minWidth: 0, maxWidth: .infinity, minHeight: height, maxHeight: height)}}struct Horizo​​ntalLine_Previews: PreviewProvider {静态 var 预览:一些视图 {水平线(颜色:.black)}}

接下来我创建一个包含 TextField 和下面的 Horizo​​ntalLine 的视图:

导入 SwiftUIstruct TextFieldWithBottomLine:查看{@State var text: String = ""私有变量占位符 = ""私人让 lineThickness = CGFloat(2.0)初始化(占位符:字符串){self.placeholder = 占位符}var主体:一些视图{虚拟堆栈{文本字段(占位符，文本:$text)水平线(颜色:.black)}.padding(.bottom, lineThickness)}}struct TextFieldWithBottomLine_Previews: PreviewProvider {静态 var 预览:一些视图 {TextFieldWithBottomLine(占位符:我的占位符")}}

为了查看它的实际效果，我创建了一个示例视图:

导入 SwiftUIstruct SampleView:查看{@State var text: String = ""@ObservedObject 变量模型:LoginModel在里面() {self.model = LoginModel()}初始化(模型:登录模型){self.model = 模型}var主体:一些视图{TextFieldWithBottomLine(placeholder: "My placeholder").padding(24)}func initialActions() {}func reactOnButtonClick() {}}struct SampleView_Previews:PreviewProvider {静态 var 预览:一些视图 {示例视图()}}

I use Rectangle() to adding a bottom border on TextField (SwiftUI)

But I want to use protocol TextFieldStyle for a bottom line on TextField Style like an RoundedBorderTextFieldStyle

How can I make a custom style for TextField without using Rectangle?

https://developer.apple.com/documentation/swiftui/staticmember

struct ContentView : View {
    @State private var username = "Text Hellow"
    var body: some View {
        VStack() {
            TextField($username)
                .foregroundColor(Color.yellow)
            Rectangle()
                .frame(height: 1.0, alignment: .bottom)
                .relativeWidth(1)
                .foregroundColor(Color.red)

        }
        .padding()
    }

    func editChanged() {

    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

解决方案

The solution of kontiki does not work with Beta 6, though. So I created a solution where I embed a TextField and a drawn bottom line in a new view. You can just copy the code and use it by writing TextFieldWithBottomLine(placeholder: "My placeholder") Used in a view it looks like:

The first thing I create is a horizontal line:

import SwiftUI

struct HorizontalLineShape: Shape {

    func path(in rect: CGRect) -> Path {

        let fill = CGRect(x: 0, y: 0, width: rect.size.width, height: rect.size.height)
        var path = Path()
        path.addRoundedRect(in: fill, cornerSize: CGSize(width: 2, height: 2))

        return path
    }
}

struct HorizontalLine: View {
    private var color: Color? = nil
    private var height: CGFloat = 1.0

    init(color: Color, height: CGFloat = 1.0) {
        self.color = color
        self.height = height
    }

    var body: some View {
        HorizontalLineShape().fill(self.color!).frame(minWidth: 0, maxWidth: .infinity, minHeight: height, maxHeight: height)
    }
}

struct HorizontalLine_Previews: PreviewProvider {
    static var previews: some View {
        HorizontalLine(color: .black)
    }
}

Next I create a view that contains a TextField and the HorizontalLine below:

import SwiftUI

struct TextFieldWithBottomLine: View {
    @State var text: String = ""
    private var placeholder = ""
    private let lineThickness = CGFloat(2.0)

    init(placeholder: String) {
        self.placeholder = placeholder
    }

    var body: some View {
        VStack {
         TextField(placeholder, text: $text)
            HorizontalLine(color: .black)
        }.padding(.bottom, lineThickness)
    }
}

struct TextFieldWithBottomLine_Previews: PreviewProvider {
    static var previews: some View {
        TextFieldWithBottomLine(placeholder: "My placeholder")
    }
}

To see it in action I created a sample view:

import SwiftUI

struct SampleView: View {
    @State var text: String = ""
    @ObservedObject var model: LoginModel

    init() {
        self.model = LoginModel()
    }

    init(model: LoginModel) {
        self.model = model
    }

    var body: some View {
        TextFieldWithBottomLine(placeholder: "My placeholder").padding(24)
    }

    func initialActions() {

    }

    func reactOnButtonClick() {

    }
}

struct SampleView_Previews: PreviewProvider {
    static var previews: some View {
        SampleView()
    }
}

这篇关于如何在 TextField (SwiftUI) 上添加底线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！