flutter - 如何从 SliverPersistentHeader 中删除海拔?
问题描述
希望是一个简单的问题,我在 CustomScrollView 中有 SliverPersistentHeader,看起来这个 SliverPersistentHeader 有某种阴影/高度。有没有办法删除它(我已经在红框中勾勒出阴影)?
这个基本主体是一个脚手架,其中 SliverPersistentHeader 来自 _makeHeader 调用:
@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
单独没有影子,所以那个elevation
效果不是来自你的SliverPersistentHeader
。它在您的代码片段中并不明确,但我可以看到您_cardHeader('People', Icons.search, 'Name')
的小部件树中有一个方法。我怀疑它Card
在此方法返回的小部件树中包含一个小部件。
如Card 小部件 Flutter 文档中所见,Card
s 具有默认的非零elevation
值,这可能会在您的情况下投射阴影。查看您的小部件树中是否有任何Card
小部件,并将其elevation
参数设置为零。
推荐阅读
- bash - Bash:遍历数组并在 case 语句中用作选项
- react-native - 如何使用 react-native 将文本输入格式化为电话号码
- haskell - Lens.Internal.Indexed 如何连接到键控容器?
- python - 如何添加具有相同名称的 pandas 列的值?
- sql - SQL (Hive) group-by 使用空值作为通配符
- python - 如何使用 Python 使用 Selenium 循环点击?
- reactjs - 来自 JSON 对象的动态反应路由
- gatsby - 有没有办法将具有相同基本 url 段的所有 url 路由到 Gatsby 中的同一页面?
- javascript - 滚动浏览 Chrome 中的某个部分时,jQuery Waypoint 粘性菜单出现闪烁问题
- python - “”的 Boto3 实例没有“桶”