Question

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

我已经尝试了InputDecoration的prefix和prefixText选项，但是，仅当textField处于焦点时，前缀才可见。我们将非常感谢您提供有关如何实现此目标的任何帮助。

Answer 1

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

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

Answer 2

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

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

这里是一个例子：

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

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
      ),
    ),

其中prefix变量是您想作为前缀的任何内容。如果可以解决您的问题，请对此答案投票。 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

为我解决此问题的方法（用作文本字段prefixIcon）

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

有没有一种方法来创建带有在flutter中始终可见的前缀的文本字段

6 个答案: