我想将标题在 SliverAppBar 中垂直居中。我在互联网上找到了一个解决方案,您可以在标题上方和下方放置空容器,以便文本居中,但问题是当您向上滚动并且只有小应用栏在那里时,您看不到更多标题,因为空容器太大。我已将标题水平居中,但我还需要将其垂直居中。有谁知道这个问题的解决方案吗?
这是我目前的代码:
SliverAppBar(
expandedHeight: MediaQuery.of(context).size.height * 0.20,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Training"),
background: Image.asset(
"assets/purpleBackground.png",
fit: BoxFit.cover,
),
),
),
这是可能的方法之一:
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: height * 0.2,
collapsedHeight: height * 0.075,
flexibleSpace: LayoutBuilder(
builder: (context, constraints) {
double appBarHeight = constraints.biggest.height; //getting AppBar height
bool isExpanded = appBarHeight > height * 0.2; //check if AppBar is expanded
return FlexibleSpaceBar(
titlePadding: EdgeInsets.zero,
centerTitle: true,
title: SizedBox(
height: height * 0.15,
child: Column(
mainAxisAlignment: isExpanded
? MainAxisAlignment.center
: MainAxisAlignment.end,
children: <Widget>[
Container(
padding:
isExpanded ? EdgeInsets.zero : EdgeInsets.all(20),
child: Text(
"Training",
),
),
],
),
),
);
},
),
),
SliverList(
delegate: SliverChildListDelegate.fixed(
List.generate(
50,
(index) => ListTile(
title: Text('Index $index'),
),
),
),
),
],
),
);
输出:
尝试使用以下代码
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: 200,
//backgroundColor: Colors.transparent,
flexibleSpace: FlexibleSpaceBar(
titlePadding: EdgeInsets.zero,
centerTitle: true,
title: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 3,
child: Container(),
),
Flexible(
flex: 1,
child:
Text("Should be centered", textAlign: TextAlign.center),
),
Flexible(
flex: 1,
child: Container(),
),
],
),
background: Image.asset("assets/earth.png", fit: BoxFit.cover),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.menu),
tooltip: "Menu",
onPressed: () {
// onPressed handler
},
),
],
),
SliverFixedExtentList(
itemExtent: 50,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.green,
child: Text("Index n°$index"),
);
},
),
)
],
),
);
}