如何在颤动中使用列中的文本时删除文本溢出

Posted 2023-02-23

【中文标题】如何在颤动中使用列中的文本时删除文本溢出

【英文标题】：How to remove text overflow while using text in column in flutter

【发布时间】：2022-01-23 21:55:32

【问题描述】：

我正在使用一行，在其中，每个文本都是一列，我希望每当我的文本溢出时，它应该自动转到下一行，我尝试了所有方法，但它不起作用。当我尝试使用扩展或灵活时，它给出了错误。我尝试制作 maxlines 2，然后使用扩展/灵活，我还给它一个容器作为父小部件，并使其高度足够大，仍然错误。

这里是代码sn-p -

class RouteItems extends StatelessWidget 
  final int index;
  final NodeElement data;

  RouteItems(required this.index, required this.data);

  @override
  Widget build(BuildContext context) 
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Column(
              children: [
                SvgPicture.asset(
                  'assets/icons/road-straight-line-top-view.svg',
                  height: 15,
                  width: 80,
                ),
                SvgPicture.asset(
                  filterRoutesIcon("$data.node?.type"),
                  height: 30,
                  width: 30,
                ),
                SvgPicture.asset(
                  'assets/icons/road-straight-line-top-view.svg',
                  height: 15,
                  width: 80,
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              child: Container(
                //height: 60,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Text(
                          '$data.node?.name',
                          style: TextStyle(fontSize: 12.0),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                    Text(
                      data.eta!.getFormattedDate('hh:mm a, d MMM'),
                      style: TextStyle(fontSize: 10.0, color: colorDarkGrey),
                    )
                  ],
                ),
              ),
            ),

          ],
        ),
        Align(
          alignment: Alignment.centerRight,
          child: Icon(
            Icons.timer,
          ),
        ),
      ],
    );
  

【问题讨论】：

有个包叫auto size text，可能对你有帮助

【参考方案1】：

这个Row可以去掉，它的目的是什么？

Row(
  children: [
    Text(
      '$data.node?.name',
      style: TextStyle(fontSize: 12.0),
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    ),
  ],
)

您可以尝试删除maxLines: 1，并为您的Text 添加宽度限制，例如用SizedBox 包裹它，这样文本将换行到下一行：

SizedBox(
  width: 200,
  child: Text(
    '$data.node?.name',
    style: TextStyle(fontSize: 12.0),
  ),
)

【讨论】：

谢谢，但是如果我想将溢出的文本添加到新行怎么办。

这就是我要说的，不会有文本溢出，它会被限制到一个特定的width 并且会换行。我是不是误解了什么？

哦，我明白了，只是一个错误。谢谢兄弟。

【参考方案2】：

试试下面的代码希望它对你有帮助。只需将您的 Text 小部件包装在 Expanded 的 Flexible

参考Expandedhere

参考Flexiblehere

或者 尝试添加您的 Inside Row 小部件，用 Expanded 或 Flexible 包装它，参考我的答案 here 或 here 或 here 希望对您有所帮助

       Row(
            children: [
              Expanded(
                child: Text(
                  'data.node?.namedata.node?.namedata.node?.namedata.node?.name'
                  'data.node?.namedata.node?.namedata.node?.namedata.node?.name'
                  'data.node?.namedata.node?.namedata.node?.namedata.node?.name'
                  'data.node?.namedata.node?.name',
                  style: TextStyle(fontSize: 12.0),
                   
                ),
              ),
            ],
          ),

您的结果屏幕->

【参考方案3】：

尝试将您不想溢出的文本包装在 Flexible() 小部件中。这将确保它不会在行中占用比可用空间更多的空间。

【参考方案4】：

您还可以添加或替换 SizedBox 小部件的宽度参数

width: MediaQuery.of(context).size.width,

将 Text 子项限制为设备屏幕宽度。

【参考方案5】：

你可以试试这个方法

Expanded(
Row(
children: [
Card(
child: Text(" My awseome no overflow text"),),
..Other Widgets
]
),
);