在未聚焦且不为空时更改颤振中 TextField 的标签颜色

Question

在材质 3 之后，默认的 TextField 边框和标签颜色（聚焦时）更改为灰色。所以我需要如下设置我的 ThemeData。如果文本字段为空，则其中会有浅灰色的提示，这是所需的行为。当我聚焦文本字段时，文本字段顶部的标签现在为红色。当我松开焦点并且标签文本的颜色保持红色，而边框颜色为浅灰色时，问题就出现了。

我想要的行为是标签颜色变成浅灰色，而不是红色。我知道我可以以编程方式完成此操作，但我的应用程序上有几个文本字段，使其不切实际。让我们注意，在材质 2 上，只需设置原色即可达到预期效果。

      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.red,
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
          ),
        ),
        inputDecorationTheme: InputDecorationTheme(
          floatingLabelStyle: TextStyle(color: Colors.red),
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide()),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
            borderSide: BorderSide(color: Colors.red, width: 2),
          ),
        ),
        textSelectionTheme: TextSelectionThemeData(cursorColor: Colors.red),
      ),

Answer 1

您可以使用

FocusScope

&&

Focus

小部件来处理此问题。

主要小部件：

class ChangeFocuseColorWidget extends StatefulWidget {
  const ChangeFocuseColorWidget({super.key});

  @override
  State<ChangeFocuseColorWidget> createState() =>
      _ChangeFocuseColorWidgetState();
}

class _ChangeFocuseColorWidgetState extends State<ChangeFocuseColorWidget> {
  late final TextEditingController _firstController;
  late final TextEditingController _secondController;
  @override
  void initState() {
    _firstController = TextEditingController();
    _secondController = TextEditingController();
    super.initState();
  }

 @override
  void dispose() {
    _firstController.dispose();
    _secondController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Focuse Color"),
      ),
      body: Column(
        children: <Widget>[
          const Icon(
            Icons.lock,
            size: 100,
          ),
          SizedBox(
            height: context.screenHeight * .07,
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  FocuseTestWidget(
                    controller: _firstController,
                    title: "Username",
                    lable: "Your Name",
                  ),
                  SizedBox(
                    height: context.screenHeight * .05,
                  ),
                  FocuseTestWidget(
                    controller: _secondController,
                    title: "Email",
                    lable: "Your Email",
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

可重复使用的

TextFeild

小部件

class FocuseTestWidget extends StatefulWidget {
  const FocuseTestWidget({
    super.key,
    required this.controller,
    required this.title,
    required this.lable,
  });
  final TextEditingController controller;
  final String title;
  final String lable;

  @override
  State<FocuseTestWidget> createState() => _FocuseTestWidgetState();
}

class _FocuseTestWidgetState extends State<FocuseTestWidget> {
  Color? lableColor = Colors.grey;

  void _changeLableColor({required bool isFocus}) {
    if (isFocus) {
      setState(() {
        lableColor = Colors.orange;
      });
    } else {
      setState(() {
        lableColor = Colors.grey;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 10.0,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Text(
                widget.title,
                style: const TextStyle(
                  fontSize: 17,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
        const SizedBox(
          height: 20,
        ),
        FocusScope(
          child: Focus(
            onFocusChange: (bool isFocus) {
              _changeLableColor(isFocus: isFocus);
            },
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 10.0,
              ),
              child: TextField(
                controller: widget.controller,
                keyboardType: TextInputType.text,
                decoration: AppStyle.customInputDecoration(
                  lable: widget.lable,
                  lableColor: lableColor!,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

您可以直接在

InputDecoration()

中使用

TextFeild

或像这样将其分开，以便您可以重复使用它（这样更好）

class AppStyle {
  static InputDecoration customInputDecoration({
    required String lable,
    required Color lableColor,
  }) {
    return InputDecoration(
      filled: true,
      fillColor: const Color(0xFFEFECEC),
      label: Text(
        lable,
        style: TextStyle(
          color: lableColor,
        ),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(
          color: Colors.orange,
          width: 1,
        ),
      ),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(
          color: Colors.transparent,
          width: 0,
        ),
      ),
    );
  }
}

希望对你有帮助！！