Flutter 如何从SliverPersistentHeader中删除高程?
希望是一个简单的问题,我在CustomScrollView中有SliverPersistentHeader,看起来这个SliverPersistentHeader有一些阴影/立面。有没有办法去除我在红色框中勾勒出的阴影 见下图: 此基本主体是一个脚手架,SliverPersistentHeader来自_makeHeader调用:Flutter 如何从SliverPersistentHeader中删除高程?,flutter,dart,flutter-layout,Flutter,Dart,Flutter Layout,希望是一个简单的问题,我在CustomScrollView中有SliverPersistentHeader,看起来这个SliverPersistentHeader有一些阴影/立面。有没有办法去除我在红色框中勾勒出的阴影 见下图: 此基本主体是一个脚手架,SliverPersistentHeader来自_makeHeader调用: @override Widget build(BuildContext context) { return Scaffold( backg
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Consts.coMainBackground,
body: CustomScrollView(
slivers: <Widget>[
_sliverAppBar(),
_makeHeader(),
BlocBuilder<AllPersonsBloc, AllPersonsState>(
builder: (context, state) {
if (state is AllPersonsLoading) {
return _buildLoading();
} else if (state is AllPersonsLoaded) {
return _sliverList(context, state.persons);
} else if (state is AllPersonsError) {
return _buildErrorMessage(state.message);
} else {
return _buildErrorMessage('Unknown error!');
}
},
),
],
),
);
}
最后是委托函数:
Widget _makeHeader() {
return SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 130.0,
maxHeight: 130.0,
child: Container(
color: Consts.coForestGreenBackground,
child: Container(
decoration: BoxDecoration(
color: Consts.coMainBackground,
borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))
),
child: _cardHeader('People', Icons.search, 'Name')),
)
),
);
}
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;
}
}
而卡头实际上不是一张卡
Widget _cardHeader(String titleText, IconData inputIcon, String hint) {
return Container(
padding: EdgeInsets.symmetric(horizontal: standardEdgePadding),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(titleText, style: Consts.cardHeaderStyle,),
Container(
margin: EdgeInsets.only(top: 20),
height: 40,
decoration: BoxDecoration(
color: Consts.inputGreen,
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Icon(
inputIcon,
color: Consts.inputGreenText,
size: Consts.cardInputIconSize,
),
),
Flexible(child: TextField(
decoration: new InputDecoration.collapsed(
hintText: hint,
hintStyle: Consts.cardInputStyle,
),
),)
],
),
)
],
),
);
}
SliverPersistentHeader本身没有阴影,因此该提升效果不是来自SliverPersistentHeader。从您的代码片段中看不出它是明确的,但我可以看到您在小部件树中有一个_cardHeader'People',Icons.search,'Name'方法。我怀疑它在这个方法返回的小部件树中包含一个卡片小部件
如中所示,卡片具有默认的非零高程值,这可能会在您的情况下投射阴影。查看小部件树中是否有任何卡片小部件,并将其高程参数设置为零。结果是,我在容器中有一个容器:
Widget _makeHeader() {
return SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 130.0,
maxHeight: 130.0,
child: Container(
color: Consts.coForestGreenBackground,
child: Container(
//There seemed to be some spacing between the search header and the rest of the list, this takes care of it
//transform: Matrix4.translationValues(0.0, 1.0, 0.0),
decoration: BoxDecoration(
color: Consts.coMainBackground,
borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))
),
child: _cardHeader('People', Icons.search, 'Name')),
)
),
);
}
标题与SliverList的匹配方式有一个很小的差距,这可能只与emulator有关。因此,父容器中的背景色在该间隙中显示出来。没有实际的标高/阴影
如果我取消对代码的注释,那么我原来的问题中的差距就会消失
昨晚我睡得很不好,因为我无法停止思考我在哪里犯了错误。感谢@drogel确认SliverPersistentHeader上没有实际的阴影/高程。不幸的是,没有卡!我已经编辑了我的原始问题,以显示来自_cardHeader的相关代码