如何使文本字段的边框只有在光标处于flutter内部时才会改变颜色

Question

我想更改边框的颜色，但只有当光标在文本字段中时，我才使用容器小部件来编辑文本字段的边框。我还想在文本字段的右侧添加一个填充，以使文本字段中的提示文本看起来更好。但是，当我尝试进行所有这些更改时，填充会影响大纲输入边界。这就是我目前所拥有的：这正是我希望它看起来的样子，但只有光标在内

这是我的代码：

// email adress text field
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade600),
borderRadius: BorderRadius.circular(7)),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "[e-mail]",
),
),
),

Answer 1

当用户鼠标进入textfield空间时，您可以用InkWell包装您的textfield小部件，并将setState((传递到onHover方法中，该方法将更新您的textfield边界

late bool _isHovering;
@override
void initState()
{
_isHovering = false;
}
InkWell(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: _isHovering ? Colors.green : Colors.grey.shade600),
borderRadius: BorderRadius.circular(7)),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "[e-mail]",), ),),,
onTap: () {
//Leave it empty, like that.
}
onHover: (isHovering) {
_setState(() {_isHovering = isHovering;});
}
}
)

Answer 2

当您单击文本字段时，此示例将更改边框颜色

TextField(
controller: messageTextFieldController,
obscureText: false,
maxLines: null,
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: 'Write a message...',
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(width: 2.0, color: Colors.amber),
borderRadius: BorderRadius.circular(32),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.red, width: 2.0),
borderRadius: BorderRadius.circular(32.0)),
),
),