html 浮动文本_swiftui中更简单的更好的浮动标签文本字段

html 浮动文本

There are certainly opinions and opinions about floating label text fields. This article is not about whether or when to use them. But if you do need to build some, it couldn’t be easier than with SwiftUI!

Ť这里有一定的意见和看法有关浮动标签的文本字段。 本文与是否或何时使用它们无关。 但是，如果您确实需要构建一些组件，那么它与SwiftUI一样简单！

Let’s start with the simplest possible approach: let’s vertically stack a caption text above a text field. We’ll use exactly the same adaptive color for the caption that SwiftUI (UIKit actually) uses for placeholders, UIColor.placeholderText (SwiftUI’s Color has a constructor that takes a UIColor, so we’re good to go).

让我们从最简单的方法开始：让我们在文本字段上方垂直堆叠标题文本。 我们将使用完全相同的自适应颜色为SwiftUI(实际上的UIKit)占位符的使用，标题UIColor.placeholderText (SwiftUI的Color有一个构造函数需要UIColor ，所以我们好去)。

Let’s take our fledgling FloatingTextField for a spin with this example code:

让我们用这个示例代码来试一下我们刚起步的FloatingTextField ：

This already starts to look nice, but there’s that duplicated placeholder text. We know that the TextField hides its placeholder as soon as its text is not empty, so let’s animate our little placeholder into place when that happens. We’ll initially give it a slight vertical offset so that it rises up as it appears, and set its initial opacity to zero. We’ll also add a default animation between the two states (text empty and non-empty).

这已经开始看起来不错，但是有重复的占位符文本。 我们知道，一旦文本字段不为空， TextField隐藏其占位符，因此，当发生这种情况时，让我们将小占位符设置为动画。 最初，我们将为它提供一个小的垂直偏移，以使其随其出现而上升，并将其初始不透明度设置为零。 我们还将在两个状态(文本为空和非空)之间添加默认动画。

Not too bad for such little code! But if you look closely, you’ll notice that the placeholder doesn’t actually animate. We just faded a new one in as the TextField’s built-in placeholder disappeared.

对于这么小的代码来说还不错！ 但是如果仔细观察，您会发现占位符实际上并没有动画。 当TextField的内置占位符消失时，我们刚刚淡入一个新的。

If we want a little more perfection, we’ll have to replace the default placeholder. We’ll pass an empty placeholder to the TextView and overlay our own with a ZStack. Then, we’ll scale it down into place.

如果我们想要更多的完善，我们将不得不替换默认的占位符。 我们将一个空的占位符传递给TextView并用ZStack覆盖我们自己的占位符。 然后，我们将其缩小到位。

Note that we added a little top padding to make place for the scaled-down placeholder. We also made the animation a little more playful with a spring.

请注意，我们添加了一些顶部填充以缩小比例的占位符。 我们还通过春天使动画更具趣味性。

You can even animate the color of the placeholder, like so:

您甚至可以为占位符的颜色设置动画，如下所示：

Have fun tweaking the animations to your taste and for your use-case! 🎉

有趣的是，可以根据自己的喜好和用例来调整动画！ 🎉

翻译自: https://medium.com/swlh/simpler-better-floating-label-textfields-in-swiftui-24f7d06da8b8

html 浮动文本