如何在 flutter 中使用列中的文本時刪除文本溢出

Question

我正在使用一行，在其中，每個文本都是一列，我希望每當我的文本溢出時，它應該自動 go 到下一行，我嘗試了一切，但它不起作用。 當我嘗試使用擴展或靈活時，它給出了錯誤。 我嘗試制作 maxlines 2，然后使用擴展/靈活，我還給它一個容器作為父小部件，並使其高度足夠大，仍然錯誤。

這是代碼片段 -

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

Answer 1

嘗試將您不想溢出的文本包裝在 Flexible() 小部件中。 這將確保它不會在行中占用比可用空間更多的空間。

Answer 2

這個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),
  ),
)

Answer 3

您還可以添加或替換 SizedBox 小部件的寬度參數

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

將 Text 子項限制為設備屏幕寬度。

Answer 4

你可以試試這個方法

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

Answer 5

試試下面的代碼希望它對你有幫助。 只需將您的 Text 小部件包裝在 Expanded 的 Flexible

參考這里Expanded

在此處參考Flexible

或者嘗試添加您的 Inside Row 小部件，用Expanded或Flexible將其包裹起來，請參閱我的答案here或here或here希望它對您有所幫助

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

您的結果屏幕->