文本连续溢出,颤动

Posted

技术标签:

【中文标题】文本连续溢出,颤动【英文标题】:Text Overflowing in a Row, Flutter 【发布时间】:2021-09-28 06:27:13 【问题描述】:

由于文本过长,我遇到了布局问题,我尝试使用 Expanded / Flexible 与导致问题的文本填充它所需的空间但它溢出了。我知道这个问题被问了一百次,但我不明白错误在哪里。我尝试将Expanded / Flexible 分别同时应用于所有行/列(主要是我正在尝试布局以尝试修复它),但我仍然有问题......我什至尝试将FittedBoxfit: BoxFit.(all of them) 一起使用。

Container(
          alignment: Alignment.centerLeft,
          child: Column(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 8.0),
                    child: Icon(Icons.directions_car),
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Text 1"),
                          SizedBox(
                            height: 4,
                          ),
                          Text('TEXT 2'),
                        ],
                      ),
                      SizedBox(
                        width: 27,
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('1 World Way, Los Angeles, CA 90045, USA',
                            textAlign: TextAlign.left,
                            ),
                          SizedBox(
                            height: 4,
                          ),
                          Text('FLIGHT 3231'),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        );

根据我的理解,如果我错了,请纠正我,应用 Expanded / FlexibleFlexible 仅占用所需空间,Expanded 占用所有可用空间,同时尊重弹性系数。所以大部分时间我都使用灵活的小部件,但这次它不起作用。

提前感谢您的帮助!

【问题讨论】:

【参考方案1】:

如果文本真的很长,那么使用Expanded 将根据父窗口小部件将文本换行,从而导致字体大小发生变化。您可以考虑使用省略号。

return Container(
  width:300  //give a width of your choice
  child: Text('Any long text',
        overflow:TextOverflow.ellipsis,
         ),
     );

【讨论】:

【参考方案2】:

您可以使用灵活或扩展的小部件您应该尝试以下代码:

Card(
        shape: RoundedRectangleBorder(
          side: BorderSide(
            color: Colors.blue,
          ),
          borderRadius: BorderRadius.circular(15.0),
        ),
        margin: EdgeInsets.all(16.0),
        child: Container(
          padding: EdgeInsets.all(8.0),
          alignment: Alignment.centerLeft,
          child: Column(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Icon(Icons.directions_car),
                  SizedBox(
                    width: 10,
                  ),
                  Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("Text 1"),
                        SizedBox(
                          height: 4,
                        ),
                        Text('TEXT 2'),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 27,
                  ),
                  Flexible(
                    child: Container(
                      child: Column(
                        children: [
                          Text(
                            '1 World Way, Los Angeles, CA 90045, USA',
                            textAlign: TextAlign.left,
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Text(
                            'FLIGHT 3231',
                            textAlign: TextAlign.left,
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),

你的屏幕是这样的:

【讨论】:

【参考方案3】:

尝试使用 Expanded 小部件并根据 UI 填充的预期设置 flex 值。

示例代码:

Center(
        child: Container(
      height: 80,
      color: Colors.yellow,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Icon(Icons.bus_alert),
          ),
          Expanded(
              flex: 1,
              child: Container(
                width: 1,
                color: Colors.green,
                child: Column(
                  children: [Text("Text 1"), Text("Text 1")],
                ),
              )),
          Expanded(
              flex: 3,
              child: Container(
                color: Colors.blue,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text("1 World Way, Los Angeles, CA 90045, USA"),
                    Text("FLIGHT 3231"),
                  ],
                ),
              ))
        ],
      ),
    ))

注意:文字内容使用有限制。我们需要确保根据预期的文本长度设置高度。

【讨论】:

【参考方案4】:

用固定宽度的容器包裹它,然后使用auto_sized_text。或者您可以通过 FittedBox 以固定宽度包装您的 Text 小部件。它会采用同样的方法。随意添加maxLineminFontSizemaxFontSize' in auto_sized_text. Using ExpandedorFlexible` 仅在您的文本长度低于给定宽度时影响容器的大小,并且在这种情况下对您没有帮助。

【讨论】:

以上是关于文本连续溢出,颤动的主要内容,如果未能解决你的问题,请参考以下文章

如果文本较长,则颤动中断文本并扩展容器

Flutter – 连续两个文本,左边一个优雅地溢出

如何在颤动的文本字段中处理标签文本? [关闭]

长按时颤动选择文本

java 读取一个巨大的文本文件,该如何实现 既能保证内存不溢出 又能保证性能 ?

使用按钮单击生成文本字段小部件并保存文本输入颤动