Flutter：溢出 error/Faulty 使用 SlidingUpPanel 滚动

Question

我正在使用 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 正确滚动？

Answer 1

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

Answer 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)),
        ),
      ),
    );

Answer 3

或者如果你想在单击图标或按钮时从底部打开容器，你可以使用 flutter modalsheet

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

}

Flutter：溢出 error/Faulty 使用 SlidingUpPanel 滚动

Flutter: Overflow error/Faulty scrolling with SlidingUpPanel

mobile

dart

flutter

flutter-dependencies