如何在 Flutter 中居中两个文本

Question

我有下一个小部件：

class PoinstsDisplayState extends State<PoinstsDisplay> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      width: MediaQuery.of(context).size.width*0.9,
      margin: EdgeInsets.only(top: 20.0),
      padding: EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        color: Color(0xff2b2b2b),
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: new Text(
        '5000 Pts',
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 20.0,
          fontFamily: 'Karla'
        ),
      )
    );
  }
}

看起来像这样：

有完美的位置，现在我想分别设置数字 5000 和“Pts”文本的样式，但我还没有设法使它工作（像图像一样居中两个文本），我正在尝试使用一行，更多的容器，中心班等

Answer 1

这是富文本构造函数与几个TextSpans的完美结合。

从flutter docs 中的第二个示例中获取，尝试：

Text.rich(
  TextSpan(
    children: <TextSpan>[
      TextSpan(text: '5000 ', style: TextStyle(color: Colors.white)),
      TextSpan(text: 'pts', style: TextStyle(color: Colors.red)),
    ],
  ),
  textAlign: TextAlign.center,
  style: TextStyle(
    fontSize: 20.0,
    fontFamily: 'Karla'
  ),
)

Answer 2

您可能想要使用mainAxisSize: MainAxisSize.min、 、的某种组合mainAxisAlignment: MainAxisAlignment.center，并Container在两个文本小部件之间放置一些填充或具有设定宽度的空白。

class PointsDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(
            '5000',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 25.0,
              fontFamily: 'Karla'
            ),
          ),
          Container(width: 5.0,height: 0,),
          Text(
            'Pts',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20.0,
              fontFamily: 'Times'
            ),
          ),
      ],
    );
  }
}