SliverAppBar нажимает только после некоторой прокрутки - PullRequest
Новая
       88

SliverAppBar нажимает только после некоторой прокрутки

1 голос
/ 27 мая 2019

У меня есть SliverAppBar (с плавающей точкой: true, с закрепленным: false).

Я хочу добиться того, чтобы пользователь прокручивал 200 пикселей (или некоторую другую сумму), прежде чем SliverAppBar начнет сжимать / скользить.

1 Ответ

1 голос
/ 27 мая 2019

Проблема в том, что значение pinned не должно изменяться.Если вы попытаетесь изменить его после прокрутки 200 пикселей, SliverAppBar внезапно уменьшится.

Вы можете проверить это, выполнив код ниже: 

class Buster extends StatefulWidget {
  @override
  _BusterState createState() => _BusterState();
}

class _BusterState extends State<Buster> {
  ScrollController controller;
  bool isAppBarPinned;

  @override
  void initState() {
    super.initState();
    controller = ScrollController()..addListener(onScroll);
    isAppBarPinned = true;
  }

  void onScroll() {
    if (controller.position.pixels > 200) {
      if (isAppBarPinned) {
        setState(() => isAppBarPinned = false);
      }
    } else {
      if (!isAppBarPinned) {
        setState(() => isAppBarPinned = true);
      }
    }
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        controller: controller,
        slivers: [
          SliverAppBar(
            title: Text('Buster'),
            floating: true,
            pinned: isAppBarPinned,
          ),
          SliverFixedExtentList(
            itemExtent: 150,
            delegate: SliverChildListDelegate(
              [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
                  .map((int index) => Center(child: Text('Item #$index')))
                  .toList(),
            ),
          )
        ],
      ),
    );
  }
}

Так что я думаю, что лучшеопция, которую вы получили, использует обычные AppBar и анимированные вручную с Transform.

...