Sliver 应用栏无法正确显示 - Flutter
Posted
技术标签:
【中文标题】Sliver 应用栏无法正确显示 - Flutter【英文标题】:Sliver App Bar not displaying correctly - Flutter 【发布时间】:2021-11-26 15:32:18 【问题描述】:我正在尝试显示一个 SliverAppBar,如我的设计所示
但我不确定是否可以在 Flutter 中完成
这是我目前的代码
SliverAppBar(
// title: ,
backgroundColor: Colors.grey[200],
expandedHeight: 300,
centerTitle: true,
shape: const ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100))),
actions: <Widget>[
CircleAvatar(
radius: 20,
// foregroundColor: Colors.red,
backgroundImage: AssetImage(
'assets/img/categories/player.png',
),
),
],
flexibleSpace: FlexibleSpaceBar(
background: Container(),
centerTitle: true,
title: Container(
height: 40,
child: Column(
children: [
Text("Mrs Surname Name",
style: TextStyle(
fontFamily: 'Kannada Sangam MN',
fontWeight: FontWeight.w500,
fontSize: 20,
// color: AppTheme.high_emphasis,
)),
],
),
),
),
pinned: true,
floating: false,
elevation: 0,
),
我希望即使向上滚动头像也能显示名称和图案,但更小
但是向上滚动时要隐藏的“常量”????
【问题讨论】:
【参考方案1】:我们可以使用SliverAppBar title
来保存name & Motif
,因为它始终对 UI 可见。在下一部分头像图像也始终可见,但会根据滚动减小大小,在这种情况下,将其放在flexibleSpace:FlexibleSpaceBar(title: Avatar)
中会是更好的选择。对于其他人,将基于滚动消失的信息,因此我们可以使用FlexibleSpaceBar( background:)
并使用column
填充它。但是会有重叠,我们可以在Column
的第一个孩子使用 const SizedBox(height: kToolbarHeight,),
来欺骗它。
结果
这是一个可以帮助生成 UI 的示例,您可以像这样调整装饰。
SliverAppBar(
pinned: true,
backgroundColor: Colors.grey[200],
expandedHeight: 300,
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Mrs, Surname Name",
style: TextStyle(
fontSize: 16,
),
),
Text(
"Mrs, Surname Name",
style: TextStyle(
fontSize: 26,
),
),
],
),
shape: const ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
flexibleSpace: FlexibleSpaceBar(
background: Container(
color: Colors.grey[200],
padding: const EdgeInsets.only(left: 16),
child: Column(
///* however we can use sizedBox to handle upperSpaces
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.end,
children: [
///* like this
const SizedBox(
height: kToolbarHeight,
),
...List.generate(
4,
(index) => Text("others info"),
)
],
),
),
title: Row(
///* not sure why i cant avoid using Row here
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(),
Align(
alignment: Alignment.center,
child: Container(
height: 70,
width: 70,
alignment: Alignment.center,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.deepOrange,
),
child: Text("img"),
),
),
],
),
),
),
【讨论】:
非常感谢您的帮助,但在您的代码中,img 与标题重叠 - 我还想将状态栏设置为 false,因此它是相同的灰色,但图像在向上滚动时会重叠? 是的,这是滚动时的一个小问题。但它有点褪色,这就是我忽略它的原因 谢谢你我投了赞成票你能帮我解决我在 SliverAppBar 上的其他问题吗? :) 欢迎加入 SliverAppBar Always Show Shadow - Expanded mode too - SliverAppBar hide list between SliverPersistentHeader - 非常感谢 - 第一个我需要更多帮助?【参考方案2】:您需要使用 SliverOverlapAbsorber/SliverOverlapInjector。 试试this希望它会起作用。
【讨论】:
您能否详细说明这将如何提供帮助以上是关于Sliver 应用栏无法正确显示 - Flutter的主要内容,如果未能解决你的问题,请参考以下文章
Flutter:使用 Sliver 小部件时如何在滚动时隐藏 BottomAppBar?
Nativescript - 搜索栏在操作栏中无法正确显示(IOS)