Flutter 文本未设置在集装箱摆动的中心

发布于03月05日

当文本容器大小随字体大小减小时，文本不设置在中心.如何解决这个问题是在集装箱尺寸以下进行的.

  Container(
              height: height,
              width: width,
              alignment: Alignment.center,
              decoration: _isSelected
                  ? BoxDecoration(
                color: Colors.transparent,
                border: Border.all(
                  width: 2,
                  color: Colors.black,
                ),
              )
                  : null,

              child: Align(
                alignment: Alignment.center,
                child: Text(
                  _displayText.isEmpty ? 'Enter Text' : _displayText,
                  textAlign: TextAlign.center,
                  overflow: TextOverflow.visible,
                  maxLines: 1,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: fontSize,
                  ),
                ),
              ),
            ),

推荐答案

使用FittedBox小部件自动zoom 文本以适应容器的大小，同时保持文本居中.

Container(
  height: height,
  width: width,
  alignment: Alignment.center,
  decoration: _isSelected
      ? BoxDecoration(
          color: Colors.transparent,
          border: Border.all(
            width: 2,
            color: Colors.black,
          ),
        )
      : null,
  child: FittedBox(
    fit: BoxFit.scaleDown, // Scale down the text to fit within the container
    alignment: Alignment.center,
    child: Text(
      _displayText.isEmpty ? 'Enter Text' : _displayText,
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Colors.black,
        fontSize: fontSize,
      ),
    ),
  ),
),