【问题标题】:Flutter - Top align text in ContainerFlutter - 容器中的顶部对齐文本
【发布时间】:2017-11-15 10:41:55
【问题描述】:

我试图将 $ 文本留在容器顶部,但即使使用 FractionalOffset(1.0, 0.0)$ 文本仍在容器中间。

如何将$ 留在容器顶部?

  body: new Card(
    child: new Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        new Container(
          padding: new EdgeInsets.only(top: 16.0),
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Container(
                alignment: new FractionalOffset(1.0, 0.0),
                child: new Text(
                  '\$  ',
                  style: new TextStyle(
                    fontSize: 20.0,
                    fontFamily: 'Roboto',
                    color: new Color(0xFF26C6DA),
                  )
                )
              ),               
              new Text(
                '3,435.23',
                style: new TextStyle(
                  fontSize: 35.0,
                  fontFamily: 'Roboto',
                  color: new Color(0xFF26C6DA)
                ),
              )                 
            ],
          ),
        ),            
        new Text('general balance'),
      ],
    ),
  ),

【问题讨论】:

    标签: dart flutter


    【解决方案1】:

    试着给你的Row 一个CrossAxisAlignmentCrossAxisAlignment.start。这是你的想法吗?

     body: new Card(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new Container(
              padding: new EdgeInsets.only(top: 16.0),
              child: new Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Text(
                    '\$  ',
                    style: new TextStyle(
                      fontSize: 20.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF26C6DA),
                    )
                  ),
                  new Text(
                    '3,435.23',
                    style: new TextStyle(
                      fontSize: 35.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF26C6DA)
                    ),
                  )
                ],
              ),
            ),
            new Text('general balance'),
          ],
        ),
      ),
    

    【讨论】:

    • 谢谢!!!如果整行是CrossAxisAlignment.start 只有两个疑问为什么$ 更高?是否可以将两个文本都保留在与顶部相同的高度?
    • Roboto 字体在 35 号的顶部比 20 号有更多的填充。如果你不喜欢它,你可以给美元符号一些额外的填充。
    • 在 Flutter 中是否可以从文本中删除顶部填充?
    • 听起来你想要的是顶部基线对齐。有一个用于添加更多基线选项的开放错误,但在 Flutter 中尚不存在:github.com/flutter/flutter/issues/80
    【解决方案2】:

    右对齐

    Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
    Container()
    ],)
    

    【讨论】:

    • "mainAxisAlignment: MainAxisAlignment.end" 这就是我要找的。谢谢
    猜你喜欢
    • 2023-04-04
    • 1970-01-01
    • 2018-12-17
    • 2017-07-02
    • 1970-01-01
    • 1970-01-01
    • 2013-04-04
    • 2019-05-20
    • 2012-01-14
    相关资源
    最近更新 更多