即使在expanded中，TextOverflow.ellipsis也无法工作

Question

我读过几十篇关于TextOverflow.ellipsis无法工作的堆栈溢出帖子，几乎每个帖子都说“把它包装在一个扩展的小部件中”

这是行不通的。我已经尝试将扩展的小部件放在文本小部件周围，行小部件，容器Widget...nothing正在工作。一旦添加展开的小部件，我就会收到一个错误，因为

请帮帮忙。我会发疯的。我找到的唯一“解决方案”是在Text Widget周围的Container上设置宽度，这不是我想要的，因为我希望Text 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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}