Добавление DraggableScrollableSheet внизу страницы Sliver - PullRequest
Новая
       110

Добавление DraggableScrollableSheet внизу страницы Sliver

2 голосов
/ 14 июля 2020

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

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

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

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

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

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

Scaffold 

@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

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

...