在一行 3 个文本小部件中用省略号（溢出时）剪辑第一个小部件

Question

我有一排 3 个文本小部件。我希望前两个保持在一起，第三个在行尾对齐。第一个文本有可能导致溢出，当发生这种情况时，我只希望第一个文本被省略号截断。请注意，第二个和第三个文本的长度也可能不同，因此应进行剪裁的宽度不同。

我尝试了各种方法，RichText、Spacer、Expanded、Flexible 等。我最接近的解决方案是：

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Flexible(
      child: Text(
          "Left most text that overflows the screen and creates an ellipsis",
          overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      "Xyz",
      style: customStyle1,
    ),
    Text(
      " 10:20",
      style: customStyle2,
    ),
  ],
),

这就是它的结果（添加了颜色）。如果时间停留在第一行右边，问题就解决了。

在最后两个文本之间添加一个间隔符会导致第一个仅占据屏幕的一半，即过早添加了省略号。添加扩展到最后一个文本会导致

"NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE" bug.

此图像中的第一行和最后一行是所需的输出。

我该如何做到这一点？任何人都可以解释使用上述 Spacer 或 Expanded 的问题吗？

Answer 1

可以使用约束框

Row(
 children: [
 ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: MediaQuery.of(context).size.width / 2,
  ),
   child: const Text(
     "Left most text that overflows the screen and creates an ellipsis",
     overflow: TextOverflow.ellipsis,
   ),
 ),
 const Text('xyz'),
 const Spacer(),
 const Text('10:20'),
 ],
),

Answer 2

我们可以使用两行来对齐项目，Flexible 和文本 softWrap 来修复溢出

 Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: const [
          Flexible(
            child: Text(
              "Left most text that overflows the screen and creates an ellipsis",
              overflow: TextOverflow.ellipsis,
              softWrap: false,
            ),
          ),
          Text("Xyz"),
        ],
      ),
    ),
    Text(
      " 10:20",
    ),
  ],
),

Answer 3

///you can use SizedBox and assign width and you can set your text. This is not the perfect solution but this works for me. 
    import 'package:flutter/material.dart';
    
    class MyAseet extends StatefulWidget {
      const MyAseet({Key? key}) : super(key: key);
    
      @override
      _MyAseetState createState() => _MyAseetState();
    }
    
    class _MyAseetState extends State<MyAseet> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Padding(
            padding: const EdgeInsets.only(left:20.0,top: 50),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: 200,
                      child: Text(
                        "Left most text that overflows the screen and creates an ellipsis",
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      ),
                    ),
                    Text(
                      "Xyz",
                      style: TextStyle(color: Colors.grey),
    
                    ),
                    Container(
                      color: Colors.blue,
                      child: Text(
                        " 10:20",
                      ),
                    ),
                  ],
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: 200,
                      child: Text(
                        "Left most text that overflows the screen and creates an ellipsis",
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      ),
                    ),
                    Text(
                      "Xyz",
                      style: TextStyle(color: Colors.grey),
    
                    ),
                    Container(
                      color: Colors.blue,
                      child: Text(
                        " 10:20",
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      }
    }

在一行 3 个文本小部件中用省略号（溢出时）剪辑第一个小部件

Clip the 1st widget with ellipsis (on overflow) in a Row of 3 Text widgets

dart

flutter

flutter-layout