如何将提示文本对齐到文本字段的中心？答案

【问题标题】：How to align Hint Text into centre in Text Filed?如何将提示文本对齐到文本字段的中心？
【发布时间】：2021-09-12 00:02:21
【问题描述】：

我正在尝试为 Text-field 内的提示文本添加对齐方式。但它不起作用。如何将其带到中心？如何写弯曲形状的文字？？？

 Container(
           child: new TextFormField(
                       controller: _pass,
                       textAlign: TextAlign.center, 
                       decoration: new InputDecoration.collapsed(
                                             hintText: " PASSWORD", ), )),

【问题讨论】：

到目前为止您尝试过什么？贴一些代码。
请编辑您的问题以添加代码，并删除评论。
请查看github.com/flutter/flutter/issues/9149
@PhilippReichart 我已经编辑了代码.. 有什么建议吗？
@ShyjuM 我已经试过了

标签： dart flutter

【解决方案1】：

在 TextFormField 或 textfield 中使用 textAlign: TextAlign.center,

这里是代码

这样的输出

【讨论】：

【解决方案2】：

我的问题是自动内容填充：

TextField(
     textAlign: TextAlign.center,
     decoration: InputDecoration(
     contentPadding: EdgeInsets.all(0),
     hintText: "hola mundo",
   ),
),

编码愉快。

【讨论】：

这对我有用

【解决方案3】：

textHint 将与输入文本具有相同的对齐方式。所以你可以试试下面的代码来实现你想要的：

TextFormField(
      keyboardType: TextInputType.number,
      maxLength: 5,
      textAlign: TextAlign.center,
      autofocus: true,
      initialValue: '',
      decoration: InputDecoration(
        hintText: 'some hint',
        counterText: "",
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
      ),
    );

【讨论】：

但是如果提示文本的字体大小与字段文本的大小不同，提示文本将不会垂直居中对齐，而是在中心线下方。

【解决方案4】：

注意：具体案例，但可能会帮助其他尝试过此线程中其他所有内容的人。

我有一个设计，我从中复制了所有的填充和对齐，但不知何故我无法将提示文本居中，它总是离顶部边缘更近几个像素。

唯一有效的是发现设计中设置了特定的文本高度。在我应用之后，一切都完美地对齐了。

InputDecoration(
  hintStyle: TextStyle(
    fontSize: _smallFontSize, // or whatever
    height: 1.4, //                                <----- this was the key
  ),
  // other properties...
);

【讨论】：

【解决方案5】：

您可以将 textAlign: TextAlign.center 添加到您的代码中这是我的代码及其作品：

new Padding(
                padding: new EdgeInsets.all(30.0),

                child:
                new TextField(
                  textAlign: TextAlign.center,

                  decoration: new InputDecoration(
                    border: new OutlineInputBorder(
                        borderSide: new BorderSide(color: Colors.teal)),
                    hintText: 'REF: 2',
                  ),
                ),
              ),

【讨论】：

【解决方案6】：

所有答案都适用于固定大小的文本字段，但在我的情况下，我使用的是一个动态大小的容器，它是我的文本字段的父级

AnimatedContainer(
      width: (!widget.scrollController.hasClients ||
              widget.scrollController.positions.length > 1)
          ? MediaQuery.of(context).size.width.toDouble()
          : max(
              MediaQuery.of(context).size.width -
                  widget.scrollController.offset.roundToDouble(),
              (MediaQuery.of(context).size.width - 80.w).toDouble()),
      duration: const Duration(milliseconds: 150),
      constraints: BoxConstraints(maxHeight: 40.h),
      margin: EdgeInsets.zero,
      child: TextField(
        controller: controller,
        expands: true,
        minLines: null,
        maxLines: null,
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
            filled: true,
            fillColor: MyAppColors.primaryColor1,
            border: UnderlineInputBorder(
                borderRadius: 
            BorderRadius.circular(15.w)),
            prefixIcon: Icon(
              Icons.search,
              size: 20.w,
              color: Theme.of(context).accentColor,
            ),
            hintText: 'Songs, albums or artists',
            contentPadding: EdgeInsets.zero,

            hintStyle: 
      
      
     Theme.of(context).textTheme.subtitle2!.copyWith(
                color: Colors.white.withOpacity(0.8),
                fontSize: 18.sp,
            )),
     
      ),
    );

对我有用的解决方案是我将 expand 参数设置为 true 并设置这些参数：

  minLines: null,
  maxLines: null,
  expands: true,
  textAlignVertical: TextAlignVertical.center

必须将 min 和 max 行设置为 null 才能展开。这是我找到的唯一解决方案，因为我的提示文本获得了额外的填充，即使我将内容填充设置为零我的提示文本不在其他屏幕尺寸中居中。

【讨论】：

【解决方案7】：

这以前可以工作，但现在不行了。您可以关注recently opened issue in flutter repo

编辑现在按预期工作。

【讨论】：

【解决方案8】：

textAlign: TextAlign.center 也会移动你的焦点，我用提示文本中的一些空格来修复它

 hintText: '               this is centred text)',

【讨论】：

这种方法只适用于非常特殊的情况，不可持续。如果文本字段缩小或增长，文本将不再居中，如果文本发生变化，也不能保证居中。
这可能因屏幕而异。不够通用
不能推荐这种方法。因为它取决于屏幕。