Question

我正在尝试使用Flutter在CustomScrollView中设置SliverAppBar，并且无法使标题垂直居中。

我已经尝试过this solution（这个问题正是我想做的），但是幸运的是，它对我没有用。

这是我的构建方法：

[amount, hours]

我真的不明白什么地方出了问题以及为什么它没有居中。我观察到将mainAxisSize设置为mainAxisSize.max时，该列太大。

有什么主意吗？

谢谢！

Answer 1

不要使用 FlexibleSpaceBar，而是使用不同的 Widget。

flexibleSpace: Padding(
            padding: EdgeInsets.all(4),
            child: Container(),
            }),
          ),

Answer 2

有点像 Pedro 之前所说的，您可以改为使用 SliverAppBar 中的 flexibleSpace 参数，然后从那里将内容居中。这就是我所做的。

SliverAppBar(
    flexibleSpace: Center(
        child: Text("27 is my favorite number")
    )
 )

Answer 3

我在您的代码中进行了一些修改，并使其居中。因此，这里的主要问题是ExpandedHeight。此高度使SliverAppBar向上和向下扩展，这意味着200的一半始终位于屏幕上方。考虑到这一点，您将尝试将文本仅在应用程序栏的下半部分居中。最简单的方法是只使用Flexible来调整项目相对于其容器的大小。这是工作代码：

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

没有空容器的方式

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              titlePadding: EdgeInsets.zero,
              centerTitle: true,
              title: SizedBox(
                height: 130,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text("Should be centered", textAlign: TextAlign.center),
                  ],
                ),
              ),
              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"),
                );
              },
            ),
          )
        ],
      ),
    );
  }

如何使用SliverAppBar在Flutter中垂直居中放置文本/标题？

3 个答案:

没有空容器的方式