Question

正在编写一个非常基本的应用程序，该应用程序仅在屏幕上显示数字，您可以使用一些按钮来增加或减少该数字的值。

可以正常工作，但出于某些原因，文本显示经常会变色。我会告诉你我的意思：

上面的文本试图显示的值为20，但是由于某种原因，它正处于挣扎状态。

这似乎只发生在两位数或更高的数值上。我的代码：

class _SinglePlayerModeParentState extends State<SinglePlayerMode> {

@override
void initState() {
  super.initState();
  SystemChrome.setEnabledSystemUIOverlays([]);
  SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft,]);
}

@override
Widget build(BuildContext context) {
Widget numberDisplay = GestureDetector(
  onTap: () {
    print("GestureDetector");
    _incrementBy1();
  },
  child: Center(child: Text(_numberValue.toString(),
    style: TextStyle(
      fontSize: 200.0,
      color: Colors.white,
      ),
    ),
  ),
);

在我重新排列代码以包括以下内容之前，该代码已经显示了这些文本问题：

Widget buttonRow() {
  return Row(
    mainAxisSize: MainAxisSize.max,
    crossAxisAlignment: CrossAxisAlignment.end,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Row(
       mainAxisAlignment: MainAxisAlignment.spaceAround,
       children: <Widget>[
         Padding(
           padding: EdgeInsets.only(left: 40.0, right: 20.0),
           child: FloatingActionButton(
              heroTag: null,
              onPressed: _numberValueMinus5,
              child: Text('-5'),
            ),
         ),
         Padding(
           padding: EdgeInsets.only(left: 20.0, right: 40.0),
           child: FloatingActionButton(
              heroTag: null,
              onPressed: _numberValueMinus1,
              child: Text('-1'),
            ),
         ),
        ],
      ),
      Row(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 40.0, right: 20.0),
            child: FloatingActionButton(
              heroTag: null,
              onPressed: _numberValuePlus1,
              child: Text('+1'),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 20.0, right: 40.0),
            child: FloatingActionButton(
              heroTag: null,
              onPressed: _numberValuePlus5,
              child: Text('+5'),
            ),
          ),
        ],
      ),
    ],
  );
}

return MaterialApp(
  title: 'Bean Counter',
  home: Scaffold(
    backgroundColor: Colors.blueAccent,
    body: Column(
      children: [
        Padding(
          padding: EdgeInsets.only(top: 90.0, bottom: 40.0),
          child: numberDisplay,
        ),
        buttonRow(),
      ],
    ),
  ),
);
}

不知道我在这里可以做些什么，这只是文字！

有什么想法吗？

编辑：测试FittedBox解决方案。

@override
Widget build(BuildContext context) {
  Widget numberDisplay = GestureDetector(
    onTap: () {
      print("GestureDetector");
      _incrementBy1();
    },
    child: Center(
      child: FittedBox(
        fit: BoxFit.scaleDown,
        child: Text(_numberValue.toString(),
          style: TextStyle(
          fontSize: 200.0,
          color: Colors.white,
          ),
        ),
      ),
    ),
  );

}

结果：这试图显示数字30：

如您所见，它仍然无法正确显示。我也尝试了BoxFit.contain，同样的问题。从此参考文献获得的信息：https://docs.flutter.io/flutter/painting/BoxFit-class.html

还有其他想法吗？还是我错误地实现了FittedBox？

编辑：尝试使用AutoSizeText，如下所示。代码：

@override
Widget build(BuildContext context) {
Widget scoreText = GestureDetector(
  onTap: () {
    print("GestureDetector");
    _incrementBy1();
  },
  child: Center(
    child: AutoSizeText(_numberValue.toString(),
      style: TextStyle(
      fontSize: 200.0,
      color: Colors.white,
      ),
    ),
  ),
);

结果：

啊！在清晰的屏幕上显示文本。等级：困难。

颤动的文字显示问题

0 个答案: