带有 Material Outline Box 的 boxStroke 不起作用答案

【问题标题】：boxStroke with Material Outline Box doesn´t work带有 Material Outline Box 的 boxStroke 不起作用
【发布时间】：2020-10-29 17:20:04
【问题描述】：

我正在尝试使用 Material Design 为 Android 设计一个非常简单的 UI。

登录界面的概念是 2 个轮廓框，一个用于电子邮件，一个用于密码。密码框应该包含一个尾随图标，如果您按下该图标，它应该会显示您的密码。这里没有代码问题，一切都应该由 Material.io 实现

所以我面临的问题是关于 boxStroke。

当您运行应用程序时，您可以清楚地看到 boxStroke（但在密码 textBox 上，尾随图标使轮廓消失）。

一旦您聚焦其中一个文本框，它就会如下所示：

你可以注意到盒子的轮廓已经完全消失了。如果您添加至少一个字符，它将返回：

两个文本框的代码都在这里，与 Material.io 的主页几乎相同，我将在本文末尾发布材料 wiki 的链接：

电子邮件文本框：

    <com.google.android.material.textfield.TextInputLayout
    android:id="@+id/login_email_layout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/login_hint_email"
    app:boxStrokeWidthFocused="3dp"
    app:errorEnabled="true"
    app:layout_constraintBottom_toTopOf="@+id/login_password_layout"
    app:layout_constraintEnd_toEndOf="@+id/imageView"
    app:layout_constraintStart_toStartOf="@+id/imageView"
    app:layout_constraintTop_toBottomOf="@+id/imageView"
    app:shapeAppearanceOverlay="@style/ShapeAppearance.MaterialComponents.SmallComponent">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/textColor" />

      </com.google.android.material.textfield.TextInputLayout>

密码文本框：

    <com.google.android.material.textfield.TextInputLayout
    android:id="@+id/login_password_layout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/login_hint_password"
    app:endIconMode="password_toggle"
    app:errorEnabled="true"
    app:layout_constraintBottom_toTopOf="@+id/login_forgot_password"
    app:layout_constraintEnd_toEndOf="@+id/login_email_layout"
    app:layout_constraintStart_toStartOf="@+id/login_email_layout"
    app:layout_constraintTop_toBottomOf="@+id/login_email_layout">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:textColor="@color/textColor"
        android:visibility="visible" />

</com.google.android.material.textfield.TextInputLayout>

我不知道为什么尾随图标使轮廓消失，我也不知道即使是空的，它也应该聚焦轮廓。所以欢迎任何帮助。

提前致谢。

PD：目前使用1.2.1材质版本，尝试切换到1.3.1-alpha03版本，但文本框不显示任何内容。

Material Outlined Box

编辑： 添加 graddle:app 以防它可以为您提供更多信息：

dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.2'
implementation platform('com.google.firebase:firebase-bom:25.12.0')
implementation 'com.google.firebase:firebase-analytics'
implementation 'com.google.android.material:material:1.2.1'
implementation 'com.google.gms:google-services:4.3.4'
implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.19'
implementation 'com.google.android.gms:play-services-auth:18.1.0'
implementation "androidx.navigation:navigation-fragment:2.3.1"
implementation "androidx.navigation:navigation-ui:2.3.1"
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}

【问题讨论】：

我无法重现该错误。尝试使用测试版，它对我有用： implementation 'com.google.android.material:material:1.0.0-beta01'
谢谢，但也不起作用，如果我切换到那个版本，它甚至不会创建引发错误的 textFields。

标签： android material-design material-components-android outline

【解决方案1】：

刚刚找到答案：

几天后我又回到了这个问题（这只是一个审美问题，所以我继续编写其他东西，比如神圣的 Firebase 东西）。

所以问题出在

styles.xml

我声明并初始化了@color/background。 textEdit 的 Material Design API 使用这种颜色作为轮廓。

所以解决方案是简单地删除@color/background。我可以在 xml 文件上设置 android:background=@null，但必须在每个使用 textEdit 的 xml 文件上进行设置。

希望这可以帮助某人，并为自己如此愚蠢而感到抱歉。

【讨论】：