我在 GridView 上方使用 2 个 Sliver Headers ,在 CustomScrollView 上使用 ListView 。当我向下滚动时,我只希望固定 1 个标题(我正在滚动的标题)。我希望能够向下滚动,并且当我经过 Gridview 时,只有一个标题被固定。
编辑: 添加了 _SliverAppBarDelegate
Scaffold(
body: SafeArea(
child: DefaultTabController(
length: 2,
child: CustomScrollView(
slivers: [
makeHeader('Categories', false),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.5,
),
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
margin: EdgeInsets.all(5.0),
color: Colors.blue,
),
childCount: 10),
),
makeHeader('Watchlist', false),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.5,
),
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
margin: EdgeInsets.all(5.0),
color: Colors.red,
),
childCount: 10),
),
],
),
),
),
)
SliverPersistentHeader makeHeader(String headerText, bool pinned) {
return SliverPersistentHeader(
pinned: pinned,
floating: true,
delegate: _SliverAppBarDelegate(
minHeight: 40.0,
maxHeight: 60.0,
child: Container(
child: Text(
headerText,
style: TextStyle(fontSize: 24, color: Colors.green,fontWeight: FontWeight.bold),
)),
),
);
}
///////////////////////////EDIT
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate({
@required this.minHeight,
@required this.maxHeight,
this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
@override
double get minExtent => minHeight;
@override
double get maxExtent => math.max(maxHeight, minHeight);
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return new SizedBox.expand(child: child);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
这是一个老问题,但我将我的解决方案放在这里,以防其他人需要无需插件的粘性标题效果。
我的解决方案是在映射中包含 sliver 标头的 minExtent 值,其中键是标头上方的 sliverList 项目数。
final _headersMinExtent = <int, double>{};
当需要将 header 推出视图时,我们可以减少 minExtent。为了实现这一点,我们监听scrollController。请注意,我们还可以更新固定状态,但我们不会获得转换。
我们从以下位置计算 minExtent:
_scrollListener() {
var n = 0;
setState(() {
_headersMinExtent.forEach((key, value) {
_headersMinExtent[key] = (key * 30 + n * 40 + 190 - _scrollController.offset).clamp(0, 40);
n++;
});
});
}
当我们构建小部件列表时,我们必须将 minExtent 参数传递给 SliverPersistentHeaderDelegate :
List<Widget> _constructList() {
var widgetList = <Widget>[];
for (var i = 0; i < itemList.length; i++) {
// We want a header every 5th item
if (i % 5 == 0) {
// Don't forget to init the minExtent value.
_headersMinExtent[i] = _headersMinExtent[i] ?? 40;
// We pass the minExtent as a parameter.
widgetList.add(SliverPersistentHeader(pinned: true, delegate: HeaderDelegate(_headersMinExtent[i]!)));
}
widgetList.add(SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
decoration: BoxDecoration(color: Colors.yellow, border: Border.all(width: 0.5)),
height: 30,
),
childCount: 1,
)));
}
return widgetList;
}
这就是结果:
完整的应用程序代码:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final _scrollController = ScrollController();
final _headersMinExtent = <int, double>{};
final itemList = List.filled(40, "item");
@override
void initState() {
super.initState();
_scrollController.addListener(() {
_scrollListener();
});
}
_scrollListener() {
var n = 0;
setState(() {
_headersMinExtent.forEach((key, value) {
_headersMinExtent[key] = (key * 30 + n * 40 + 190 - _scrollController.offset).clamp(0, 40);
n++;
});
});
}
List<Widget> _constructList() {
var widgetList = <Widget>[];
for (var i = 0; i < itemList.length; i++) {
// We want a header every 5th item
if (i % 5 == 0) {
// Don't forget to init the minExtent value.
_headersMinExtent[i] = _headersMinExtent[i] ?? 40;
// We pass the minExtent as a parameter.
widgetList.add(SliverPersistentHeader(pinned: true, delegate: HeaderDelegate(_headersMinExtent[i]!)));
}
widgetList.add(SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
decoration: BoxDecoration(color: Colors.yellow, border: Border.all(width: 0.5)),
height: 30,
),
childCount: 1,
)));
}
return widgetList;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(),
body: CustomScrollView(
controller: _scrollController,
slivers: _constructList(),
),
),
);
}
}
class HeaderDelegate extends SliverPersistentHeaderDelegate {
final double _minExtent;
HeaderDelegate(this._minExtent);
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
decoration: BoxDecoration(color: Colors.green, border: Border.all(width: 0.5)),
);
}
@override
double get minExtent => _minExtent;
@override
double get maxExtent => 40;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => true;
}
class ListChildDelegate extends SliverChildDelegate {
@override
Widget? build(BuildContext context, int index) {
// TODO: implement build
throw UnimplementedError();
}
@override
bool shouldRebuild(covariant SliverChildDelegate oldDelegate) => true;
}
@diegovoper 我找到了这个插件。 https://pub.dev/packages/flutter_sticky_header 我希望还有一种更简单的方法可以在没有插件的情况下完成它。然而,这个插件完全解决了我所描述的问题。
对于现在想知道同样事情的人,有一组新的小部件,
SliverMainAxisGroup
、SliverCrossAxisGroup
和SliverCrossAxisExpanded
,让您无需插件即可轻松完成此操作。
https://github.com/flutter/flutter/pull/126596
https://api.flutter.dev/flutter/widgets/SliverMainAxisGroup-class.html
您可以将此代码示例复制粘贴到链接的文档内的代码游乐场中以查看其行为:
import 'package:flutter/material.dart';
void main() => runApp(const SliverMainAxisGroupExampleApp());
class SliverMainAxisGroupExampleApp extends StatelessWidget {
const SliverMainAxisGroupExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('SliverMainAxisGroup Sample')),
body: const SliverMainAxisGroupExample(),
),
);
}
}
class SliverMainAxisGroupExample extends StatelessWidget {
const SliverMainAxisGroupExample({super.key});
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverMainAxisGroup(
slivers: <Widget>[
const SliverAppBar(
title: Text('Section Title 1'),
expandedHeight: 70.0,
pinned: true,
),
SliverList.builder(
itemBuilder: (BuildContext context, int index) {
return Container(
color: index.isEven ? Colors.amber[300] : Colors.blue[300],
height: 100.0,
child: Center(
child: Text(
'Item $index',
style: const TextStyle(fontSize: 24),
),
),
);
},
itemCount: 5,
),
SliverToBoxAdapter(
child: Container(
color: Colors.cyan,
height: 100,
child: const Center(
child: Text('Another sliver child',
style: TextStyle(fontSize: 24)),
),
),
),
],
),
SliverMainAxisGroup(
slivers: <Widget>[
const SliverAppBar(
title: Text('Section Title 2'),
expandedHeight: 70.0,
pinned: true,
),
SliverList.builder(
itemBuilder: (BuildContext context, int index) {
return Container(
color: index.isEven ? Colors.amber[300] : Colors.blue[300],
height: 100.0,
child: Center(
child: Text(
'Item $index',
style: const TextStyle(fontSize: 24),
),
),
);
},
itemCount: 5,
),
SliverToBoxAdapter(
child: Container(
color: Colors.cyan,
height: 100,
child: const Center(
child: Text('Another sliver child',
style: TextStyle(fontSize: 24)),
),
),
),
],
),
SliverToBoxAdapter(
child: Container(
height: 1000,
decoration: const BoxDecoration(color: Colors.greenAccent),
child: const Center(
child: Text('Hello World!', style: TextStyle(fontSize: 24)),
),
),
),
],
);
}
}