仅在启用 darkTheme 时将边框颜色应用于 TextField

Posted 2023-03-06

【中文标题】仅在启用 darkTheme 时将边框颜色应用于 TextField

【英文标题】：Applying borderSide color to TextField only when darkTheme is enabled

【发布时间】：2022-01-04 00:55:37

【问题描述】：

我想知道当启用darkTheme 时，是否有办法将特定颜色应用于TextField() 的enabledBorder。这是我的TextField()：

TextField(
  obscureText: true,
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Password',
  ),
),

但是，在我的深色主题中使用以下代码将为每个启用的Border 应用边框颜色，出于显而易见的原因，我想避免这种情况：

inputDecorationTheme: InputDecorationTheme(
  enabledBorder: OutlineInputBorder(
  borderSide: BorderSide(color: Colors.grey[700]!)
  )
),

我也确实不希望在使用常规主题时应用相同的颜色，所以我不能只将它应用到TextField()。我该怎么做才能解决这个问题？

【参考方案1】：

您可以在 TextField 中检查主题是否为 darkTheme 并相应地赋予边框颜色。 首先我们得到当前的主题数据。将以下代码放在 build 中：

ThemeData themeData = Theme.of(context);

现在我们可以检查 Brightness 的值以确定是否启用了深色主题。如果启用深色主题，则亮度的值将是浅色。所以你的 TextField 将是：

TextField(
  obscureText: true,
  decoration: InputDecoration(
    enabledBorder: Theme.of(context).brightness == Brightness.light ? OutlineInputBorder(
        borderSide: BorderSide(color: Colors.grey[700]!)
    ) : InputBorder.none,
    labelText: 'Password',
  ),
),

【讨论】：

themeData 以这种方式未定义，我可以使用其他东西吗？另外，这不会使边框在浅色模式下透明吗？

那你是如何定义你的主题的？

我有一个 theme.dart 文件，代码如下：ThemeData themeDark(BuildContext context) return ThemeData.dark().copyWith( primaryColor: blueColor, [...] ), );

我已经更新了我的答案，现在它不会在浅色主题上显示不可见的边框！

当然，没问题！

【参考方案2】：

Suvash 的回答启发了我下面的代码：

TextField(
  obscureText: true,
  decoration: Theme.of(context).scaffoldBackgroundColor == bgColorDark
  ? InputDecoration(
    enabledBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.grey[700]!)
    ),
    border: OutlineInputBorder(),
    labelText: 'Password',
  )
  : InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Password',
  ),
),

请注意，bgColorDark 是在我的深色主题中使用的深色背景色。我知道这会造成一些代码重复，但我认为这更容易阅读。