flutter - Flutter - 覆盖容器高度问题

问题描述

我正在使用覆盖来渲染Container包含Listview内部的内容。当用户按下“@”时，我使用 '@' 显示提及面板Overlay，问题是 Container 占用了整个屏幕的高度，即使我已明确将其设置为100.0。

我不知道这是颤振的错误还是我做错了这里的屏幕截图。这是一个简单的dartpad 示例

这是我用于小部件的代码

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

标签： flutterflutter-layout

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

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

代替Positioned，您基本上可以使用任何其他限制大小的小部件，导入的东西是包装CompositedTransformFollower而不是孩子。

flutter - Flutter - 覆盖容器高度问题

问题描述

解决方案

推荐阅读