Flutter TextField标签文本中心 [英] Flutter TextField LabelText Center

问题描述

期望的效果是使Kartennummer和Passwort集中.
这怎么可能?

The Desired Effect is to have Kartennummer and Passwort centrated.
How is this possible?

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

I use a custom class for this:

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();
  }
}

推荐答案

就我而言，我需要文本字段来显示一些信息并进行更新.因此，基本上，我对粘贴labelText并不严格.因此，我做了以下技巧来使文本居中.

In My case, I need the text field to show some information and update them. So basically I am not strict about sticking with the labelText. So, I done the following trick to center the text.

代替使用标签文本，您可以使用Text本身，并使用textAlign属性将其居中.

Instead of using a label text you can use the Text itself and center it with textAlign property.

    textAlign: TextAlign.center

通过使用控制器，您可以将文本分配给文本字段.另外，如果您需要类似labeltext的效果，则可以更新文本字段.(但没有动画)

By using the controller, you can assign a text to the text field. Also, you can update the textfield if you need a labeltext like effect. (but no animation)

这是我的代码:

    TextEditingController timeText = TextEditingController()..text = '12:24 AM';

    ...

    TextField(
    controller: timeText,
    enabled: false,
    style: TextStyle(fontSize: 20),
    decoration: InputDecoration(
    border: InputBorder.none,
    hintText: 'Center the text',
    alignLabelWithHint: true,
    ),
    textAlign: TextAlign.center,
    ),

输出

这篇关于Flutter TextField标签文本中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！