2025年Flutter笔记--Sliver用法

科技前沿 • 2025-01-10 08:34 • 阅读 66

大家好，我是讯享网，很高兴认识大家。

这一节主要简单总结一下Sliver相关组件，它是用在CustomScrollView中，用来实现各种复杂的滚动效果,它的slivers属性里可以放置各种sliver组件。

栗子:

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class SliverPage extends StatefulWidget { SliverPage({Key key}) : super(key: key); _SliverPageState createState() => _SliverPageState(); } class _SliverPageState extends State<SliverPage> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( // appBar: AppBar( // title: Text("SliverList学习"), // ), body: CustomScrollView( slivers: [ SliverAppBar( title: Text("Title"), expandedHeight: 240, pinned: true, flexibleSpace: FlexibleSpaceBar( title: Text('Flutter Background'), background: Image .network("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" ,fit: BoxFit.cover, ), ), ), SliverToBoxAdapter( child:Container( height: 105, child: Center(child: Text("HelloWorld"),), ), ), SliverPadding(padding: EdgeInsets.only(top: 45), sliver: SliverToBoxAdapter(child: Container(child:Text("Play")),), ), SliverList(delegate: SliverChildBuilderDelegate((content,index) { return Container( height: 65, color: Colors.primaries[index % Colors.primaries.length], ); },childCount: 20) ), ], ), ), ); } }

讯享网

说明:

1.SliverAppBar , 是一个可伸缩的头部，可以实现上拉收起，下拉展开效果;
1.1 expandedHeight: 最大扩展高度
1.2 flexibleSpace: 扩展内容区域
1.3 floating: 为true则在滚动时优先滚动，有下拉动作先appbar后flexibleSpace，反之亦然
1.4 snap: 为true时没有变化，正在查证
1.5 pinned：为true则appbar不消失，在下拉时会多划出一段距离SliverAppBar才开始滚动

讯享网

2025年Flutter笔记--Sliver用法

相关推荐