Question

如果文本不适合该区域，我想缩短文本。

例如：

原始文字为曼哈顿下城之旅

缩短文字应为：市区...

当用户单击文本时，

我想在一个小的弹出窗口中显示全文，该弹出窗口将在1秒后消失或单击其他位置。

这是我的相关代码：

Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
      height: MediaQuery.of(context).size.height / 12,
      width: MediaQuery.of(context).size.width,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Padding(
            // we can show related user profile picture in this area,  whe we click it we go to the related user page.
            padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
            child: Row(
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: NetworkImage(userAction.owner.picture),
                ),
                SizedBox(
                  width: 5,
                ),
                Text(userAction.owner.firstName +
                    ' ' +
                    userAction.owner.lastName)
              ],
            ),
          ),
          Text(userAction.actionExplanation),
          Padding(
            // we can show tour photo here when user clicks this area user will go to the related tour page.
            padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    userAction.route.name + 'Text Longg',
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                SizedBox(
                  width: 5,
                ),
                CircleAvatar(
                  backgroundColor: Colors.black26,
                ),
              ],
            ),
          ),
        ],
      ),
    );

我找到了用于缩短文字的答案，但在我的情况下却给出了错误：Insert overflow ellipsis in text

错误日志：

I/flutter (10591): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (10591): The following message was thrown during layout:
I/flutter (10591): A RenderFlex overflowed by 73 pixels on the right.
I/flutter (10591): 
I/flutter (10591): The overflowing RenderFlex has an orientation of Axis.horizontal.
I/flutter (10591): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (10591): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (10591): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (10591): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (10591): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (10591): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (10591): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (10591): like a ListView.
I/flutter (10591): The specific RenderFlex in question is:
I/flutter (10591):   RenderFlex#f2700 OVERFLOWING
I/flutter (10591):   creator: Row ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← Column ← _SingleChildViewport
I/flutter (10591):   ← _ScrollableScope ← IgnorePointer-[GlobalKey#4a6a1] ← Semantics ← Listener ← _GestureSemantics ←
I/flutter (10591):   ⋯
I/flutter (10591):   parentData: offset=Offset(1.0, 1.0) (can use size)
I/flutter (10591):   constraints: BoxConstraints(w=409.4, h=55.0)
I/flutter (10591):   size: Size(409.4, 55.0)
I/flutter (10591):   direction: horizontal
I/flutter (10591):   mainAxisAlignment: spaceBetween
I/flutter (10591):   mainAxisSize: max
I/flutter (10591):   crossAxisAlignment: center
I/flutter (10591):   textDirection: ltr
I/flutter (10591):   verticalDirection: down
I/flutter (10591): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter (10591): ════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

这是有效的解决方案。我对其进行了一些修改以使其正常运行。试试看。

Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
  height: MediaQuery.of(context).size.height / 12,
  width: MediaQuery.of(context).size.width,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
        child: Row(
          children: <Widget>[SizedBox(width: 5), Text("Text 1 ")],
        ),
      ),
      Text("Text 2 "),
      Expanded(
        child: Text(
          'Text which is very long and very very long indeed and getting things ready',
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      SizedBox(width: 5),
      CircleAvatar(backgroundColor: Colors.black26),
    ],
  ),
);

Answer 2

我找不到为什么TextOwerflow.ellipsis给出错误，但是我可以解决我的问题：

我找到了一个可以完成我想做的事情的小部件，小部件名称为const allMovieURLs = [trending, topRated, nowPlaying, upcoming]; const promiseURLs = allMovieURLs.map(url => fetch(url).then(res => res.json())); Promise.all(promiseURLs) .then(dataArr => console.log(dataArr));

我使用以下代码处理文本缩短问题：

Tooltip

enter image description here

缩短我的文本并在一个小的弹出窗口中显示原始版本（TextOverflow.ellipsis提供错误）

2 个答案: