最近用到了CustomScrollView
来展示自己的博客文章页面
CustomScrollView
的组件由slivers构成 而slivers主要有两部分
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),
),
),
),
))