Скрыть заголовок в Flutter SliverAppBar при прокрутке - PullRequest
Новая
       86

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

0 голосов
/ 21 октября 2019

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

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

expanded

collapsed

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

enter image description here

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

Я видел сообщения, в которых вы можете скрыть заголовок в 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(

1 Ответ

0 голосов
/ 21 октября 2019

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

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

pinned: true

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

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

floating: true

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

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

preferredSize: const Size.fromHeight(60),
...