CustomScrollview自定义滚动颤音

Question

我一直在学习，并试图做一些项目并堆放。因此，我创建了CustomScrollview，并且必须完全打开或完全关闭SliverAppbar。我试图做，但在动画滚动方面有问题。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _scrollController = ScrollController();
  bool isClosed = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.offset >= 5 && _scrollController.offset <= 200) {
        if (isClosed) {
          _scrollController.jumpTo(0);
          close();
        } else {
          _scrollController.jumpTo(202);
          close();
        }
      }
    });
  }

  close() {
    setState(() {
      isClosed = !isClosed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      controller: _scrollController,
      slivers: [
        SliverAppBar(
          expandedHeight: 200,
          flexibleSpace: SizedBox(
            child: Container(
              height: 200,
              decoration: const BoxDecoration(
                  image: DecorationImage(
                      image: NetworkImage(
                          "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5-OgasVpm-kc2HaOUloxKVlLzLuM6Q53mfA&usqp=CAU"),
                      fit: BoxFit.cover)),
            ),
          ),
        ),
        SliverList(
            delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Container(
              color: Color(index),
              height: 100,
              width: MediaQuery.of(context).size.width,
              child: Text("$index"),
            );
          },
          childCount: 10,
        ))
      ],
    );
  }
}

当使用Jumpto时，它起作用，但是使用Animateto时会出现问题。谢谢你！

Answer 1

您需要在Future Delay内包装.animateto（）。
以下代码对我有用

Future.delayed(
  Duration(milliseconds: 600),
  () {
    _scrollController.animateTo(
    202,
    duration: Duration(
        milliseconds: 600),
    curve: Curves.ease);
});

，或者您也可以在FrameCallback中包装。

WidgetsBinding.instance.addPostFrameCallback((_) {
    _scrollController.animateTo(
    202,
    duration: Duration(
        milliseconds: 600),
    curve: Curves.ease);
}