在 Material Design 设计语言中，TextInputLayout 是一种常用的输入框容器，它可以帮助我们实现输入框的美观和交互效果。然而，有时候在使用 TextInputLayout 的过程中，我们可能会遇到输入框出现下划线的问题，这个问题看起来很简单，但是实际上却需要一定的深度去探究。
问题现象
在使用 TextInputLayout 时，可能会出现输入框下方出现一条下划线的情况，如下图所示：
这条下划线看起来很不协调，而且也不符合 Material Design 的设计规范，因此我们需要找到解决方法。
问题原因
为什么 TextInputLayout 会出现下划线呢？这是因为 TextInputLayout 的默认样式中包含一个名为 "box" 的样式属性，它表示输入框的底部边框样式。当我们在代码中使用 TextInputLayout 时，如果没有指定样式属性，那么就会自动采用这个 "box" 样式，从而导致输入框底部出现了下划线。
解决方法
既然问题的本质是 TextInputLayout 默认样式中包含的一个属性，那么我们需要找到一种方法来去除这个属性。具体来说，我们可以通过修改 TextInputLayout 的样式属性，或者自定义 TextInputLayout 的样式，来解决问题。
修改 TextInputLayout 的样式属性
修改 TextInputLayout 的样式属性的方法很简单，只需要在代码中为 TextInputLayout 设置样式属性即可。具体来说，我们可以将 TextInputLayout 的 "box" 样式设置为 "none"，从而去除下划线。
示例代码如下：
------------------------------------------------------
---
--------------------------------------------------------------------
--------------------
----
--------------------------------------------------------
-----
--------------------------------------------------------上面的代码中，我们为 TextInputLayout 指定了一个名为 "Widget.MaterialComponents.TextInputLayout.OutlinedBox" 的样式，这个样式会覆盖默认的 "box" 样式；并且将 boxStrokeWidth 属性设置为 0dp，从而去除下划线。
自定义 TextInputLayout 的样式
在修改 TextInputLayout 的样式属性之外，我们还可以通过自定义样式的方式来解决问题。具体来说，我们可以创建一个新的样式文件，声明一个新的样式属性，然后在代码中为 TextInputLayout 指定这个新的样式即可。
示例代码如下：
------ ----------------------------
----- --------------------------------
----- ---------------------------------------
----- ------------------------------------
----- --------------------------------------------------------------------
--------
------ ----------------------------------- ------------------------------------
----- -----------------------------------
----- ------------------------------------------------------
--------上面的代码中，我们创建了一个名为 "NoBoxTextInputLayout" 的样式，并且在这个样式中修改了四个属性：boxStrokeWidth、boxStrokeWidthFocused、boxBackgroundMode 和 hintTextAppearance。这些属性的含义分别是去除底部边框，去除底部边框的焦点样式，去除底部背景，修改提示文本的样式。
然后，在代码中，我们可以像下面这样使用这个自定义样式：
------------------------------------------------------
---
------------------------------------
--------------------------------------------------------
-----
--------------------------------------------------------注意，上面的代码中，我们为 TextInputLayout 指定了样式属性 "@style/NoBoxTextInputLayout"，这个属性是我们新建的样式文件中定义的。
总结
在使用 TextInputLayout 组件时，如果遇到输入框出现下划线的问题，可以通过修改样式属性或自定义样式的方式来解决。这个问题看起来很小，但是实际上需要一定的深度去探究，并且有一定的学习和指导意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ef1273f6b2d6eab3914d1f