自定义文本字段颤动实现

Question

如何让输入的文字不超过容器上的边框，当我要输入输入提示文字时，超出了容器的边框我的代码是这样的

Column(
      children: [
        Container(
          height: 35.0,
          margin: const EdgeInsets.symmetric(horizontal: 16.0),
          decoration: BoxDecoration(
            color: Colors.white30,
            borderRadius: BorderRadius.circular(4),
            border: Border.all(color: Colors.green, width: 1),
          ),
          child: TextFormField(
            textInputAction: TextInputAction.next,
            keyboardType: TextInputType.emailAddress,
            decoration: const InputDecoration(
              contentPadding: EdgeInsets.only(left: 10.0),
              labelText: "Email atau nama pengguna",
              labelStyle: TextStyle(
                fontSize: 12,
              ),
              floatingLabelBehavior: FloatingLabelBehavior.never,
              hintText: "example@mail.com atau example12",
              hintStyle: TextStyle(
                fontSize: 12,
                color: Colors.grey,
              ),
              enabledBorder: InputBorder.none,
              focusedBorder: InputBorder.none,
            ),
          ),
        ),
],
);

Answer 1

用这个 Container 替换你的 Container。

Container(
      height: 40.0,
      margin: const EdgeInsets.symmetric(horizontal: 16.0),
      // decoration: BoxDecoration(
      //   // color: Colors.white30,
      //   borderRadius: BorderRadius.circular(4),
      //   border: Border.all(color: Colors.green, width: 1),
      // ),
      child: TextFormField(
        textInputAction: TextInputAction.next,
        keyboardType: TextInputType.emailAddress,
        maxLines: 1,
        decoration: InputDecoration(
          contentPadding:
              EdgeInsets.only(left: 15, bottom: 0, top: 0, right: 15),
          labelText: "Email atau nama pengguna",
          labelStyle: TextStyle(
            fontSize: 12,
          ),
          floatingLabelBehavior: FloatingLabelBehavior.never,
          hintText: "example@mail.com atau example12",
          hintStyle: TextStyle(
            fontSize: 12,
            color: Colors.grey,
          ),
          errorBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.green),
            borderRadius: BorderRadius.circular(5),
          ),
          focusedErrorBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.green),
            borderRadius: BorderRadius.circular(5),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.green, width: 1.8),
            borderRadius: BorderRadius.circular(5),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.green, width: 1.8),
            borderRadius: BorderRadius.circular(5),
          ),
        ),
      ),
    ),

Answer 2

注释 contentPadding 行。

// contentPadding: EdgeInsets.only(left: 10.0),

Answer 3

我认为您正在尝试使用 Container Border 为 TextField 提供边框。尝试删除容器并使用 InputDecoration 的边框参数。

你的代码可以像下面这样

Column(
    children: [
      Container(
        margin: const EdgeInsets.symmetric(horizontal: 16.0),
        child: TextFormField(
          textInputAction: TextInputAction.next,
          keyboardType: TextInputType.emailAddress,
          decoration: const InputDecoration(
            contentPadding: EdgeInsets.only(left: 10.0),
            labelText: "Email atau nama pengguna",
            labelStyle: TextStyle(
              fontSize: 12,
            ),
            floatingLabelBehavior: FloatingLabelBehavior.never,
            hintText: "example@mail.com atau example12",
            hintStyle: TextStyle(
              fontSize: 12,
              color: Colors.grey,
            ),
            border: const OutlineInputBorder(),
          ),
        ),
      ),
    ],
  );

自定义文本字段颤动实现

custom textfield flutter implementations

textfield

dart

flutter