我正在开发一个屏幕,在这个屏幕上,我需要在textfield
下方显示建议列表。
我想实现如下效果:
目前,我已经开发出以下内容:
下面的代码展示了一个包含建议列表的textfield
。
@override
Widget build(BuildContext context) {
final header = new Container(
height: 39.0,
padding: const EdgeInsets.only(left: 16.0, right: 2.0),
decoration: _textFieldBorderDecoration,
child: new Row(
children: <Widget>[
new Expanded(
child: new TextField(
maxLines: 1,
controller: _controller,
style: _textFieldTextStyle,
decoration:
const InputDecoration.collapsed(hintText: 'Enter location'),
onChanged: (v) {
_onTextChanged.add(v);
if (widget.onStartTyping != null) {
widget.onStartTyping();
}
},
),
),
new Container(
height: 32.0,
width: 32.0,
child: new InkWell(
child: new Icon(
Icons.clear,
size: 20.0,
color: const Color(0xFF7C7C7C),
),
borderRadius: new BorderRadius.circular(35.0),
onTap: (){
setState(() {
_controller.clear();
_places = [];
if (widget.onClearPressed != null) {
widget.onClearPressed();
}
});
},
),
),
],
),
);
if (_places.length > 0) {
final body = new Material(
elevation: 8.0,
child: new SingleChildScrollView(
child: new ListBody(
children: _places.map((p) {
return new InkWell(
child: new Container(
height: 38.0,
padding: const EdgeInsets.only(left: 16.0, right: 16.0),
alignment: Alignment.centerLeft,
decoration: _suggestionBorderDecoration,
child: new Text(
p.formattedAddress,
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: _suggestionTextStyle,
),
),
onTap: () {
_getPlaceDetail(p);
},
);
}).toList(growable: false),
),
),
);
return new Container(
child: new Column(
children: <Widget>[header, body],
),
);
} else {
return new Container(
child: new Column(
children: <Widget>[header],
),
);
}
}
头部(Textfield
)和主体(建议列表 - SingleChildScrollView
与ListBody
)被包装在Column小部件中,列根据子项的总高度扩展。现在的问题是,随着列的扩展,布局系统将屏幕上的其他小部件推到底部。但我希望其他小部件保持在它们的位置上,但建议列表开始出现在其他小部件的顶部。
如何在其他小部件的顶部显示建议列表?并且建议列表是动态的,当用户输入时,我调用Google Places API并更新建议列表。
我看到有一个showMenu<T>()
方法与RelativeRect
位置,但它不能实现我的目的,我的建议列表是动态的(根据用户输入变化),每个项目的样式与PopupMenuItem
提供的不同。
我能想到的一种可能性是使用Stack小部件作为此屏幕的根小部件,并通过绝对位置排列所有内容,然后将建议列表放置在堆栈子列表的最后一个子项中。但我认为这不是正确的解决方案。
我需要查看哪些其他可能性?在这种情况下可以使用哪些其他小部件?
再次强调,用例很简单,在屏幕上覆盖建议列表,当用户从列表中点击任何项目时,隐藏此覆盖的建议列表。