具有自定义标签位置的 Flutter 输入文本字段

Question

我想在 Flutter 中创建以下输入

TextFormField(
      decoration: InputDecoration(
        labelText: "Label",
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(getPt(4)),
          ),
        ),
      ),
    );

但是当使用默认行为时，标签会到达边框的顶部。为标签设置高度会破坏整个输入，因此输入文本会下降，所以这无济于事。

我想我可以把它放在堆栈上并将 Label 放在我需要的位置上，但它想成为输入的一部分，并且需要在所有字段上更改 watch 值，但也许还有其他选择？

Answer 1

您可以使用 Container、

包装它

Container(
    padding: EdgeInsets.symmetric(horizontal: 8),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.all(
        Radius.circular(10),
      ),
    ),
    child: TextFormField(
      decoration:
          InputDecoration(labelText: "Label", border: InputBorder.none),
    ),
  );

具有自定义标签位置的 Flutter 输入文本字段

Flutter input text field with custom label position

input

dart

flutter