我已经试了一段时间了,但我不能让它开始工作。
我想在带有CustomScrollView
的CupertinoSliverNavigationBar
中创建一个列表视图。SliverList
必须是水平滚动的。此外,它应该有一个标题行,它坚持到视图的顶部。
请参见这里的示例:https://dartpad.dev/?id=38c0825f27c1b3395dd22794a2567e64。注意身体可以水平滚动。
我想让红色标题行变得粘稠,这样在蓝色内容滚动时,它始终是可见的。
问题是标题行必须位于SingleChildScrollView
和SizedBox
中,否则它将没有所需的宽度。但一旦它在里面,我就不能再让它粘稠了。
非常感谢你的指点。
发布于 2022-04-01 16:57:09
解决方案^^使用SliverPersistentHeader使红色标题行粘稠,并使用SliverList而不是ListView。
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'dart:math' as math;
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final scrollController = ScrollController();
return MaterialApp(
home: Scaffold(
body: CustomScrollView(
slivers: [
const CupertinoSliverNavigationBar(
largeTitle: Text('Search'),
),
//CupertinoSliverRefreshControl(),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 20.0,
maxHeight: 30.0,
child: Container(
color: Colors.red, child: Center(child:
Text("red header "))),
),
),
SliverList(
delegate: SliverChildListDelegate(
List.generate(80, (index) => Container(
padding: const EdgeInsets.all(5),
color: Colors.blueAccent.shade100,
child: const Text('bar'),
)),
),
),
],
),
),
);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate({
required this.minHeight,
required this.maxHeight,
required 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;
}
}
https://stackoverflow.com/questions/71555118
复制相似问题