dart - Flutter - 在其他小部件之上显示建议列表

Question

我正在开发一个屏幕，我必须在 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],
        ),
      );
    }
  }

Header( Textfield ) 和 body(建议列表 - SingleChildScrollView 和 ListBody ) 包裹在 Column 小部件内，并且列根据子项的总高度展开。现在的问题是随着 Column 的扩展，布局系统将屏幕上的其他小部件推到底部。但是我希望其他小部件保留在它们的位置上，但是建议列表开始出现在其他小部件的顶部。

如何在其他小部件之上显示建议列表？建议列表是动态的，当用户输入时，我调用 Google Places API 并更新建议列表。

我看到有 showMenu<T>()使用 RelativeRect 的方法位置，但它不能满足我的目的，我的建议列表是动态的(根据用户输入更改)并且我拥有的每个项目的样式都与 PopupMenuItem 不同提供。

我可以考虑使用 Stack 小部件作为此屏幕的根小部件并按绝对位置排列所有内容的一种可能性，我将建议列表作为堆栈子列表的最后一个子项。但我认为这不是正确的解决方案。

我还需要研究哪些其他可能性？在此用例中还可以使用哪些其他小部件？

再次用例很简单，在屏幕上的其他小部件上叠加建议列表，当用户点击列表中的任何项目时，然后隐藏这个叠加的建议列表。

Answer 1

您的自动完成列表将其下方的小部件下推的原因是列表正在容器上展开。你可以使用 Flutter 的 Autocomplete widget它应该使自动完成列表膨胀到其他小部件之上。

var fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

_autoCompleteTextField() {
  return Autocomplete(
    optionsBuilder: (TextEditingValue textEditingValue) {
      if (textEditingValue.text == '') {
        return const Iterable<String>.empty();
      }
      return fruits.where((String option) {
        return option
            .toLowerCase()
            .contains(textEditingValue.text.toLowerCase());
      });
    },
    onSelected: (String selection) {
      debugPrint('You just selected $selection');
    },
  );
}