如何将两个文本集中在Flutter中

Posted 2021-05-03

我有下一个小部件：

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'文本，但我没有设法使它工作（中心两个文字像图像），我尝试一排，更多的容器，中心班等等

答案

您可能想要使用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'
            ),
          ),
      ],
    );
  }
}

另一答案

这是rich text constructor与几个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'
  ),
)