Question

我创建了一个Statefullwidget，它在行内包含一个TextField和一个Icon。但是TextField内部的文本不是垂直居中。

这是StatefullWidget的代码。此小部件在StatelessWidget的列内使用。

class EditingFieldWidget extends StatefulWidget {
  final IconData iconData;
  bool obscureText;
  final String hintText;

  EditingFieldWidget({@required this.iconData, this.obscureText, @required this.hintText});

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

class _EditingFieldWidgetState extends State<EditingFieldWidget> {
  final textController = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  bool _isFocused = false;

  @override
  void initState() {
    _focusNode.addListener(() {
      setState(() {
        _isFocused = _focusNode.hasFocus;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return SizedBox(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16),
        decoration: BoxDecoration(
          color: AppColors.inputBackgroundColor,
          border: Border.all(color: Colors.white, width: 4),
          borderRadius: BorderRadius.circular(30),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.3),
              spreadRadius: 2,
              blurRadius: 2,
              offset: Offset(0, 0), // changes position of shadow
            ),
          ],
        ),
        child: IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: TextField(
                  obscureText: widget.obscureText,
                  focusNode: _focusNode,
                  controller: textController,
                  keyboardType: TextInputType.text,
                  style: theme.textTheme.subtitle2,
                  textAlignVertical: TextAlignVertical.center,
                  decoration: InputDecoration(
                    hintText: widget.hintText,
                    hintStyle: theme.textTheme.subtitle2,
                    border: InputBorder.none,
                  ),
                ),
              ),
              SizedBox(width: 8),
              Icon(
                widget.iconData,
                size: 16,
                color: _isFocused ? AppColors.primaryColor : AppColors.secondaryTextColor,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

theme.textTheme.subTitle2 = TextStyle（fontSize：10，color：AppColors.primaryTextColor，fontFamily：'poppins'）的值

这是我得到的输出

如何垂直放置文本。？

Answer 1

您可以在文本字段InputDecoration中添加参数contentPadding。

new TextField( textAlign: TextAlign.Center, decoration: new InputDecoration(hintText: "Enter Something", contentPadding: const EdgeInsets.all(20.0)) )

Answer 2

请尝试删除文本多余的textAlignVertical：TextAlignVertical.center，因为您已将crossAxisAlignment：CrossAxisAlignment.center应用于所有行元素，因此应将其居中对齐。

Answer 3

对代码进行以下更改后，请尝试一次：

删除“ IntrinsicHeight”小部件作为“行”小部件的父级。
还删除TextField小部件的'textAlignVertical'属性。

Answer 4

导致布局中的代码出现问题的原因是Innernsic Height Widget属性。请尝试以下应用中的代码：

 return MaterialApp(
    home: new Scaffold(
    resizeToAvoidBottomPadding: false,
    appBar: AppBar(
    title: Text('Registration'),
),
body:SizedBox(
  child: Container(
    margin: EdgeInsets.only(top:20.0),
    padding: EdgeInsets.symmetric(horizontal: 16),
    decoration: BoxDecoration(
      color: Colors.white,
      border: Border.all(color: Colors.white, width: 4),
      borderRadius: BorderRadius.circular(30),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.3),
          spreadRadius: 2,
          blurRadius: 2,
          offset: Offset(0, 0), // changes position of shadow
        ),
      ],
    ),

      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: TextField(
              obscureText: false,
              focusNode: _focusNode,
              controller: textController,
              keyboardType: TextInputType.text,
              style: theme.textTheme.subtitle2,
              decoration: InputDecoration(
                hintText: widget.hintText,
                hintStyle: theme.textTheme.subtitle2,
                border: InputBorder.none,
              ),
            ),
          ),
          SizedBox(width: 8),
          Icon(
            widget.iconData,
            size: 16,
            color: _isFocused ? Colors.black: Colors.black,
          ),
        ],

    ),
  ),
)));

Answer 5

我能够解决此问题。这与用于TextField的边框有关。

我修改了TextField的border属性，此问题现已解决。更新代码是

class _EditingFieldWidgetState extends State<EditingFieldWidget> {
  final textController = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  bool _isFocused = false;

  @override
  void initState() {
    _focusNode.addListener(() {
      setState(() {
        _isFocused = _focusNode.hasFocus;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Container(
      height: 48,
      decoration: BoxDecoration(
        color: AppColors.inputBackgroundColor,
        borderRadius: BorderRadius.circular(30),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            spreadRadius: 2,
            blurRadius: 2,
            offset: Offset(0, 0), // changes position of shadow
          ),
        ],
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Flexible(
            child: TextField(
              obscureText: widget.obscureText,
              focusNode: _focusNode,
              controller: textController,
              keyboardType: TextInputType.text,
              style: theme.textTheme.subtitle2,
              decoration: InputDecoration(
                suffixIcon: Icon(
                  widget.iconData,
                  size: 20,
                  color: _isFocused ? AppColors.primaryColor : AppColors.secondaryTextColor,
                ),
                contentPadding: EdgeInsets.only(left: 12),
                hintText: widget.hintText,
                hintStyle: theme.textTheme.subtitle2,
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide(color: Colors.white, width: 4),
                ),
                border: OutlineInputBorder(
                  borderSide: BorderSide.none
                ),
              ),
            ),
          ),
          /*SizedBox(width: 8),
          Icon(
            widget.iconData,
            size: 16,
            color: _isFocused ? AppColors.primaryColor : AppColors.secondaryTextColor,
          ),*/
        ],
      ),
    );
  }
}

颤振-TextField中的文本未垂直居中

5 个答案: