如何让SliverAppBar的标题垂直居中？

Question

我想将标题在 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,
      ),
    ),
  ),

Answer 1

这是可能的方法之一：

 @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'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
 

输出：

Answer 2

尝试使用以下代码

@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"),
            );
          },
        ),
      )
    ],
  ),
);
}