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

Question

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

我已经尝试过 InputDecoration 的 prefix 和 prefixText 选项，但是，前缀仅在 textField 处于焦点时可见。对于如何实现这一目标提供的任何帮助将不胜感激。

Answer 1

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

我们可以使用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

有一个bug 已用解决方案关闭：

暂时关闭，因为无法保持前缀文本可见 在所有具有浮动占位符的州，这是 这个小部件。

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

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 的提示。当它被聚焦时，prefixText 出现，提示消失。在 textField 中，考虑放置一个 ontap 方法，在其中设置状态，以便提示消失并显示前缀。因为在某些情况下，当文本字段被点击时，系统仍然无法理解它是否具有焦点，除非实际输入了某些内容。

Answer 5

如果在 TextField 控制器中定义一个初始值也可以解决这个问题。 由于 TextField 将拥有内容，导致出现前缀。

像这样：

TextEditingController currencyField = TextEditingController(text: '0,00');

TextFormField(
  autofocus: false,
  controller: currencyField,
  decoration: InputDecoration(
    border: UnderlineInputBorder(),
    hintText: '0,00',
    prefixText: '\$ ',
    labelText: 'Price',
    floatingLabelBehavior: FloatingLabelBehavior.always,
  ),
  textInputAction: TextInputAction.next,
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
    CurrencyFormatter(), // My currency formatter
  ],
  enableSuggestions: true,
  enableInteractiveSelection: true,
  toolbarOptions: ToolbarOptions(
    copy: true,
    cut: true,
    paste: true,
    selectAll: true,
  ),
);

Answer 6

对我来说解决这个问题的方法是（用作文本字段前缀图标）

return Align(
        alignment: Alignment.centerLeft,
        child: Text(
          '${m4eWalletProvider.wallet.walletInfo.currency.toString()} ',
          style: Theme.of(context)
              .textTheme
              .headline
              .copyWith(fontWeight: FontWeight.bold),
        ),
      );

Answer 7

prefixIcon 解决方法对我不起作用，因为我的输入是多行的。到达两行后，图标居中，而不是像真正的前缀文本那样与第一行保持对齐。

因此，我发现了CrossAxisAlignment.textBaseline，它允许使用 Row 简单地附加前缀小部件，如下所示：

Row(
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: [Text("prefix: "), inputWidget]
)