Flutter中如何将TextField聚焦时的光标颜色修改为黑色

需求说明 #

在Flutter开发中，需要将TextField组件获取焦点时默认的蓝色闪烁输入光标（即输入状态显示的"|"符号）修改为黑色，参考效果如下：

现有实现代码如下：

import 'package:flutter/material.dart';

class test extends StatefulWidget {
  const test({Key? key}) : super(key: key);

  @override
  State<test> createState() => _testState();
}

class _testState extends State<test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF6F6F6),
      body: Center(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: const [
             
              Center(
                child: SizedBox(
                  width: 350,
                  child: TextField(
                    decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                    ),
                    style: TextStyle(
                      fontSize: 20,
                      decoration: TextDecoration.none,
                      decorationStyle: TextDecorationStyle.dotted,
                      decorationColor: Color(0xffF6F6F6),
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      color: Color(0xff3B3B3B),
                    ),
                  ),
                ),
              ),
     
              Center(
                child: SizedBox(
                  width: 350,
                  child: TextField(
                    decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                    ),
                    style: TextStyle(
                      fontSize: 20,
                      decoration: TextDecoration.none,
                      decorationStyle: TextDecorationStyle.dotted,
                      decorationColor: Color(0xffF6F6F6),
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      color: Color(0xff3B3B3B),
                    ),
                  ),
                ),
              ),
             
            ],
          ),
        ),
      ),
    );
  }
}

实现方法 #

TextField原生提供了光标相关的配置属性，直接配置即可修改光标样式，有两种常用配置方式：

• 单组件单独配置
  直接在TextField上添加光标相关属性即可，不影响其他输入框：

  • cursorColor：设置光标填充颜色，传黑色色值即可
  • cursorWidth：可选，配置光标宽度，默认值为2.0
  • cursorRadius：可选，配置光标圆角，需要直角光标传Radius.zero即可

  配置示例（在原有TextField代码基础上新增属性即可，其余原有配置保持不变）：

  TextField(
    // 新增光标配置
    cursorColor: Colors.black,
    cursorWidth: 2.0,
    cursorRadius: Radius.zero,
    decoration: InputDecoration(
      // 原有下划线配置保持不变
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Color(0xffD7D7D7)),
      ),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Color(0xffD7D7D7)),
      ),
    ),
    style: TextStyle(
      // 原有文字样式配置保持不变
      fontSize: 20,
      decoration: TextDecoration.none,
      decorationStyle: TextDecorationStyle.dotted,
      decorationColor: Color(0xffF6F6F6),
      fontStyle: FontStyle.normal,
      fontWeight: FontWeight.normal,
      color: Color(0xff3B3B3B),
    ),
  )
  

• 全局统一配置
  如果项目中所有输入框都需要统一使用黑色光标，可以在MaterialApp的主题中做全局配置，无需每个TextField单独设置：

  MaterialApp(
    theme: ThemeData(
      textSelectionTheme: const TextSelectionThemeData(
        cursorColor: Colors.black, // 全局光标颜色
        selectionColor: Color(0x66000000), // 可选：文本选中时的背景色
        selectionHandleColor: Colors.black, // 可选：文本选择拖拽手柄颜色
      ),
      // 其余主题配置保持不变
    ),
    // 其余路由、页面配置保持不变
  )
  

配置完成后即可实现输入框获取焦点时，下划线保持原有灰色、闪烁光标为黑色的效果，和参考图一致。

内容的提问来源于stack exchange，提问作者pomoworko.com