时间戳

首页 > 解决方案 > 文字溢出，无法控制

flutter - 文字溢出，无法控制

问题描述

我遇到了一个问题，即行内列内的文本溢出行中的其他内容。这就是描述简短时的样子。

无溢出

但是，如果描述变得更长，它会溢出并隐藏设置按钮：

溢出

我已经尝试在 Text 小部件中使用溢出：TextOverflow.ellipsis 和 TextOverflow.clip 属性，这没有任何作用。试图更改 Column 和 Row to Wrap 小部件

child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          CircleAvatar(
                            backgroundImage: NetworkImage(
                                userData.profilePic ?? kBackupProfilePic),
                            radius: 40.0,
                          ),
                          SizedBox(width: 20.0),
                          Column(
                            children: <Widget>[
                              SizedBox(height: 20.0),
                              Text(
                                userData.name ?? "Cannot find name",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  fontSize: 20.0,
                                ),
                              ),
                              SizedBox(height: 5.0),
                              Text(
                                userData.description ??
                                    "Cannot find description",
                                overflow: TextOverflow.ellipsis,
                                maxLines: 5,
                                style: TextStyle(),
                              ),
                            ],
                          ),
                          SizedBox(width: 40.0),
                          IconButton(
                            icon: Image.asset('assets/cogwheel.png'),
                            iconSize: 50,
                            onPressed: () {
                              openSettings();
                            },
                          ),
                        ],
                      ),

我已经尝试将 Row 放置在具有 Flexible 的容器中，但这会导致红屏 Flutter 错误。

当我用 Wrap 小部件替换 Row 和 Columns 时，我得到：

裹


child: Wrap(
                        direction: Axis.horizontal,
                        children: <Widget>[
                          CircleAvatar(
                            backgroundImage: NetworkImage(
                                userData.profilePic ?? kBackupProfilePic),
                            radius: 40.0,
                          ),
                          SizedBox(width: 20.0),
                          Wrap(
                            direction: Axis.vertical,
                            children: <Widget>[
                              SizedBox(height: 20.0),
                              Text(
                                userData.name ?? "Cannot find name",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  fontSize: 20.0,
                                ),
                              ),
                              SizedBox(height: 5.0),
                              Text(
                                //"brobbi",
                                userData.description ??
                                    "Cannot find description",
                                overflow: TextOverflow.clip,
                                maxLines: 5,
                                style: TextStyle(),
                              ),
                            ],
                          ),
                          SizedBox(width: 40.0),
                          IconButton(
                            icon: Image.asset('assets/cogwheel.png'),
                            iconSize: 50,
                            onPressed: () {
                              PopupLayout(top: topMarginPopupLayout).showPopup(
                                  context, SettingsScreen(), 'Cibus Settings');
                            },
                          ),
                        ],
                      ),

这不能太难。我只想让我的文本换行或剪切，如果它太长会导致溢出。

标签： flutterdart

解决方案

对于TextOverflow框架应该知道当前小部件的边界在哪里。内部Column小部件框架无法确定交叉轴（水平）边界。

要使省略号起作用，您必须将该文本小部件包装在Expanded带有 parent的小部件中Row。或者包裹你的Column内部Expanded会很好。

Row(children:[
        //Circle Avatar here
        Expanded( // Wrap Expanded here
         child:Column(
           children: <Widget>[
             SizedBox(height: 20.0),
            Text(
              "Cannot find name",
            overflow: TextOverflow.ellipsis,
            maxLines:1,
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
          SizedBox(height: 5.0),
          Text(
             "Cannot find description",
            overflow: TextOverflow.ellipsis,
            maxLines: 5,
            style: TextStyle(),
          ),
        ],
      ),
    ),
      ])

推荐阅读