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'文本的样式，但是我没有设法使它起作用（像图像一样居中显示两个文本），我尝试使用Row，更多容器，中心舱等，等等。

Answer 1

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

Answer 2

这是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中将两个文本居中

2 个答案: