如何将颤动文本与行中的其他小部件居中

Question

我用 BackButton 和 TextWidget 创建了一行。我想将文本居中到屏幕中间。实际上 flutter 将文本居中到容器宽度，但容器宽度与屏幕宽度不同，因为有后退按钮。我该如何解决？

  Expanded getTitle() {
    return new Expanded(
        child: new Text("Einloggen", style: new TextStyle(fontSize: 18.0), textAlign: TextAlign.center)
    );
  }

  BackButton getBackButton() {
    return new BackButton(

    );
  }

  Row getHeader() {
    return new Row(
      children: <Widget>[
        getBackButton(),
        getTitle()
      ],
    );
  }
  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    return new Material(
      child: new Container(
        padding: new EdgeInsets.fromLTRB(0.0, statusBarHeight, 0.0, 0.0),
        child: new Column(
          children: <Widget>[
            getHeader()
          ],
        ),
      ),
    );
  }

Answer 1

您可以使用Row的mainAxisAlignment参数来居中对齐一行的子项。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    //children Widgets
  ]
);

同样，mainAxisAligmentparamter 也可用于对齐Column的孩子。有关更多信息，请查看这里！

Answer 2

根据你的代码

  Widget getTitle() {
    return const Text('Einloggen',
        style: TextStyle(fontSize: 18.0), textAlign: TextAlign.center);
  }

  BackButton getBackButton() {
    return const BackButton();
  }

  Row getHeader() {
    return  Row(
      children: <Widget>[
        Expanded(
          child: getBackButton(),
        ),
        const Spacer(),
        getTitle(),
        const Spacer(flex: 2)
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    return Material(
      child: Container(
        padding: EdgeInsets.fromLTRB(0.0, statusBarHeight, 0.0, 0.0),
        child: Column(
          children: <Widget>[getHeader()],
        ),
      ),
    );
  }

Answer 3

您可以使用带有AppBar 的Scaffold实现相同的 UI

class mytab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        centerTitle: true,
        leading: new Icon(Icons.arrow_back),
        title: new Text("Einloggen",
            style: new TextStyle(fontSize: 18.0)),
      ),
    );
  }
}

使标题位于中心：

中心标题：真实