Добавление DraggableScrollableSheet в нижнюю часть страницы Sliver

Я работаю над концепцией, которую вы можете видеть на скриншоте ниже:

концепция дизайна

Примечание. Стрелки не являются частью пользовательского интерфейса, они были добавлены для демонстрации возможности перетаскивания.

На экране есть SliverAppBar, который отображает название местоположения, тело Sliver, которое содержит описание местоположения, и имеет DraggableScrollableSheet (или аналогичную альтернативу). Когда описание местоположения прокручивается вверх, заголовок сворачивается. Когда DraggableScrollableSheet прокручивается вверх, он расширяется до полной высоты экрана.

Я много раз пытался его собрать, но всегда что-то не ладилось. Моя последняя попытка состояла в том, чтобы добавить DraggableScrollableSheet в качестве «нижнего листа» в Scaffold. Поскольку у меня есть BottomAppBar, он ломает пользовательский интерфейс и выглядит следующим образом:

текущее поведение пользовательского интерфейса

Эшафот

@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

Если у кого-то есть идеи, как решить эту проблему / эти проблемы, пожалуйста, поделитесь, я буду очень благодарен!


flutter flutter-layout flutter-sliver bottom-sheet sliverappbar
person Daria Kalashnikova    schedule 14.07.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете попробовать добавить еще один Scaffold к текущему телу и поместить в него DraggableScrollableSheet. Тогда DraggableScrollableSheet не повлияет на FAB снаружи.

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

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

  )
person yellowgray    schedule 28.09.2020
comment
Спасибо за идею. Не могли бы вы привести пример того, что вы имеете в виду? - person Daria Kalashnikova; 29.09.2020
comment
Добавляю пример кода. Не уверен, что это то, что вы ищете. - person yellowgray; 30.09.2020

arrow_upward
0
arrow_downward

Вы можете использовать Stack в Body, например:

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

  )

person roger calla    schedule 04.06.2021