SliverFillRemaining 踩坑

最近用到了CustomScrollView来展示自己的博客文章页面

​

​

CustomScrollView的组件由slivers构成 而slivers主要有两部分

• SliverAppBar 这里就是一个拉伸适应的顶部
• 主页面内容 这里用到了SliverFillRemaining

​

SliverFillRemaining 使用的时候 最开始发现问题是 子组件显示的内容有限 文字太长会不显示

好吧 那就改一下：

SliverFillRemaining 搭配子组件 SingleChildScrollView

你需要把SlicerFillRemaining的hasScrollBody设置为false

然后 将SingleShildScrollView的primary设置为true 从而将其滚动控制权交给SliverFillRemaining

​

这样 问题就解决了

但是 当遇到文本内容少的时候 你会发现 展开的头部不能收缩了

因为文字占用的空间少不足以滚动

所以我们需要设置一个最小高度占位

​

栗子：

@override
Widget build(BuildContext context) {
 var size = MediaQuery.of(context).size;

...

 SliverFillRemaining(
  hasScrollBody: false,
  fillOverscroll: true,
  child: SingleChildScrollView(
    primary: true,
    clipBehavior: Clip.antiAliasWithSaveLayer,
    child: Container(
      constraints: BoxConstraints(minHeight: size.height),
      padding: const EdgeInsets.all(20),
      child: Text(
        article.content,
        style: const TextStyle(
          fontSize: 13,
          decoration: TextDecoration.none,
          color: Color(0xff555555),
        ),
      ),
    ),
  ))