TextOverflow.ellipsis 甚至在展开后也不起作用

Question

我已经阅读了数十篇关于 TextOverflow.ellipsis 无法正常工作的堆栈溢出帖子，并且几乎每个帖子都只是说“将其包装在扩展的小部件中”

这是行不通的。我尝试将 Expanded 小部件放在 Text 小部件、Row 小部件、Container 小部件周围……没有任何效果。一旦我添加了扩展小部件，我就会收到一个错误，因为已经有一个扩展小部件用于

请帮忙。我会失去理智的。我发现的唯一“解决方案”是在文本小部件周围的容器上设置宽度，这不是我想要的，因为我希望文本容器能够灵活适应屏幕大小。

错误：

RenderBox was not laid out: RenderConstrainedBox#96e5e relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart': Failed assertion: line 1930 pos 12: 'hasSize'

代码：

Expanded(
      child: Container(
        padding: EdgeInsets.fromLTRB(_centeredPadding, _paddingTop, 0, 24),
        child: Row(
          mainAxisAlignment: center ? MainAxisAlignment.center : MainAxisAlignment.spaceBetween,
          crossAxisAlignment: size == 'mobile' ? CrossAxisAlignment.start : CrossAxisAlignment.center,
          children: [
            Row(
              children: [
                Container(
                  margin: EdgeInsets.only(right: 15),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(100),
                    child: Image(
                      width: _iconSize,
                      image: AssetImage('assets/images/users/user-3.png'),
                    ),
                  ),
                ),
                Text(
                  'Really long name does not fit',
                  overflow: TextOverflow.ellipsis,
                  style: textStyle,
                ),
              ],
            ),
            IconButton(
              icon: Icon(Icons.settings),
              padding: EdgeInsets.only(left: 14, right: 16),
              onPressed: () {
                Navigator.pushNamed(context, 'home/settings');
              },
            ),
          ],
        ),
      ),
    );

重申一下，这不是解决方案：

Expanded(
  child: Text(
    'Really long name does not fit',
    overflow: TextOverflow.ellipsis,
    style: textStyle,
  ),
),

Picture of the non-working code

What I wish it looked like

Answer 1

您可能遇到了错误的小部件嵌套问题（Row、in Row、in Row）...

这是您尝试仅使用一行来实现的结果的简化示例。

根据您的需要进行调整。

import 'package:flutter/material.dart';

class CustomHeader extends StatelessWidget {
  const CustomHeader({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: Row(
        children: [
          CircleAvatar(
            radius: 30.0,
            backgroundColor: Colors.blue,
          ),
          SizedBox(width: 10.0),
          Expanded(
            child: Text(
              'Really long name does not fit' * 3, // Yes, you can multiply strings in dart :)
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          SizedBox(width: 10.0),
          Icon(Icons.settings),
          SizedBox(width: 10.0),
          Container(
            padding: EdgeInsets.all(5.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              color: Colors.cyan[700],
            ),
            child: Text(
              'Give',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}