Flutter: скрытие и отображение панели приложения при обнаружении прокрутки - PullRequest
Новая
       18

Flutter: скрытие и отображение панели приложения при обнаружении прокрутки

0 голосов
/ 08 марта 2019

У меня проблемы с анимацией панели приложения, я использую SilverAppBar в своем приложении.Итак, проблема в том, что когда я нахожусь в середине своего списка и прокручиваю вверх, панель приложения не появляется, но появляется только тогда, когда прокрутка достигает верхней части списка элементов.Я уже проверил параметр snap и дал ему true, но не ожидаемый результат.У меня есть идеи по созданию настраиваемой анимации для этого, но я не слишком опытен во Flutter, и если есть способ добавить параметры или другой виджет, который будет работать в моей ситуации, это было бы здорово.

Фактический код демонстрации, которую я использую: 

  Widget _search() => Container(
        color: Colors.grey[400],
        child: SafeArea(
            child: Container(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              enabled: false,
              style: TextStyle(fontSize: 16, color: Colors.white),
              decoration: InputDecoration(
                prefix: SizedBox(width: 12),
                hintText: "Search",
                contentPadding:
                    EdgeInsets.symmetric(horizontal: 32.0, vertical: 14.0),
                border: InputBorder.none,
              ),
            ),
          ),
        )),
      );

  Container _buildBody() {
    return Container(
        child: new GridView.count(
      crossAxisCount: 2,
      children: List.generate(100, (index) {
        return Center(
          child: Text(
            'Item $index',
            style: Theme.of(context).textTheme.headline,
          ),
        );
      }),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        resizeToAvoidBottomPadding: false,
        body: new NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                new SliverAppBar(
                  title: Text("Demo",
                      style: TextStyle(
                        color: Colors.white,
                      )),
                  pinned: false,
                  floating: true,
                  forceElevated: innerBoxIsScrolled,
                ),
              ];
            },
            body: new Column(children: <Widget>[
              _search(),
              new Expanded(child: _buildBody())
            ])));
  }

Результат, который я имею сейчас: Изображение 1

Результат, который я получил после предоставления *От 1013 * до параметра snap: Изображение 2

Множество приложений, таких как WhatsApp, Facebook, LinkedIn ... имеют эту анимированную панель приложений.Чтобы объяснить, чего именно я ожидаю от этой анимированной панели приложений, я добавил пример Google Play Store, показывающий нужную анимацию: Пример Play Store

1 Ответ

0 голосов
/ 08 марта 2019

Чтобы эта функция работала, вам нужно будет использовать виджет CustomScrollView вместо NestedScrollView. Документация Google

Вот рабочий пример: 

class MyHomeState extends State<MyHome> {
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        const SliverAppBar(
          pinned: false,
          snap: false,
          floating: true,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('Demo'),
          ),
        ),
        SliverGrid(
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200.0,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 4.0,
          ),
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.teal[100 * (index % 9)],
                child: Text('grid item $index'),
              );
            },
            childCount: 50,
          ),
        ),
      ],
    )
  );
}
}

Пример работы здесь

...