如何垂直对齐左侧的文本块在颤动

Question

我想在页面的左侧对齐三个Text()。这些文本在Padding()块内，这些在Column()内。

以下是它的外观：

以下是代码：

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Padding(
      padding: EdgeInsets.only(top: 78),
      child: Text(
        'Matches',
        style: TextStyle(
          color: Colors.white,
          fontSize: 44,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    Padding(
      padding: EdgeInsets.only(top: 20),
      child: Text(
        'Today\'s Live Matches',
        style: TextStyle(
            color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
      ),
    ),
    Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: 20),
          child: Text(
            'LIVE MATCH',
            style: TextStyle(
                color: Colors.white,
                fontSize: 12,
                fontWeight: FontWeight.bold),
          ),
        )
      ],
    )
  ],
)

Answer 1

试试这个

crossAxisAlignment：CrossAxisAlignment.start

Answer 2

对齐文本

参考：qazxsw poi

Text class有Text widget财产。

加上

textAlign

到你的textAlign = TextAlign.left 小部件

有关更多Text选项，请参阅here

---

对齐列

参考：qazxsw poi

该列具有textAlign属性，默认为center

加

Column class

到你的crossAxisAlignment小部件

有关更多crossAxisAlignment = CrossAxisAlignment.start 选项，请参阅Column