Скрыть заголовок в Flutter SliverAppBar при прокрутке

У меня есть CustomScrollView с работающими осколками, но я не нахожу способа полностью скрыть верхнюю часть SliverAppBar (т.е. при прокрутке я хочу скрыть изображение и заголовок, но показать нижнюю часть):

РЕДАКТИРОВАТЬ: как показано на изображениях, я хочу, чтобы нижняя часть SliverAppBar оставалась при прокрутке. Установка pinned: false скрывает оба при прокрутке, поэтому у меня не сработает.

расширенный

свернуто

Еще до того, как я добавил отступы, я хотел, чтобы мой заголовок скрывался при сворачивании, например:

введите здесь описание изображения

теперь, когда он усекается, я бы очень хотел его скрыть.

Я видел сообщения, в которых вы можете скрыть заголовок в NestedScrollView (например, приведенный выше gif), но я бы хотел сохранить свой CustomScrollView, если это возможно?

Вот мой код:

class QuestionsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final questionsMgr = Provider.of<Questions>(context);
    final List<Question> questions = questionsMgr.questions;

    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(0),
            child: ChangeNotifierProvider.value(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    ScoreText(),
                    InstructionsText(),
                  ],
                ),
              ),
            ),
          ),
          backgroundColor: questionsMgr.getScoreColor(),
          floating: false,
          expandedHeight: 225,
          pinned: true,
          title: Text(
            "Checklist",
            textAlign: TextAlign.center,
          ),
          forceElevated: true,
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            background: Image.asset(
              "assets/images/PalFM_blue.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverList(

flutter flutter-sliver
person buttonsrtoys    schedule 20.10.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward 

SliverAppBar(
      pinned: true,
      floating: false,          
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: AppBar(

Установите для свойства bottom SliverAppBar значение PreferredSize виджет. Установите для свойства предпочтительный размер этого нижнего виджета значение 0 (Size.fromHeight (0)), чтобы высота полосы приложения ленты стала высотой панели приложения, когда лента свернута.

person Chijioke Okwunakwe    schedule 26.06.2020

arrow_upward
1
arrow_downward

Если вы хотите, чтобы SliverAppBar схлопнулся, но bottom оставался видимым, вы можете сделать это:

Чтобы SliverAppBar расширял / сжимал свое содержимое и предотвращал его исчезновение:

pinned: true

Панель приложения может расширяться и сжиматься по мере прокрутки пользователя, но она останется видимой, а не исчезнет из поля зрения. (закреплено)

Чтобы содержимое SliverAppBar появлялось / исчезало при прокрутке:

floating: true

Должна ли панель приложения становиться видимой, как только пользователь прокручивает панель приложения. (плавающий)

Тогда PreferredSize виджета bottom не должен быть 0, а быть фактической высотой bottom виджета.

preferredSize: const Size.fromHeight(60),
person Pablo Barrera    schedule 21.10.2019
comment
Да, но это также скрывает нижнюю часть SliverAppBar. Как показано на моем изображении и гифке, я бы хотел сохранить это. Я обновлю свой OP. - person buttonsrtoys; 21.10.2019
comment
спасибо за мысли, но плавающий управляет только тогда, когда AppBar сжимается, но он никогда не сжимается меньше, чем мое изображение с вырезанным заголовком, независимо от того, истинно оно или ложно. Спасибо за предложение fromHeight. Прекращение обрезки названия. (Очевидно, это не помогает скрыть заголовок com.) - person buttonsrtoys; 21.10.2019
comment
Вы применили эти изменения к коду своего вопроса? Потому что у меня это работает. - person Pablo Barrera; 21.10.2019
comment
Извините. Я оговорился. Floating = true / pinned = true почти работает. Проблема в том, что мне нужно поведение с плавающей точкой = false при расширении AppBar только при достижении вершины списка. float = true может расширять AppBar в любом месте списка, что у меня не работает. - person buttonsrtoys; 22.10.2019
comment
я столкнулся с чем-то похожим, @buttonsrtoys вы нашли решение? - person TheAnimatrix; 29.06.2020
comment
Еще нет, но я собирался попробовать предложение Чидзиоке, которое недавно появилось. Вы пробовали это? - person buttonsrtoys; 30.06.2020