将 DraggableScrollableSheet 添加到 Sliver 页面的底部答案

【问题标题】：Adding DraggableScrollableSheet to the bottom of a Sliver page将 DraggableScrollableSheet 添加到 Sliver 页面的底部
【发布时间】：2020-11-03 15:45:46
【问题描述】：

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

design concept

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

屏幕有一个显示位置标题的 SliverAppBar，一个包含位置描述的 Sliver 正文，并有一个 DraggableScrollableSheet（或类似的替代方案）。向上滚动位置描述时，标题会折叠。当 DraggableScrollableSheet 向上滚动时，它会展开到屏幕的整个高度。

我多次尝试将其组合在一起，但总是有问题。我最后一次尝试是将 DraggableScrollableSheet 添加为 Scaffold 中的“底部工作表：”。由于我有一个 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

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

【问题讨论】：

标签： flutter flutter-layout bottom-sheet flutter-sliver sliverappbar

【解决方案1】：

你可以使用Stack into Body，例如：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
     children. [
      SingleChildScrollView(),
      DraggableScrollableSheet(),
     ]
    ),
    ...        
    floatingActionButton: ... // keep FAB here
    ...

  )

【讨论】：

【解决方案2】：

您可以尝试在当前主体上添加另一个 Scaffold 并将 DraggableScrollableSheet 放入其中。那么 DraggableScrollableSheet 就不会影响到外面的 FAB 了。

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

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

  )

【讨论】：

感谢您的想法。您能否举例说明您的意思？
我添加示例代码。不确定它是否是您要找的。span>