时间戳

首页 > 解决方案 > 如何解决颤振中的“文本溢出.椭圆”？

flutter - 如何解决颤振中的“文本溢出.椭圆”？

问题描述

我无法让我的文本停止扩展屏幕和溢出。我的代码如下：

class OrderTileDisplay extends StatelessWidget {
  final MenuOrderData orderItem;
  final editable;
  OrderTileDisplay(this.orderItem, {this.editable = true});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        GestureDetector(
          onTap: (){},
          child: Container(
            color: Colors.transparent,
            margin: EdgeInsets.symmetric(vertical: 4),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Text(
                      orderItem.quantity.toString() + 'x',
                      style: Title16,
                    ),
                    SizedBox(
                      width: 8,
                    ),
                    Text(
                      orderItem.name, // OVERFLOWS WHEN IT IS A LONGER SENTENCE
                      style: Title18bold,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
                Row(
                  children: [
                    editable? Icon(Icons.edit, color: Colors.grey[200], size: 20,) : Container(),
                    SizedBox(width: 8,),
                    Text("£" + Provider.of<CP>(context).getTotalForItem(orderItem).toStringAsFixed(2),
                      style: Title18bold,),
                  ],
                ),
              ],
            ),
          ),
        ),
Container(... and other stuff)

我曾尝试将 Text 放入容器中，然后是 Expanded 小部件，但我不断收到错误消息。不知道如何解决它。

标签： flutterflutter-layout

解决方案

尝试将您的Rowand包裹Text在一个灵活的内部：

Flexible( //flexible here
  child: Row(
    children: [
      Text(
        orderItem.quantity.toString() + 'x',
        style: Title16,
      ),
      SizedBox(
        width: 8,
      ),
      Flexible( //and here
        child: Text(
          orderItem.name, // no more overflow
          style: Title18bold,
          overflow: TextOverflow.ellipsis, //working as expected
        ),
      ),
    ],
  ),
),

正如文档所述，TextOverflow说明应该如何处理溢出的文本，但如果它的父级没有固定大小，它将不起作用。在这种情况下，Flexible用于限制文本的总大小以防止在达到非常大的宽度时溢出。

推荐阅读