Question

要实现布局设计，我正在尝试使屏幕外的文本居中和溢出（剪切）（请参见图片）。红色矩形内的剪辑不在屏幕之内，应该被剪辑。

我已经能够让文本溢出屏幕：

Widget build(BuildContext context) {
    return Padding(
            padding: EdgeInsets.fromLTRB(0, 50, 0, 30),
                child: Text(
                  "DASHBOARDasdasdasdasdasdasdas",
                  overflow: TextOverflow.clip,
                  softWrap: false,
                  maxLines: 1,
                  textAlign: TextAlign.center,),

          );
}

但我无法将文本居中

有人对如何实现这一目标有想法吗？

谢谢

更新：

感谢@pungjunghyeon回答，文本现在左右两侧都溢满了。现在，我想剪辑UnconstrainedBox以防止发生溢出警告，但是我无法避免它们。关于这一点还有其他提示吗？

@override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      child: ClipRect(
        child: UnconstrainedBox(

          child: Text(

                "DASHBOARD",
                overflow: TextOverflow.visible,
                textAlign: TextAlign.center,

                style: TextStyle(
                  fontFamily: 'Segoe UI',
                  fontWeight: FontWeight.bold,
                  fontSize: 60,
                  letterSpacing: 20,
                  color: Colors.orange
                ),
            ),
        ),
      ),
    );
  }

Answer 1

请使用 UnconstrainedBox 小部件。

例如：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: appBar,
    body: Container(
      width: MediaQuery.of(context).size.width,
      child: UnconstrainedBox(
        child: Text(
          'DASHBOARD',
          style: TextStyle(fontSize: 80.0),
          overflow: TextOverflow.visible,
          textAlign: TextAlign.center
        ),
      )
    ), //Container
  ); // Scaffold
}

Answer 2

Padding(
            padding: EdgeInsets.fromLTRB(0, 50, 0, 30),
                child: FittedBox(
                  fit:BoxFit.contain,
                  child: Text(
                    "DASHBOARDasdasdasdasdasdasdas DASHBOARDasdasdasdasdasdasdas DASHBOARDasdasdasdasdasdasdas DASHBOARDasdasdasdasdasdasdas DASHBOARDasdasdasdasdasdasdas DASHBOARDasdasdasdasdasdasdas",
                    overflow: TextOverflow.clip,
                    softWrap: false,
                    maxLines: 1,
                    textAlign: TextAlign.center,),
                ),
      );

颤动-居中溢出文本和剪辑

2 个答案: