颤振-重叠的容器高度问题

时间:2020-03-17 17:07:52

标签: flutter flutter-layout

我正在使用叠加来渲染内部包含MaterialApp( themeMode: ThemeMode.light, // Change it as you want theme: ThemeData( primaryColor: Colors.white, primaryColorBrightness: Brightness.light, brightness: Brightness.light, primaryColorDark: Colors.black, canvasColor: Colors.white, // next line is important! appBarTheme: AppBarTheme(brightness: Brightness.light)), darkTheme: ThemeData( primaryColor: Colors.black, primaryColorBrightness: Brightness.dark, primaryColorLight: Colors.black, brightness: Brightness.dark, primaryColorDark: Colors.black, indicatorColor: Colors.white, canvasColor: Colors.black, // next line is important! appBarTheme: AppBarTheme(brightness: Brightness.dark)), 的{​​{1}}。当用户按下“ @”时,我使用Container显示提及面板,问题是即使我将其显式设置为Listview,容器也会占据整个屏幕的高度。

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

enter image description here

这是我用于小部件的代码

Overlay

这是叠加代码:

100.0

这是我的构建函数:

  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;
  }

1 个答案:

答案 0 :(得分:0)

您必须限制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而不是子级。