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],
        ),
      );
    }
  }

标题（Textfield）和正文（建议列表 - SingleChildScrollView和ListBody）包含在“列”小部件中，并且列会根据子项的总高度进行扩展。现在问题是当列扩展时，布局系统将屏幕上的其他小部件推到底部。但我希望其他小部件保持其位置，但建议列表开始出现在其他小部件之上。

如何在其他小部件之上显示建议列表？建议列表是动态的，因为用户类型我称之为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');
    },
  );
}

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

1 个答案: