How to create text field with label like Material UI using Swift UI?

Question

我正在使用 Swift UI 创建一个应用程序。我在 Figma 中收到一个布局，文本字段需要像 Material UI 一样，标签在边框上方。

边框需要做圆角处理。我试过用ZStack，但是我不知道怎么把Text像Material UI的标签一样

Answer 1

我决定使用ZStack方法，希望对你有帮助。

请注意，您必须调整符合您项目的浮点数：

struct MaterialTextFieldView: View {
    @State private var text = ""
    
    var body: some View {
        
        ZStack {
            TextField("Hello world", text: $text)
                .textFieldStyle(.roundedBorder)
                .frame(width: 200)
            
            Text("Required *")
                .font(.caption2)
                .offset(x: -55, y: -16)
        }
    }
}

结果看起来像你的原型。