时间戳

首页 > 解决方案 > 防止文本在颤动中溢出

flutter - 防止文本在颤动中溢出

问题描述

我正在从数据库加载数据。有时我会得到更长的字符串，这会导致文本溢出。如何使溢出的文本转到下一行？

Padding(
              padding: const EdgeInsets.all(5),
              child: Card(
                color: (list[index]['author'] == widget.user.email) ? Colors.greenAccent : Colors.grey[900],
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    CircleAvatar(
                      radius: 40,
                      backgroundImage: NetworkImage(list[index]['profilePicUrl']),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 60),
                      child: Column(
                        children: <Widget>[
                          Text(list[index]['message'],softWrap: false, overflow: TextOverflow.clip, style: TextStyle(color: (list[index]['author'] == widget.user.email) ? Colors.black : Colors.white, fontSize: 20)),
                          Text(list[index]['author'], style: TextStyle(color: (list[index]['author'] == widget.user.email) ? Colors.grey[800] : Colors.grey, fontSize: 15)),
                      ],
                      ),
                    ),
                  ],
                ),
              ),
            );

标签： flutterflutter-layout

解决方案

您需要将您的Columnin包装起来Expanded，这是您的小部件树的示例代码：

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Expanded( // <-- This is what you need
      child: Column(
        children: <Widget>[
          Text(
            'This is very long line which can overflow on small screen devices easily',
            softWrap: false,
            overflow: TextOverflow.ellipsis,
          ),
          Text('author'),
        ],
      ),
    ),
  ],
)

推荐阅读