如何在文本归档中将提示文本对齐到中心?

时间:2018-04-09 11:30:54

标签: dart flutter

我正在尝试将对齐添加到Text-field中的提示文本。但它无法正常工作。如何把它带到中心? 如何写出弯曲的文字???

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

7 个答案:

答案 0 :(得分:13)

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

这是代码

enter image description here

这样的输出

enter image description here

答案 1 :(得分:3)

您可以在代码中添加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',
                  ),
                ),
              ),

答案 2 :(得分:3)

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

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

快乐的编码。

答案 3 :(得分:2)

文本提示将具有与输入文本相同的对齐方式。因此,您可以尝试以下代码来实现所需的功能:

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 :(得分:2)

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

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

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

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

答案 5 :(得分:0)

这曾经比较早,但现在还没有。您可以关注recently opened issue in flutter repo

修改 现在按预期工作。

答案 6 :(得分:-6)

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

foreach($user->posts as $post)
        <div class="profile-content">
            <section class="post-heading">
                <div class="rows">
                    <div class="col-md-11">

                        <div class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object photo-profile" src="https://scontent.fgyd4-2.fna.fbcdn.net/v/t1.0-9/p960x960/73248174_2597397730318615_6397819353256951808_o.jpg?_nc_cat=109&_nc_sid=7aed08&_nc_ohc=VxH_cAqJ778AX_7B97W&_nc_ht=scontent.fgyd4-2.fna&_nc_tp=6&oh=e5b02c7f91818664cf253e71f2ddf106&oe=5F5F4E74" width="40" height="40" alt="...">
                                </a>
                            </div>
                            <div class="media-body">
                                <a href="/users" class="anchor-username"><h4 class="media-heading">{{$user->name}} </h4></a>
                                <a href="#" class="anchor-time">{{$post->created_at}}</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                    </div>
                </div>

            </section>


            <section class="post-body">

                <p>{{  $post->post_description  }}</p> <!--  i stick around here -->
            </section>
@endforeach