Flutter

Question

我正在尝试在 Flutter 中自定义一个 TextFormField。我想设置此小部件的样式以实现此外观：

我可以通过以下代码在字段聚焦时获得此样式：

TextFormField(
  decoration: InputDecoration(
  enabled: true,
  border: OutlineInputBorder(),
  labelText: 'Name:',
),

我希望这种风格始终高于一切，即使该领域没有重点。

我尝试了其他替代方案，但我可以得到我需要的东西。我试过这段代码：

Container(
  child: Text(
    "Name", style: TextStyle(
      fontSize: 18, 
      backgroundColor: Colors.amber, 
      height: 0.5)
    ),
),

    TextField(
      decoration: InputDecoration(
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(width: 3, color: Colors.blue)
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(width: 3, color: Colors.blue)
        )
      ),
    )

我把它放在 Stack Widget 中。但结果是：

有什么办法可以解决吗？

Answer 1

只需将 floatingLabelBehavior: FloatingLabelBehavior.always 添加到您的装饰中即可。

TextFormField(
  decoration: InputDecoration(
    enabled: true,
    border: OutlineInputBorder(),
    labelText: 'Name:',
    floatingLabelBehavior: FloatingLabelBehavior.always,
  ),
)

Flutter - 自定义输入的外观

Flutter - Customizing appeareance of input

dart

flutter-layout