flutter - 将DraggableScrollableSheet添加到Sliver页面的底部

我正在研究您可以在以下屏幕截图中看到的概念:
design concept
注意:箭头不是UI的一部分，而是添加了箭头以演示可拖动功能。
屏幕上有一个SliverAppBar，用于显示位置标题，Sliver主体包含位置描述，并具有DraggableScrollableSheet(或类似的替代方法)。
向上滚动位置说明时，标题将折叠。
当DraggableScrollableSheet向上滚动时，它将扩展到屏幕的整个高度。
我尝试了很多次，但始终存在问题。
我最后一次尝试是将Scragold中的DraggableScrollableSheet添加为“Bottom Sheet :”。由于我有一个BottomAppBar，因此它会破坏UI并显示以下方式:
current UI behavior
支架

@override
Widget build(BuildContext context) {
 return Scaffold(
     body: body,
     extendBody: true,
     appBar: appBar,
     bottomSheet: hasBottomSheet
         ? DraggableScrollableSheet(
             builder:
                 (BuildContext context, ScrollController scrollController) {
               return Container(
                 color: Colors.blue[100],
                 child: ListView.builder(
                   controller: scrollController,
                   itemCount: 25,
                   itemBuilder: (BuildContext context, int index) {
                     return ListTile(title: Text('Item $index'));
                   },
                 ),
               );
             },
           )
         : null,
     backgroundColor: Colors.white,
     floatingActionButtonLocation: fab_position,
     floatingActionButton: hasActionButton ? ScannerFAB() : null,
     bottomNavigationBar: AppBarsNav(hasNavButtons: hasNavButtons));
}

脚手架主体

class LocationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScaffoldWithNav(
      hasBottomSheet: true,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverBar(
              title: "Location",
              hasBackground: true,
              backgroundImagePath: 'assets/testImage.jpg'),
          SliverToBoxAdapter(
            child: Text("very long text "),
          ),
          SliverPadding(
            padding: EdgeInsets.only(bottom: 70),
          ),
        ],
      ),
    );
  }
}

BottomAppBar FAB

class ScannerFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: WebsafeSvg.asset('assets/qr-code.svg',
          color: Colors.white, height: 24, width: 24),
    );
  }
}

FAB跳转，内容被隐藏。
当我设置一个固定大小的容器时，内容又回来了，但是FAB仍然过着自己的生活:)
current UI behavior2
如果有人对如何解决这个问题/这些问题有任何想法，请分享，我将非常感谢!

最佳答案

您可以尝试在当前主体上添加另一个Scaffold，并将DraggableScrollableSheet放入其中。然后DraggableScrollableSheet不会影响外部的FAB。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Scaffold(
      body: body,
      bottomSheet: ... // move DraggableScrollableSheet to here
    ),

    ...
    floatingActionButton: ... // keep FAB here
    ...

  )

关于flutter - 将DraggableScrollableSheet添加到Sliver页面的底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62892929/