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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将两个文本集中在Flutter中相关的知识,希望对你有一定的参考价值。

我有下一个小部件:

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'
        ),
      )
    );
  }
}

看起来像这样:

enter image description here

它有完美的位置,现在我想分别设置数字5000和'Pts'文本,但我没有设法使它工作(中心两个文字像图像),我尝试一排,更多的容器,中心班等等

答案

您可能想要使用mainAxisSize: MainAxisSize.minmainAxisAlignment: 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'
  ),
)

以上是关于如何将两个文本集中在Flutter中的主要内容,如果未能解决你的问题,请参考以下文章

Quartus中代码字体大小的调整方法

如何测量python中代码行之间的时间?

VS中代码对齐等快捷键

iOS 中代码获取当前版本号

如何查看sql server中代码创建的临时表?

如何测量设备+OpenCL+GPU中代码的执行时间