Flutter中TextField本身并不支持自动匹配功能,因此需要我们自定义实现该功能。
首先考虑如何在TextField下方一个显示匹配选项的对话框,可以选择overlay实现该功能同时搭配CompositedTransformFollower是悬浮框跟随TextField,具体实现如下:
var userName = TextEditingController();
var passWord = TextEditingController();
String inputTip = "";
CommentFunction fuc = CommentFunction(); //调用公共函数
OverlayEntry textFormOverlayEntry = new OverlayEntry(
builder: (context) {
return Container();
},
);
bool overlayIsFirstVis = true; //账号匹配overlay是否第一次显示
LayerLink layerLink = new LayerLink(); //overlay跟随
/**创建匹配选择悬浮框**/
OverlayEntry createAccountOverly() {
OverlayEntry overlayEntry = new OverlayEntry(builder: (context) {
return new Positioned(
width: 230,
child: new CompositedTransformFollower(
offset: Offset(5, 31),
link: layerLink,
child: new Material(
child: new Container(
constraint