如何在 Flutter 中修复文本溢出问题并使卡片变大？答案

【问题标题】：How to fix text overflow problem and make a card larger in Flutter?如何在 Flutter 中修复文本溢出问题并使卡片变大？
【发布时间】：2020-07-02 16:30:58
【问题描述】：

我正在用颤振构建一个应用程序，我想在列表视图中显示几张卡片。我面临的问题如下：

当我在列中有文本小部件时出现文本溢出。我通过将文本小部件包装在扩展小部件中来半修复此问题，但它看起来有点截断（例如“问题：如何你做问题 2 吗？”（参见下图））。
我想制作一张更大的卡片，它有更高的高度和更多的空间/空白空间。我尝试将列小部件包装在容器中并手动设置高度，但这似乎没有任何作用。

这是这张卡片现在的样子：

相关代码如下：

                             itemBuilder: (context, index) => snapshot
                                              .data.metadata.isFromCache
                                          ? _buildListItem(context,
                                              snapshot.data.documents[index])

Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
    return document.data['didProblems']
        ? Card(
            child: Center(
              child: Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('${document.data['fullName'].toString()}'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Text('HW Assignment: ${document.data['title'].toString()}'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Text('Problems attempted: ${document.data['problems']}'),
                    Expanded(child: Text('Question: ${document.data['question'].toString()}'), flex: 1,),
                  ],
                ),
              ),
            ),
          )

感谢任何帮助。提前致谢！

【问题讨论】：

标签： flutter dart

【解决方案1】：

如果你使用 listview 然后将itemExtent 属性设置为你的方便，例如

ListView.builder(
      itemCount: 10,
      itemBuilder: (_, int index) => YourWidget(),
      itemExtent: 150,
    ),

【讨论】：

【解决方案2】：

即使将文本包装在 Expanded 中，您也必须将 overflow 设置为 TextOverflow.clip

试试这个

 Expanded(child: Text('Question: ${document.data['question'].toString()}', overflow: TextOverflow.clip), flex:1,),

【讨论】：