Flutter：溢出错误/使用 SlidingUpPanel 滚动错误答案

【问题标题】：Flutter: Overflow error/Faulty scrolling with SlidingUpPanelFlutter：溢出错误/使用 SlidingUpPanel 滚动错误
【发布时间】：2022-01-08 20:55:40
【问题描述】：

我正在使用sliding_up_panel 包（版本^2.0.0+1）并且我遇到了屏幕滚动行为的问题。我的widget 看起来像这样：

return SingleChildScrollView(
  child: SlidingUpPanel(
      // set minHeight to 0 to only show the SlidingUpPanel when clicking on the edit icon
      minHeight: 0,
      controller: sliderController,
      panel: const RenameWidget(),
      body: generateMainBody(context)),
);

通过这种方法，我得到的 UI 如下所示：

当我点击编辑图标时，SlidingUpPanel 的 panel 会按预期打开：

但是，您可以在第一个屏幕截图中看到底部溢出导致以下错误：

A RenderFlex overflowed by 157 pixels on the bottom.

我试图通过将SlidingUpPanel 嵌套在SingleChildScrollView 中来解决此问题，如您在上面的代码中所见。这并没有解决溢出，并截断了底部的部分内容。

接下来，我尝试将SingleChildScrollView 移动到SlidingUpPanel 的body：

return SlidingUpPanel(
    minHeight: 0,
    controller: sliderController,
    panel: const RenameWidget(),
    body: SingleChildScrollView(child: generateMainBody(context)));

这解决了溢出错误，但是向下滚动时它仍然会切断一些内容。

这肯定与SlidingUpPanel 相关，因为这样做可以正常工作（当然在单击编辑图标时无需打开任何内容）：

return SingleChildScrollView(child: generateMainBody(context));

我只希望在单击编辑图标时打开弹出窗口。也许使用minHeight: 0 不是实现这一目标的正确方法？如何使SlidingUpPanel 的body 正确滚动？

【问题讨论】：

看看this flutter class。你不需要一个包来实现你想做的事情。
完美。请留下一个答案，以便我可以接受并指出我在滥用该软件包。

标签： flutter dart mobile flutter-dependencies

【解决方案1】：

看看this flutter class。你不需要一个包来实现你想做的事情。

【讨论】：

【解决方案2】：

 return Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: SlidingUpPanel(
          // set minHeight to 0 to only show the SlidingUpPanel when clicking on the edit icon
          minHeight: 0,
          controller: sliderController,
          panel: const RenameWidget(),
          body: SingleChildScrollView(child: generateMainBody(context)),
        ),
      ),
    );

【讨论】：

【解决方案3】：

如果你想在点击图标或按钮时从底部打开容器，你可以使用颤振模式表

 Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    height: double.infinity,
    width: double.infinity,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
    FlatButton(onPressed: (){
      showModalBottomSheet(context: context, builder: (context){
        return Container(
          height: 200,
          width: double.infinity,
          child: Text("This is Bottom modal sheet", style: TextStyle(color: Colors.black)),
        );
      });
    }, child: Text("open Bottom sheet",style: TextStyle(color: Colors.black)))
    ]),
  ),
);

}

【讨论】：