如何使用 Flutter 在 TextInput 上制作仅侧面边框？

Question

我正在使用

TextFormField

和

DropdownButtonFormField

进行文本输入。但是，我需要输入与边框并排，如果默认放置它们，它们之间有两个边框。 无论如何，我需要使用 TextInput 仅在某些侧面应用边框，同时保持根据输入状态（错误、焦点、禁用...）更改边框的能力。我想过用

Container

包裹输入字段并给这个容器一个边框，但我无法处理输入状态。

由两个字段创建的“双重”边框：

Answer 1

您可以使用 TextFormField 中的“装饰”字段来配置边框和颜色，具体取决于状态。

装饰也可以直接在应用程序的主题中更改，以更改默认行为。

 decoration: InputDecoration().copyWith(
      // alternatively UnderlineInputBorder(),
      border: const OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(12.0)),
        borderSide: BorderSide(),
      ),
    );

Answer 2

flutter

最终 myBorder = UnderlineInputBorder( 边框：边框（ color: Colors.grey[400], // 您可以在此处更改底部边框的颜色 width: 1.0, // 自定义边框宽度 ), );

最终 myFocusedBorder = UnderlineInputBorder( 边框：边框（ color: Colors.blue, // 自定义字段聚焦时下边框的颜色 width: 2.0, // 自定义边框宽度 ), );

最终 myEnabledBorder = UnderlineInputBorder( 边框：边框（ color: Colors.grey[400], // 自定义字段启用时下边框的颜色 width: 1.0, // 自定义边框宽度 ), ）； `

这只适用于边框底部