Как я могу сделать SliverAppBar, который похож на Новости Google? - PullRequest
Новая
       67

Как я могу сделать SliverAppBar, который похож на Новости Google?

0 голосов
/ 30 марта 2020

Мне нужна стандартная панель приложений, когда приложение запускается, однако, как только пользователь начинает прокручивать, я хочу, чтобы панель приложения скользила вверх и за пределы экрана. Однако, когда это происходит, строка состояния (на iOS) не имеет фона. Я не хочу устанавливать постоянный фон непосредственно в строке состояния, используя что-то вроде flutter_statusbarcolor , потому что это оставляет цвет solid, который не является виджетом.

Before scroll After Scroll

Единственное решение, которое у меня есть сейчас, - это просто держать AppBar запертым.

Однако, что я действительно хочу сделать это то, что делает Новости Google. Панель инструментов скользит вверх почти до конца, однако она остается под панелью приложений с некоторой непрозрачностью.

Как это делают Новости Google:

image

Есть ли способ сделать это с Flutter и SliverAppBar, не делая это хакерским способом? Единственное, о чем я думаю, это делать это со стеком, однако, как я узнаю, как сохранить его под строкой состояния, так как Android уже имеет некоторую непрозрачность под строкой состояния.

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

Я использовал OrientationBuilder виджет для прослушивания изменений в ориентации, так как при изменении ориентации высота строки состояния может меняться.

Затем я использовал FlutterStatusbarManager пакет чтобы получить высоту строки состояния. FlutterStatusbarManager.getHeight - это future, поэтому его необходимо обернуть FutureBuilder

. Вот полный пример кода 

import 'package:flutter/material.dart';
import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';

class FixedStatusbarBackground extends StatelessWidget {
  final Widget child;

  const FixedStatusbarBackground({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        OrientationBuilder(
          builder: (context, Orientation orientation) => FutureBuilder<double>(
              future: FlutterStatusbarManager.getHeight,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Container(
                      height: snapshot.data,
                      color: Theme.of(context)
                          .appBarTheme
                          .color
                          .withOpacity(.7) //Colors.white.withOpacity(.7),
                      );
                } else {
                  return Container();
                }
              }),
        ),
      ],
    );
  }
}

Передаваемый виджет child: весь CustomScrollView.

0 голосов
/ 30 марта 2020

Виджеты прокрутки во флаттере имеют контроллеры, которые информируют о том, что происходит с прокруткой. Вы можете узнать, сколько прокрутки было прокручено, и соответственно изменить его непрозрачность, содержание и размер. Это не будет простым, но взгляните на ScrollController , используемый CustomScrollView .

...