Flutter TextField LabelText 中心

Question

理想的效果是让 Kartennummer 和 Passwort 居中。
这怎么可能？

我为此使用了一个自定义类：

import 'package:flutter/material.dart';
import 'package:impex_shop/styles/impex_styles.dart';

class ImpexTextField extends StatefulWidget {
  final TextEditingController controller;
  final bool obscureText;
  final TextInputType keyboardType;
  final String labelText;
  final IconData prefixIcon;
  final int maxLines;
  final TextInputAction textInputAction;
  final void Function(String) onSubmitted;
  final bool autofocus;

  const ImpexTextField(
      {Key key,
      this.controller,
      this.obscureText,
      this.keyboardType,
      this.labelText,
      this.prefixIcon,
      this.maxLines = 1,
      this.textInputAction,
      this.onSubmitted,
      this.autofocus = false})
      : super(key: key);

  @override
  _ImpexTextFieldState createState() => _ImpexTextFieldState();
}

class _ImpexTextFieldState extends State<ImpexTextField> {
  FocusNode _focusNode = FocusNode();
  Paint paint;

  InputDecoration buildTextInputDecoration(
      String labelText, TextEditingController controller, IconData prefixIcon) {
    return InputDecoration(
      labelText: labelText,
      labelStyle: TextStyle(
        color: ImpexColors.mainColor,
        height: 0.8, // 0,1 - label will sit on top of border
        background: paint,
      ),
      fillColor: ImpexColors.lightGrey,
      filled: true,
      enabledBorder: OutlineInputBorder(
        borderSide: const BorderSide(
          color: ImpexColors.grey,
          width: 1.0,
        ),
      ),
      focusedBorder: OutlineInputBorder(
        borderSide: const BorderSide(
          color: ImpexColors.secondaryColor,
          width: 2.0,
        ),
      ),
      suffixIcon: InkWell(
        onTap: () => controller.clear(),
        child: Icon(Icons.cancel),
      ),
      prefixIcon: prefixIcon == null ? null : Icon(prefixIcon),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        children: <Widget>[
          Container(
            height: 12,
          ),
          TextField(
            textAlign: TextAlign.center,
            textAlignVertical: TextAlignVertical.center,
            focusNode: _focusNode,
            controller: widget.controller,
            obscureText: widget.obscureText ?? false,
            maxLines: widget.maxLines,
            textInputAction: widget.textInputAction,
            decoration: buildTextInputDecoration(
                widget.labelText, widget.controller, widget.prefixIcon),
            keyboardType: widget.keyboardType,
            autofocus: widget.autofocus,
            onSubmitted: widget.onSubmitted,
            onTap: () => setState(() {
              FocusScope.of(context).requestFocus(_focusNode);
            }),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }
}

Answer 1

这是一个不错的决定。
尝试使用alignLabelWithHint: true。
例如：

TextField(keyboardType: TextInputType.number, textAlign: TextAlign.center, maxLines: 1, decoration: InputDecoration(alignLabelWithHint: true, enabledBorder: InputBorder.none, contentPadding: EdgeInsets.zero, focusedBorder: InputBorder.none, border: InputBorder.none, labelStyle: Theme.of(context).textTheme.headline6, labelText: 'Amount (GPB)'.toUpperCase(),),),

Answer 2

将标签居中的非常方便的解决方案：

由于Label 在flutter 2.5.x 之后接受Widget，因此您可以将Text 小部件包装成 Center 这样的小部件，

TextFormField(
  decoration: InputDecoration(
    label: const Center(
      child: Text("Your Centered Label Text"),
    ),
  ),
)

Answer 3

我在标签方面遇到了类似的问题，正如 Ragu Swaminathan 所说，我的解决方案是创建我自己的自定义小部件，该小部件使用 Stack，底部带有 TextField，而 Text 小部件在其上方褪色。显然文本小部件不需要褪色，但我只是在模仿常规标签的样式。

class CenteredTextField extends StatelessWidget {
  final String label;
  final TextEditingController controller;

  CenteredTextField({
    @required this.label,
    this.controller,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        Padding(
          padding: EdgeInsets.only(top: 12.5),
          child: TextField(
            textAlign: TextAlign.center,
            controller: controller,
          ),
        ),
        Padding(
          padding: EdgeInsets.only(top: 4.0),
          child: Opacity(
            opacity: 0.7,
            child: Text(label),
          ),
        ),
      ],
    );
  }
}

Answer 4

屏幕截图中出现的标签文本对齐是由于存在前缀图标。标签文本将根据出现的前缀图标进行间距。

对你来说，下面的内容与上面的设计完全相同。

TextField(
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.card_giftcard),
        hintText: 'Hint Text',
        labelText:'Label',        
        border: const OutlineInputBorder(),
      ),
    )

如果对您有帮助，请尝试并告知。

编辑：我认为没有适当的方法来单独对齐标签文本。

Answer 5

您可以使用 contentPadding: E​​dgeInsets.only(left: ), 属性来移动标签文本

Answer 6

在我的情况下，我需要文本字段来显示一些信息并更新它们。所以基本上我对坚持 lab​​elText 并不严格。所以，我做了以下技巧来使文本居中。

您可以使用 Text 本身并使用 textAlign 属性将其居中，而不是使用标签文本。

    textAlign: TextAlign.center

通过使用控制器，您可以将文本分配给文本字段。此外，如果您需要类似标签文本的效果，您可以更新文本字段。 （但没有动画）

这是我的代码：

TextEditingController timeText = TextEditingController()..text = '12:24 AM'; ... 文本域（ 控制器：时间文本， 启用：假， 样式：TextStyle（字体大小：20）， 装饰：输入装饰（ 边框：InputBorder.none， hintText: '居中文本', alignLabelWithHint：真， ), textAlign: TextAlign.center, ),

输出

Answer 7

您可以通过使用TextField 的textAlign 属性并将其设置为TextALign.center 来实现。

检查下面的代码：

TextField(
  // use the text align property
  textAlign: TextAlign.center,
  decoration: InputDecoration(
    labelText: 'Yay, it works',
    hintText: 'Center the text',
  ),
),

输出：

Answer 8

嗯，它并不完美，但我通过在标签中使用Center() 实现了它。遗憾的是，它会删除部分上边框。

label: Center(child: Text('Label')),