Flutter CustomScrollView使用介绍

最新推荐文章于 2024-05-29 23:07:29 发布

Good Weking

最新推荐文章于 2024-05-29 23:07:29 发布

阅读量2.4k

点赞数

文章标签： flutter android 前端

本文链接：https://blog.csdn.net/qq_30005223/article/details/122718685

版权

本文介绍了Flutter的CustomScrollView，它允许自定义内部滚动控件并支持头部滑动缩放效果。但当CustomScrollView的item包含同方向滚动的子控件时，可能导致滚动异常。为解决这个问题，推荐使用NestedScrollView，它可以实现更灵活的Sliver定制。

摘要由CSDN通过智能技术生成

Flutter CustomScrollView支持自定义内部`item`的滚动控件，还支持头部带滑动缩放的`SliverAppBar`。需要注意如果CustomScrollView的item嵌套了和他滚动方向相同的控件这不能正常滑动，因为CustomScrollView内部只会维护一个`Scrollable`而会子控件会优先消费就会出现只有子控件能滚动的问题。如果有这种需求的场景建议使用NestedScrollView，可以自定义Sliver

       ///
/// CustomScrollView 滚动
class CustomScrollViewApp extends StatelessWidget {
   
  const CustomScrollViewApp({
   Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => _CustomScrollViewPage();
}

class _CustomScrollViewPage extends StatefulWidget {
   
  @override
  State<StatefulWidget> createState() => _CustomScrollViewState();
}

class _CustomScrollViewState extends State<_CustomScrollViewPage> {
   
  var controller = ScrollController();

  @override
  void initState() {
   
    super.initState();
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
          home: Scaffold(
        bottomNavigationBar: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Ele