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

Posted 2023-02-23

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

【英文标题】：How to center flutter text with other widgets in row

【发布时间】：2018-09-03 19:03:02

【问题描述】：

我用 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()
          ],
        ),
      ),
    );
  

【问题讨论】：

你想从中获得什么？

我想要一个 BackButton 和一个居中的文本在一行中，但文本没有居中。

【参考方案1】：

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

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

同样，mainAxisAligment 参数也可用于对齐Column 的子级。更多信息check this out!

【讨论】：

不确定，不适合我，我看到的图像如示例所示

【参考方案2】：

您可以使用 A Scaffold 和 AppBar 实现相同的 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)),
      ),
    );
  

在中心制作标题：

centerTitle: 是的

【参考方案3】：

我不知道它是否仍然有用，但是感谢widegtes我找到了一个解决方案：Container, Stack and Align。

Widget getTitle() 
  return new Text("Einloggen", style: new TextStyle(fontSize: 18.0));


Widget getBackButton() 
  return Container(
      height: MediaQuery.of(context).size.height,
      child: IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: moveToLogin,
      ));


Widget getHeader() 
  return Container(
    height: 50.0,
    // you must set a size to the Conteiener to make sure that the internal Align 
    // widens as much as possible.
    child: new Stack(
      //  Stack places the objects in the upper left corner
      children: <Widget>[
        getBackButton(),
        Align(alignment: Alignment.center, child: getTitle()),
      ],
    ),
  );


final double statusBarHeight = MediaQuery.of(context).padding.top;
return new Container(
  padding: new EdgeInsets.fromLTRB(0.0, statusBarHeight, 0.0, 0.0),
  child: new Column(
    children: <Widget>[getHeader()],
  ),
);

这是结果

Image

【参考方案4】：

根据你的代码

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