3

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

设计理念

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

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

我试过很多次把它放在一起，但总是有问题。我最后一次尝试是将 DraggableScrollableSheet 添加为 Scaffold 中的“底页：”。由于我有一个 BottomAppBar，它会破坏 UI，看起来如下：

当前的 UI 行为

脚手架

@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 仍然过着自己的生活:)

当前用户界面行为2

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

4

2 回答 2

0

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

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

  )

于 2021-06-04T21:44:30.247 回答
0

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

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

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

  )
于 2020-09-28T08:17:28.423 回答