flutter - 文字溢出，无法控制

Question

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



但是，如果说明变得更长，它将溢出并隐藏设置按钮:



我已经尝试过使用溢出:Text小部件中的TextOverflow.ellipsis和TextOverflow.clip属性，这没有任何作用。试图将Column和Row更改为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();
                            },
                          ),
                        ],
                      ),

我尝试将“行”放置在具有伸缩性的容器中，但这会导致红色屏幕 flutter 错误。

当我用包装小部件替换行和列时，我得到:

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');
                            },
                          ),
                        ],
                      ),

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

Answer 1

对于TextOverflow来说，框架应该知道当前小部件的边界在哪里。内部Column小部件框架无法确定跨轴(水平)范围。

为了使省略号起作用，您必须将该文本小部件包装在带有父Expanded的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(),
          ),
        ],
      ),
    ),
      ])