flutter - Flutter TextFormField 提示标签和光标位置？

Question

我想做这个：

但我只能创建这个：

不幸的是，提示标签上升到顶部边框。

这是我的代码：

TextFormField(
    cursorColor: Colors.black,
    decoration: customInputDecoration("Nickname")
),

// ...

InputDecoration customInputDecoration(String labelText) {
    return InputDecoration(
        labelText: labelText,
        labelStyle: TextStyle(color: Color.fromRGBO(69,202,255, 0.3)),
        fillColor: Colors.white,
        focusedBorder: _outlineInputBorder(30),
        enabledBorder: _outlineInputBorder(30),
        border: _outlineInputBorder(30),
        focusedErrorBorder: _outlineInputBorder(30),
        errorBorder: _outlineInputBorder(30),
    );
}

OutlineInputBorder _outlineInputBorder(double radius) {
    return OutlineInputBorder(
        borderRadius: BorderRadius.circular(radius),
        borderSide: BorderSide(
            width: 3,
            color: Color.fromRGBO(69,202,255, 0.3),
        ),
    );
}

标签： flutterdartflutter-layout

Answer 1

删除 textformfield 的默认边框。如果你不用容器包裹它并给它一个边框，你想要的情况就会消失。但是现在不可能使用 textformfield 属性来做到这一点。

  Container(
     margin: EdgeInsets.only(left: 20, right: 20, top: 50),
     padding: EdgeInsets.all(5),
     decoration: _outlineInputBorder(30),
     child: TextFormField(
        cursorColor: Colors.black,
        decoration: customInputDecoration("Nickname")),
  )

 InputDecoration customInputDecoration(String labelText) {
  return InputDecoration(
   labelText: labelText,
   labelStyle: TextStyle(color: Color.fromRGBO(69, 202, 255, 0.3)),
   fillColor: Colors.white,
   focusedBorder: InputBorder.none,
   enabledBorder: InputBorder.none,
   border: InputBorder.none,
   focusedErrorBorder: InputBorder.none,
   errorBorder: InputBorder.none,
   );
 }
 BoxDecoration _outlineInputBorder(double radius) {
   return BoxDecoration(
      border: Border.all(
      color: Color.fromRGBO(69, 202, 255, 0.3),
      style: BorderStyle.solid,
      width: 3.0,
    ),
    color: Colors.transparent,
    borderRadius: BorderRadius.circular(radius),
  );
}