flutter 如何在这种情况下启用文本自动换行？

cld4siwp 于 12个月前发布在 Flutter

关注(0)|答案(2)|浏览(317)

我有一个问题，如果文本不包含\n换行符，文本溢出。如何解决这个问题？我已经尝试通过小部件灵活或折叠 Package 此文本，但我得到了唯一的错误：无法命中测试渲染框没有大小。
softWrap：true对于文本小部件也没有改变任何东西。

的数据
这是widget的完整代码：

Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          padding: EdgeInsets.only(left: 15.w),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              InkWell(
                onTap: () {
                  Get.to(() => UserInfoPage(), arguments: {
                    "userId": userId,
                  });
                },
                child: Container(
                  child: !additional
                      ? CachedNetworkImage(
                          imageUrl: avatar,
                          imageBuilder: (context, imageProvider) =>
                              CircleAvatar(
                                  radius: 23.w, backgroundImage: imageProvider),
                          placeholder: (context, url) => CircleAvatar(
                            radius: 23.w,
                            backgroundImage:
                                AssetImage('assets/pics/loading.gif'),
                          ),
                          errorWidget: (context, url, error) =>
                              Icon(Icons.error),
                        )
                      : SizedBox(width: 46.w),
                ),
              ),
              SizedBox(
                width: 15.w,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    child: !additional
                        ? Text(
                            name,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14.w,
                                fontWeight: FontWeight.bold),
                          )
                        : null,
                  ),
                  Container(
                    child: !additional
                        ? SizedBox(
                            height: 5.h,
                          )
                        : null,
                  ),
                  type == 'text'
                      ? Text(message,
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 14.w,
                              fontWeight: FontWeight.w200))
                      : Container(
                          child: ElevatedButton(
                            onPressed: () {
                              _launchURL(message);
                            },
                            child: Row(
                              children: [
                                Text('PDF Anhang',
                                    style: TextStyle(
                                        color: Colors.black,
                                        fontSize: 14.w,
                                        fontWeight: FontWeight.w200)),
                                Icon(
                                  Icons.download,
                                  color: Colors.black,
                                  size: 15.w,
                                ),
                              ],
                            ),
                          ),
                        ),
                  SizedBox(
                    height: 16.h,
                  )
                ],
              ),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.only(right: 15.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(messageTime,
                  style: TextStyle(color: Color(0xff3c3d58), fontSize: 11.w)),
              SizedBox(
                height: 5.h,
              )
            ],
          ),
        )
      ],
    );
  }

字符串
这是一个子widget：

ListView.builder(
                          controller: scrollController,
                          reverse: true,
                          shrinkWrap: true,
                          itemCount: _controller.messageList.length,
                          physics: BouncingScrollPhysics(),
                          scrollDirection: Axis.vertical,
                          padding: EdgeInsets.only(left: 5.w, right: 5.w),
                          itemBuilder: (BuildContext context, int index) {
                            return Message(
                                userId: _controller.messageList[index].authorId,
                                type: _controller.messageList[index].type,
                                name: _controller.messageList[index].name,
                                avatar: _controller.messageList[index].avatar,
                                message: _controller.messageList[index].message,
                                messageTime: _controller.formatDate(
                                    _controller.messageList[index].messageTime),
                                additional:
                                    (_controller.checkAdditional(index)));
                          })

型

flutter

来源：https://stackoverflow.com/questions/77040798/how-to-enable-text-wrap-in-this-case

2条答案

按热度按时间

3gtaxfhh1#

您面临的文本溢出问题可能是由于您的文本不包含任何换行符，而Text小部件试图将其全部显示在一行上。要解决此问题并允许文本在到达其容器边缘时换行，您可以在Text小部件上使用softWrap属性沿着和maxLines属性。
以下是如何修改Text小部件以使其正确换行：

type == 'text'
    ? Text(
        message,
        style: TextStyle(
          color: Colors.white,
          fontSize: 14.w,
          fontWeight: FontWeight.w200,
        ),
        softWrap: true, // Allow text to wrap
        maxLines: null, // Set maxLines to null to allow unlimited lines
      )
    : Container(
        // ... Your ElevatedButton code here ...
      ),

字符串
通过将softWrap设置为true，将maxLines设置为null，Text小部件将在文本到达其容器的边缘时自动换行，并根据需要继续换行。
在显示消息文本的代码中进行此修改，应该可以防止文本溢出问题。

赞(0）回复(0）举报 12个月前

anauzrmj2#

您似乎已经尝试在Text小部件中使用softWrap: true和maxLines: null来启用文本换行，但您仍然面临文本溢出问题。“无法命中测试没有大小的呈现框”错误通常在布局约束未正确设置时发生。要解决此问题并确保文本换行正确，您可以尝试以下操作：
1.将Text小部件 Package 在Flexible或Expanded小部件中：将Text小部件 Package 在Flexible或Expanded小部件中有助于确保它们扩展以占用可用空间并正确 Package 文本。

type == 'text'
    ? Flexible( // Wrap the Text widget in Flexible
        child: Text(
          message,
          style: TextStyle(
            color: Colors.white,
            fontSize: 14.w,
            fontWeight: FontWeight.w200,
          ),
          softWrap: true,
          maxLines: null,
        ),
      )
    : Container(
        // Your ElevatedButton code here
      ),

字符串
1.确保父容器具有约束：您提到的错误“Cannot hit test a render box with no size”，表明父容器可能没有大小约束。请确保Text小部件的父容器具有适当的宽度约束，以便Text小部件知道它们必须使用多少空间。

Container(
  width: /* Set a specific width here */,
  child: type == 'text'
      ? Text(
          message,
          style: TextStyle(
            color: Colors.white,
            fontSize: 14.w,
            fontWeight: FontWeight.w200,
          ),
          softWrap: true,
          maxLines: null,
        )
      : Container(
          // Your ElevatedButton code here
        ),
)

型
1.检查父控件中的其他约束：确保父控件（包括Row或ListView.builder）中没有任何约束阻止子Text控件按需扩展。

赞(0）回复(0）举报 12个月前

我来回答

flutter 如何在这种情况下启用文本自动换行？

2条答案

相关问题

热门标签

最新问答