我正在尝试使用 sliver 应用栏来实现设计，那里有一个图像、一些文本细节和右侧的两个按钮。
我在这里面临的困难是，我必须在滚动时将一些文本移动到应用栏并隐藏一个图标。
我自己试过这个
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
elevation: 1,
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(
Icons.chevron_left,
size: 30,
color: Colors.grey.shade300,
),
onPressed: () {
Navigator.pop(context);
},
),
automaticallyImplyLeading: false,
flexibleSpace: Stack(
children: [
FlexibleSpaceBar(
centerTitle: false,
// stretchModes: [StretchMode.fadeTitle],
// collapseMode: CollapseMode.none,
titlePadding: EdgeInsets.only(bottom: 7.5, left: 50),
title: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: MediaQuery.of(context).size.width / 1.4,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
SizedBox(
width: 50,
height: 12,
child: Text(
"ID012230",
style: GoogleFonts.lato(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
fontSize: 10,
color: Theme.of(context)
.primaryColor),
)),
SizedBox(width: 5),
Container(
width: 13,
height: 10,
// alignment:
// new FractionalOffset(
// 1.0, 0.0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(2),
border: Border.all(
color: Theme.of(context)
.primaryColor,
width: 1.0,
)),
child: new Text(
'T1',
textAlign: TextAlign.center,
style: GoogleFonts.lato(
fontStyle: FontStyle.normal,
fontWeight:
FontWeight.normal,
fontSize: 6,
color: Theme.of(context)
.primaryColor),
)),
SizedBox(width: 5),
Container(
width: 22.5,
height: 10,
// alignment:
// new FractionalOffset(
// 1.0, 0.0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(3),
border: Border.all(
color: Theme.of(context)
.primaryColor,
width: 1.0,
)),
child: new Text(
'MTB',
textAlign: TextAlign.center,
style: GoogleFonts.lato(
fontStyle: FontStyle.normal,
fontWeight:
FontWeight.normal,
fontSize: 6,
color: Theme.of(context)
.primaryColor),
)),
],
),
SizedBox(height: 3),
Padding(
padding:
EdgeInsets.fromLTRB(0, 0, 50, 0),
child: Text(
widget.visit.cname,
// "This sentence is to test the long visit name in store landing",
// softWrap: true,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.lato(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
fontSize: 18,
color: Theme.of(context)
.primaryColor),
),
),
])),
InkWell(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
// GetCurrentLocation(date: _date, key: _cvisitState)
IssueViewMain(widget.visit.cname,
widget.visit.id)),
);
print(
"Widget name view 2 ${widget.visit.cname}");
},
child: Container(
padding: EdgeInsets.only(top: 50),
// height: MediaQuery.of(context).size.height / 1,
// width: MediaQuery.of(context).size.width / 1,
child: Stack(children: [
Badge(
child: SizedBox(
width: 25,
// height: 22,
child: Image.asset(
"assets/adobexd/images/issue.png",
color: Colors.grey.shade400,
width: 25,
height: 45,
),
),
badgeContent: Text(
'$issuelength',
style: TextStyle(color: Colors.white),
),
position: BadgePosition.bottomEnd(
bottom: 3, end: -10),
badgeColor: Colors.grey.shade400,
animationType: BadgeAnimationType.slide,
animationDuration:
Duration(milliseconds: 500),
shape: BadgeShape.circle,
)
]))),
// SizedBox(width: 1)
],
)),
Stack(
children: [
FlexibleSpaceBar(
background: Stack(
children: [
Image.asset("assets/adobexd/images/storeimage.png",
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
// width:376.5,
height: 250),
// SizedBox(height: 250, child: _buildFab()),
Container(
padding: EdgeInsets.only(top: 55, left: 340),
child: IconButton(
icon: SizedBox(
child: Icon(
Icons.sync_rounded,
size: 30,
color: Colors.white,
)),
onPressed: () {
// Navigator.pop(context);
},
)),
InkWell(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
// GetCurrentLocation(date: _date, key: _cvisitState)
// IssuePage(issuename = "Reliance",
// issueid = "12345")
IssueViewMain(widget.visit.cname,
widget.visit.id)),
);
print("Cname check ${widget.visit.cname}");
},
child: Container(
padding:
EdgeInsets.only(top: 55, left: 310),
child: Badge(
child: SizedBox(
width: 24,
// height: 22,
child: Image.asset(
"assets/adobexd/images/issue.png",
color: Colors.white,
width: 26.87,
height: 44.94,
// fit: BoxFit.cover
),
),
badgeContent: Text(
'$issuelength',
style: TextStyle(
color:
Theme.of(context).primaryColor),
),
position: BadgePosition.bottomEnd(
bottom: 3, end: -10),
badgeColor: Colors.white,
animationType: BadgeAnimationType.slide,
animationDuration:
Duration(milliseconds: 500),
shape: BadgeShape.circle,
))),
],
)),
],
)
],
))
我从这段代码中得到了这个设计我在这里得到的设计你可以看到左边的人字形和右边的图标不在一行中，滚动后问题图标在某些设备上会显示在顶部
这在我的设备上看起来非常好，但在其他设备上会发生变化
我想要这样的设计
我希望有人能帮助找到解决这个问题的方法。谢谢 ：）