dart 如何将提示文本对齐到文本字段的中心?

t98cgbkg  于 2023-04-27  发布在  其他
关注(0)|答案(9)|浏览(154)

我试图添加对齐到文本字段内的提示文本。但它不起作用。如何使它的中心??如何在弯曲的形状写文本???

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

ryevplcw1#

在TextFormField或textfield中使用textAlign: TextAlign.center,
这里是代码

输出是这样的

hs1rzwqc

hs1rzwqc2#

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

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

编码愉快。

zqdjd7g9

zqdjd7g93#

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

dsf9zpds4#

***注意:***具体情况,但可能会帮助其他人谁尝试从这个线程的一切。

我有一个设计,我复制了所有的填充和对齐,但不知何故,我不能中心的提示文本,它总是几个像素接近顶部边缘。
唯一起作用的是发现在设计中有一个特定的文本高度设置。在我应用它之后,一切都完美地对齐了。

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

p3rjfoxz5#

您可以添加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',
                  ),
                ),
              ),
cgfeq70w

cgfeq70w6#

所有答案都适用于固定大小的文本字段,但在我的示例中,我使用的是一个动态大小的容器,它是文本字段的父级

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 parameter设置为true并设置这些参数:

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

最小和最大行必须设置为null以便扩展。这是我找到的唯一解决方案,因为在另一种方式中,我的提示文本获得额外的填充,即使我将内容填充设置为零,我的提示文本也没有在其他屏幕尺寸中居中。

dba5bblo

dba5bblo7#

您可以使用TextFormField的以下属性:

textAlign: TextAlign.center
koaltpgm

koaltpgm8#

这在以前是有效的,但现在不行了。

编辑现在按预期工作。

dnph8jn4

dnph8jn49#

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

hintText: '               this is centred text)',

相关问题