颤动 - 中心溢出的文本和剪辑答案

【问题标题】：flutter - center overflowing text and clip颤动 - 中心溢出的文本和剪辑
【发布时间】：2020-06-17 11:53:05
【问题描述】：

为了实现布局设计，我试图在屏幕外居中和溢出（剪辑）文本（见图）。红色矩形内的剪辑不在屏幕上，应该被剪掉。

我已经可以让 Text 溢出屏幕了：

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

【问题讨论】：

标签： flutter widget overflow clip

【解决方案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
}

【讨论】：

这允许按要求溢出，但会显示溢出警告。我试图将不受约束的框包装到 ClipRect 中（参见修改后的原始帖子），但这并没有改变任何东西。对此有更多提示？
在debug模式下，如果child溢出容器，会在控制台打印警告，溢出的地方会出现黑黄条纹区域。在发布模式下，不会出现该警告。

【解决方案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,),
                ),
      );

【讨论】：

虽然这个解决方案提供了一个有趣的行为，但它不符合要求。此解决方案缩小内容而不是允许溢出。
如果要溢出，请将 FittedBox 替换为 Flexible 并将 textAlign 属性添加到 Text 小部件的中心