Flutter - 文本字段中初始值和用户输入的不同颜色

Posted 2023-02-23

【中文标题】Flutter - 文本字段中初始值和用户输入的不同颜色

【英文标题】：Flutter - different colors for initial value and user input in textfield

【发布时间】：2020-12-03 23:03:29

【问题描述】：

基本上我要做的是为文本字段提供初始值（灰色），一旦用户单击文本字段，初始值就会自动清除，用户输入应该是黑色的。目前我的代码是这样的。

TextEditingController _controller;
FocusNode _focusNode;

  @override
  void initState() 
    super.initState();
    _controller = TextEditingController(text: 'Search');
    _focusNode = FocusNode()..addListener(_onFocus);
  

  @override
  void dispose() 
    _focusNode.dispose();
    _controller.dispose();
    super.dispose();
  

  void _onFocus() 
    if (_focusNode.hasFocus) _controller.clear();
  

  Widget _buildSearchBox() 
    return CupertinoTextField(
      controller: _controller,
      focusNode: _focusNode,
      style: TextStyle(
          fontSize: 17,
          color: _focusNode.hasFocus
              ? CupertinoColors.black
              : CupertinoColors.systemGrey,
      ),
      decoration: BoxDecoration(
        color: CupertinoColors.systemGrey6,
      ),
    );
  

我知道它不起作用，因为：(a) 每次用户键入内容、执行其他操作并再次单击文本字段时，他的输入都会被清除 (b) 我希望只有初始值是灰色的，但是一旦用户做了其他事情，他的输入也变成灰色。

谁能帮帮我？谢谢。

【问题讨论】：

你不能为此使用一个提示吗？您可以设置与输入文本不同的样式，这基本上就是您想要的。

【参考方案1】：

添加一个占位符字段，看你不能单独设置它的样式

它是一个浅色占位符提示，当文本条目为空时出现在文本字段的第一行。 默认为没有占位符文本。占位符文本的文本样式与文本字段的主文本条目的文本样式相匹配，除了较轻的字体粗细和灰色字体颜色。

CupertinoTextField(
  placeholder: "Enter Email",   //Add this and your work is done
  controller: _controller,
  focusNode: _focusNode,
  style: TextStyle(
      fontSize: 17,
      color: _focusNode.hasFocus
          ? CupertinoColors.black
          : CupertinoColors.systemGrey,
  ),
  decoration: BoxDecoration(
    color: CupertinoColors.systemGrey6,
  ),
);

【参考方案2】：

根据我从问题中了解到的情况，您可以这样做的一种方法是这样的

  FocusNode _focusNode;

  @override
  void initState() 
    super.initState();
    _focusNode = FocusNode()..addListener(_onFocus);
  

  void _onFocus() 
    setState(());
  

  Widget _buildSearchBox() 
    return CupertinoTextField(
      placeholder: "Search",
      focusNode: _focusNode,
      style: TextStyle(
        fontSize: 17,
        color: _focusNode.hasFocus
            ? CupertinoColors.black
            : CupertinoColors.systemGrey,
      ),
      decoration: BoxDecoration(
        color: CupertinoColors.systemGrey6,
      ),
    );
  

  @override
  void dispose() 
    _focusNode.dispose();
    super.dispose();