验证器消息移动 TextFormField 的占位符

Question

我正在使用 flutter 创建登录页面。如果没有验证器错误，我的输入字段如下所示： InputImage

但是，如果验证器返回一条消息，该消息会像这样移动我的输入字段的图标和占位符：

输入图像2

我该如何解决？

我的输入小部件代码如下：

class InputFieldWidget extends StatelessWidget {
  final TextEditingController cnt;
  final String placeholder;
  final Widget? icon;
  final GlobalKey formKey;

  const InputFieldWidget(
      {required this.cnt, required this.placeholder, required this.icon, required this.formKey} );

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Palette.lightGrey,
      ),
      height: 50,
      margin: EdgeInsets.all(10),
      child: Form(
        key: formKey,
        child: TextFormField(
          validator: (value){
            if(value == null || value.isEmpty) {
              return "      $placeholder is not valid!";
            }
          },
          cursorColor: Palette.lightPurple,
          controller: cnt,
          decoration: InputDecoration(
              border: InputBorder.none,
              contentPadding: const EdgeInsets.symmetric(vertical: 15),
              prefixIcon: icon,
              hintText: placeholder,
              focusColor: Palette.lightPurple),
        ),
      ),
    );
  }
}

Answer 1

我定制了你的代码：

您不需要为您的 Ui 使用 Container。 TextFormField 给我们属性来实现像你的 Ui:}

在示例代码下方，它可以帮助您：

import 'package:flutter/material.dart';

class InputFieldWidget extends StatelessWidget {
final TextEditingController cnt;
final String placeholder;
final Widget? icon;
final GlobalKey? formKey;

 InputFieldWidget(
  {required this.cnt,
  required this.placeholder,
  required this.icon,
  this.formKey});

  @override
  Widget build(BuildContext context) {
  return Form(
  key: formKey,
  child: TextFormField(
    validator: (value) {
      if (value == null || value.isEmpty) {
        return "      $placeholder is not valid!";
      }
    },
    cursorColor: Colors.grey,
    controller: cnt,
    decoration: InputDecoration(
        border: InputBorder.none,
        fillColor: Palette.lightGrey, 
        filled: true,
        contentPadding: const EdgeInsets.symmetric(vertical: 15),
        prefixIcon: icon,
        hintText: placeholder,
        focusColor: Colors.grey),
  ),
);
  }
   }