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

Question

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

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

Answer 1

Проблема здесь в том, что 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,