Flutter-重叠的容器高度问题

Question

我正在使用叠加来渲染内部包含Container的Listview。当用户按下'@'时，我使用Overlay显示提及面板，问题是即使我将其显式设置为100.0，容器也会占据整个屏幕的高度。

我不知道它是否是颤动的错误，或者我做错了什么，这是屏幕截图。这是一个简单的dartpad example

这是我用于小部件的代码

  Widget _buildSuggestionList() {
    return selected != -1
        ? Container(
            color: Colors.purple,
            height: 100.0,
            constraints: BoxConstraints(maxHeight: 100.0, minHeight: 80.0),
            child: ListView.builder(
              itemCount: widget.mentions[selected].data.length,
              itemBuilder: (context, index) {
                final item = widget.mentions[selected].data[index];

                return GestureDetector(
                  onTap: () {
                    if (this._overlayEntry != null) {
                      this._overlayEntry.remove();

                      this._overlayEntry = null;
                    }

                    final newText = "${_controller.value.text}${item["name"]} ";

                    _controller.text = newText;

                    setState(() {
                      text = newText;
                      selected = -1;
                    });
                  },
                  child: Text(
                    item["name"],
                    style: TextStyle(fontSize: 24.0, color: Colors.amber),
                  ),
                );
              },
            ),
          )
        : null;
  }
这是叠加代码：

this._overlayEntry = OverlayEntry(builder: (_) {
     return CompositedTransformFollower(
         link: _layerLink,
         offset: Offset(0, -(size.height + 730.0)),
         child: _buildSuggestionList(),
     );
}

Overlay.of(key.currentContext).insert(_overlayEntry);
这是我的构建函数：

  @override
  Widget build(BuildContext context) {
    return Container(
      key: key,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: <Widget>[
          Positioned(
            child: Container(
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.only(top: 12.0, left: 0.0),
              child: RichText(
                maxLines: 20,
                text: TextSpan(
                  text: text,
                  style: TextStyle(color: Colors.pink, fontSize: 16.0),
                ),
              ),
            ),
          ),
          CompositedTransformTarget(
            link: _layerLink,
            child: TextField(
              maxLines: 20,
              minLines: 1,
              controller: _controller,
              decoration: InputDecoration(hintText: widget.placeholder),
              style: TextStyle(
                color: Colors.transparent,
              ),
            ),
          ),
        ],
      ),
    );
  }

我正在使用Overlay渲染一个内部包含Listview的容器。当用户按下“ @”时，我使用“覆盖”显示提及面板，问题是容器占据了整个屏幕的高度...

Answer 1

您必须限制CompositedTransformFollower本身无条件增长，而不是仅将宽度/高度应用于孩子（您的Container），例如通过使用Positioned：