如何在 Flutter 中为禁用的文本表单字段的标签设置主题颜色？

Question

我想在我的 Flutter 应用程序中禁用文本字段的标签上应用一个主题，因为我现在的灰色很难阅读。

我想将其应用到我的整个应用程序，所以我想使用主题，但是，我没有找到任何解决方案可以让我自定义标签的文本样式仅当文本表单字段被禁用时

如何在 Flutter 中主题化并全局设置禁用文本表单字段标签的颜色？

我知道如何有条件地更改标签的文本样式，但是，我需要记住始终使用相同的样式（或者我可以包装小部件，但这听起来也不是最理想的）。我可以通过

decoration

命名参数自定义标签的颜色，如下所示：

TextFormField(
  enabled: isEnabled,
  decoration: InputDecoration(
    labelText: 'Value',
    labelStyle: TextStyle(color: isEnabled ? Colors.green : Colors.red),
  ),
  // .... other fields, like controller might come here
),

Answer 1

您可以使用 Theme 来环绕您的小部件，设置属性 disabledColor。

示例：演示

final customText = Theme(
  data: ThemeData(
    disabledColor: Colors.blue,
  ),
  child: TextFormField(
    enabled: false,
    decoration: const InputDecoration(
        icon: Icon(Icons.person),
        hintText: 'What do people call you?',
        labelText: 'Name *',
    ),
  ),
);

或全球

Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      disabledColor: Colors.blue,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

Answer 2

您可以使用 InputDecorationTheme .

MaterialApp 有一个属性

theme

，您可以在其中设置自定义 ThemeData。

ThemeData 有一个属性

inputDecorationTheme

，您可以在其中设置 InputDecorationTheme 。

InputDecorationTheme 有很多属性，您可以使用它们来自定义文本字段。

 MaterialApp(
        theme: ThemeData(
          inputDecorationTheme: InputDecorationTheme(
            border: OutlineInputBorder(),
            contentPadding: EdgeInsets.symmetric(
              vertical: 22,
              horizontal: 26,
            ),
            labelStyle: TextStyle(
              fontSize: 35,
              decorationColor: Colors.red,
            ),
        ),
)
          

Answer 3

要为

InputDecoration

中禁用的字段定义另一种标签颜色，您可以使用

MaterialStateTextStyle.resolveWith

labelStyle: MaterialStateTextStyle.resolveWith(
  (Set<MaterialState> states) {
    if (states.contains(MaterialState.disabled)) {
      return const TextStyle(
        color: Colors.grey,
      );
    } else {
      return TextStyle(
        color: Colors.blue,
      );
    }
  },
),

Answer 4

这对我有用：

style: bodyText().copyWith(color: Colors.black), //bodyText() 在我的情况下在其他地方定义

无论 TextFormField 启用还是禁用，它都会强制文本颜色为黑色