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

Question

我正在研究您可以在下面的屏幕截图中看到的概念:

design concept

注意:箭头不是 UI 的一部分，而是添加来演示可拖动功能。

屏幕有一个显示位置标题的 SliverAppBar，包含位置描述的 Sliver 主体，以及一个 DraggableScrollableSheet(或类似的替代项)。向上滚动位置描述时，标题会折叠。当 DraggableScrollableSheet 向上滚动时，它会扩展到屏幕的整个高度。

我试了很多次把它放在一起，但总有一些地方不对劲。我最后一次尝试是在 Scaffold 中添加 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

如果有人知道如何解决这个问题/那些问题，请分享，我将不胜感激!

Answer 1

您可以尝试在当前主体上添加另一个脚手架，并将 DraggableScrollableSheet 放入其中。这样DraggableScrollableSheet就不会影响外面的FAB了。

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

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

  )