sliver 组件

sliver 组件

在开发过程中一定会遇到一个多种类型item的长滚动列表此时需要一个滚动的组件

1.CustomScrollView

CustomScrollView参数 类型 说明
physics ScrollPhysics 滑动类型: BouncingScrollPhysics() 拉到最底部有回弹效 ClampingScrollPhysics() 包裹内容不会回弹 NeverScrollableScrollPhysics() 滑动禁止
primary bool 当条目不足时 true可以滚动
cacheExtent int 缓存条目(预加载条目)
scrollDirection Axis 滚动方向: Axis.vertical Axis. horizontal
slivers List 子Widget
shrinkWrap bool true反向滑动AppBar

用法

  • slivers CustomScrollView构造函数给我们提供的Sliver是一个Widget[],但如果我们提供一个普通的Widget,是会崩溃的。普通组件需要由 SliverToBoxAdapter 去包装。 Widget[] 数组里面都是sliver 组件
   class CustomScrollView extends ScrollView {
  /// Creates a [ScrollView] that creates custom scroll effects using slivers.
  ///
  /// See the [ScrollView] constructor for more details on these arguments.
  const CustomScrollView({
    super.key,
    super.scrollDirection,
    super.reverse,
    super.controller,
    super.primary,
    super.physics,
    super.scrollBehavior,
    super.shrinkWrap,
    super.center,
    super.anchor,
    super.cacheExtent,
    this.slivers = const [],
    super.semanticChildCount,
    super.dragStartBehavior,
    super.keyboardDismissBehavior,
    super.restorationId,
    super.clipBehavior,
  });

  /// The slivers to place inside the viewport.
  final List slivers;

  @override
  List buildSlivers(BuildContext context) => slivers;
}

2. sliver 组件

  • 列表类的sliver
Sliver组件名称 功能 对应的可滚动组件
SliverList 列表 ListView
SliverFixedExtentList 高度固定的列表 ListView,指定itemExtent时
SliverAnimatedList 添加/删除列表项可以执行动画 AnimatedList
SliverGrid 网格 GridView
SliverPrototypeExtentList 根据原型生成高度固定的列表 ListView,指定prototypeItem 时
SliverFillViewport 包含多个子组件,每个都可以填满屏幕 PageView
SliverFillRemaining 填满剩余空间 Scrollview
  • 布局和装饰用的sliver 组件
Sliver名称 对应 RenderBox
SliverPadding Padding
SliverVisibility、SliverOpacity Visibility、Opacity
SliverFadeTransition FadeTransition
SliverLayoutBuilder LayoutBuilder
  • 其他常用的sliver 组件
Sliver名称 说明
SliverAppBar 对应 AppBar,主要是为了在 CustomScrollView 中使用。
SliverToBoxAdapter 一个适配器,可以将 RenderBox 适配为 Sliver,后面介绍。
SliverPersistentHeader 滑动到顶部时可以固定住,后面介绍。
  • 如果 CustomScrollView 有孩子也是一个完整的可滚动组件且它们的滑动方向一致,则 CustomScrollView 不能正常工作,要解决这个问题,可以使用 NestedScrollView
  • SliverPrototypeExtentList 用法

跟SliverList用法基本一致,但是子控件的高度是由prototypeItem的控件高度决定的。构造函数如下:

  const SliverPrototypeExtentList({
    super.key,
    required super.delegate,
    required this.prototypeItem,
  }) : assert(prototypeItem != null);
  • SliverAppBar 用法
const SliverAppBar({
    Key key,
    this.leading,//左侧的图标或文字,多为返回箭头
    this.automaticallyImplyLeading = true,//没有leading为true的时候,默认返回箭头,没有leading且为false,则显示title
    this.title,//标题
    this.actions,//标题右侧的操作
    this.flexibleSpace,//可以理解为SliverAppBar的背景内容区
    this.bottom,//SliverAppBar的底部区
    this.elevation,//阴影
    this.forceElevated = false,//是否显示阴影
    this.backgroundColor,//背景颜色
    this.brightness,//状态栏主题,默认Brightness.dark,可选参数light
    this.iconTheme,//SliverAppBar图标主题
    this.actionsIconTheme,//action图标主题
    this.textTheme,//文字主题
    this.primary = true,//是否显示在状态栏的下面,false就会占领状态栏的高度
    this.centerTitle,//标题是否居中显示
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//标题横向间距
    this.expandedHeight,//合并的高度,默认是状态栏的高度加AppBar的高度
    this.floating = false,//滑动时是否悬浮
    this.pinned = false,//标题栏是否固定
    this.snap = false,//配合floating使用
  })

你可能感兴趣的:(flutter,android,flutter,ios)