有没有办法创建一个带有在颤振中始终可见的前缀的文本字段

Question

我想创建一个带有始终可见前缀的文本字段。我正在创建一个类似于用于 WhatsApp 电话号码输入的电话字段。我想将国家代码作为持久前缀。

我已经尝试了 InputDecoration 的 prefix 和 prefixText 选项，但是，前缀仅在 textField 处于焦点时才可见。任何有关如何实现这一目标的帮助都将受到高度赞赏。

Answer 1

更新：我们现在可以覆盖prefixIcon和suffixIconwith 的最小填充prefixIconConstraints。

我们可以使用prefixIcon代替prefixText. 由于prefixIcon接受任何小部件，我们可以使用prefixIcon: Text("$").

下面是一个例子：

InputDecoration(
   isDense: true,
   prefixIcon:Text("\$"),
   prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),
),

Answer 2

当我必须始终显示前缀时，这是一个完美的解决方案

prefixIcon: Padding(padding: EdgeInsets.all(15), child: Text('+91 ')),

Answer 3

有一个已通过解决方案关闭的错误：

暂时关闭，因为无法使用浮动占位符在所有状态下保持前缀文本可见，这是此小部件的主要用途。

还有一些对我有用的解决方法：

TextStyle _decorationStyleOf(BuildContext context) {
  final theme = Theme.of(context);
  return theme.textTheme.subhead
      .copyWith(color: theme.hintColor);
}

Stack(
  alignment: Alignment.centerLeft,
  children: <Widget>[
    Builder(
      builder: (context) {
        return Text(
          'prefix',
          style: _decorationStyleOf(context),
        );
      }
    ),
    TextField(
      decoration: InputDecoration(
        prefixText: 'prefix',
        prefixStyle: TextStyle(color: Colors.transparent),
      ),
    ),
  ],
)

Answer 4

FocusNode focusNode = FocusNode();


@override
  void dispose() {

    focusNode.dispose();

    super.dispose();
  }

内部构建写入

hintText = prefix;


focusNode.addListener(() {
  if (focusNode.hasFocus) {

    setState(() {
      hintText = '';
      hasHint = false;
    });

  }
  else {

    setState(() {
      hintText = prefix;
      hasHint = true;
    });

  }

});

在 InputDecoration 中，执行以下操作：

 InputDecoration(

      border: InputBorder.none,
      errorMaxLines: 1,          
      prefixText: hasHint ? '' : prefix,
      prefixStyle: TextStyle(
          color: Colors.black54
      ),
      hasFloatingPlaceholder: true,
      hintText: hasHint ? prefix : '',
      hintStyle: TextStyle(
          fontSize: 15.0,
          color: Colors.black54
      ),
    ),

其中前缀变量是您想要的前缀。如果这个答案解决了您的问题，请投票。dubace 的回答只是让我的 prefixText 变得完全透明。

当 textField 没有获得焦点时，这会添加一个提示来代替 prefixText。当它获得焦点时，前缀文本会显示，提示会消失。在 textField 内，考虑放置一个 ontap 方法，在其中设置状态，以便提示消失并显示前缀。因为在某些情况下，当点击文本字段时，系统仍然不知道它具有焦点，除非实际输入了某些内容。