Flutter RichText换行问题(未解决)

最新推荐文章于 2023-01-06 18:22:29 发布
最新推荐文章于 2023-01-06 18:22:29 发布
阅读量2k 收藏
点赞数
分类专栏： Flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kgdtl/article/details/124917907
版权
博客讨论了在Container中使用RichText时遇到的换行问题，特别是TextSpan内容在特定条件下如何换行。内容指出，当Container宽度有限时，换行会在冒号后的空格或独立WidgetSpan处发生，而非期望的_textSpan内容后。博主寻求解决方案，并邀请读者在评论区分享答案。
摘要由CSDN通过智能技术生成 
Container(
    width: 100,
    child: RichText(
        text: TextSpan(children: [
            TextSpan(
                text: '你好: ',
                style: CommonTextStyle.text16,
            ),
            TextSpan(
                text: _str,
                style: CommonTextStyle.hint16),
        ]
            )
    ),

预想显示结果：

你好: kljfdlsflksdflskflajflad

fkalfaf

第一个textspan里面的内容 "你好：'， 冒号后面添加了空格， 当整个Container不够长时，会直接从冒号后面换行， 而不是在_str的内容后换行例如:

你好:

kljfdlsflksdflskflajfladfkalfaf

又测试了在里面添加图片或者其他widget

当container不够长时， 换行位置都会在空格或者单独的widgetspan里面换行

谁有答案的可以在评论区打上,谢谢

kgdtl
关注
专栏目录
【Flutter】Flutter 实现 Text 自动换行 解决长文本溢出问题
Code Metaverse
07-11 6776
在 Flutter 开发中，我们经常会遇到需要显示长文本的情况。如果文本过长，超出了显示范围，就会出现溢出的问题。为了解决这个问题，Flutter 提供了 Text 组件的自动换行功能。本文将详细介绍如何使用 Flutter 的 Text 组件实现自动换行，以解决长文本溢出的问题。
Flutter - 控件之 RichText
iOS_PING的专栏
10-15 2926
Flutter - 控件之 RichTextRichTextTextSpan效果图Text.rich RichText RichText富文本，可以显示多个不同样式的文本，如一段文本中显示不同字体颜色，可点击交互等。 1、RichText参数解析： RichText({ Key key, @required this.text, //文本部件，TextSpan ...
Flutter Text或者RichText不换行的问题
weixin_30448603的博客
08-14 2456
如果它是您要包装的单个文本小部件，则可以使用Flexible或Expanded小部件。 Expanded( child: Text('Some lengthy text for testing'), ) 要么 Flexible( child: Text('Some lengthy text for testing'), ) 需要使用Expanded...
Flutter 2(1)，还在等机会
m0_64604178的博客
12-09 626
@override Widget build(BuildContext context) => MaterialApp( title: ‘Flutter TextField Key Binding Demo’, home: Scaffold(body: UnforgivingTextField()), ); } /// A text field that clears itself if the user tries to back up or correct /// something. class
flutter 实现文本自动换行
weixin_44911775的博客
04-01 4480
Widget dynamicTxtSection = Container( margin: const EdgeInsets.only(left:16.0,right: 100.0), child: const Flexible( child: SelectableText.rich( TextSpan( children: [ TextSpan( text: ...
Flutter Text自动换行，全网独一份
星光的专栏
01-28 1万+
网上搜不到，长时间探索，得出的结论，不容易。 1、问题介绍 Flutter的Text默认不支持自动换行，如果文字过长，会溢出到屏幕之外。 例如这样的布局，此时Text换行失效： Row->Column->Text 2、如何实现换行？ （1）找到Text被包裹的所有Row（必须是Row），在Row内部，使用Expanded包住里面的元素（只包裹住通往Text那条线上的元素就行） （2）同时为Text套一个约束盒，ConstrainedBox，指定一个最大高度就好了。 这样解决了
flutter 阿里 号码认证_我对Flutter的第一次失望
weixin_39597318的博客
10-21 323
老孟导读：此文翻译自：https://medium.com/@suragch/my-first-disappointment-with-flutter-5f6967ba78bf 我喜欢Flutter。我喜欢开发一次并让代码在Android和iOS上运行。我喜欢节省多少时间。我喜欢现在成为一名Web开发人员，而无需做任何额外的工作。我喜欢hot reload。我喜欢通过将小部件组合到布局中来快速...
flutter TextField换行自适应的实现
08-25
本文将详细探讨如何在Flutter中实现TextField的换行自适应效果，包括自动调整高度以适应输入内容的增长，同时保持预设的内外边距。 首先，我们要明确实现这个效果需要关注的关键点： 1. **自定义间距**：可以通过`...
Flutter TextFiled换行显示
徐代龙的技术专栏
07-11 7434
在Flutter中，TextFiled中一直输入内容的话，会一直向最后显示，只有一行，这样的功能在开发中很少有用到。这时候我们只需要在TextFiled中进行设置。 Container( alignment: Alignment.topLeft, child: TextField( maxLines: 10, ...
Flutter Text 自动换行
weixin_42600128的博客
01-06 3525
在 Flutter 中，可以使用 Text 组件来显示文本。默认情况下，Text 组件会自动换行，只要文本内容超过其容器的宽度。 你可以使用 Text 组件的 softWrap 属性来控制文本是否自动换行。设置 softWrap 为 true (默认值)，文本就会自动换行；设置 softWrap 为 false，文本就不会自动换行，而是会超出其容器的边界。 例如，以下代码创建了一个不会自动换行的 ...
Flutter 学习之路 –TextView富文本
01-07
第一步：在pubspec.yaml 文件中 导入   url_launcher: ^3.0.3  在lib main.drat中导入包 import 'package:url_launcher/url_launcher.dart' import 'dart:io'; import 'dart:math'; import 'package:flutter/cupertino.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:url_l
flutter的Text内容自动换行导致留白问题
周末
01-19 5558
flutter的文本内容在中英文混排，或中文与数字或特殊符号或英文字母时，文本会被自动换行，这样会导致，换行后上一行末尾留出很大的空白区域。 解决思路： 1、把每个字符插入一个0宽的字符， \u{200B} import 'package:characters/characters.dart'; class Strings { ///防止文字自动换行 static String autoLineString(String str){ if(checkStrNoEmpty(str)){
flutter中富文本 图文排列
大灰狼的小绵羊哥哥的博客
06-19 1142
使用WidgetSpan能够存放不是TextSpan格式的Widget Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Expanded( flex: 1, child: Text.rich( TextSpan( children:[ W.
element dialogand文本域换行_Flutter文本组件Text的基本使用
weixin_39573598的博客
01-25 306
文本控件 Text在android中，一个页面，一般是用 Activity 或者是一个Fragement 来加载显示出来的，而其中的 一个View 或者 一个布局文件(layout.xml) 都可以作为一个页面的根元素在Flutter中，Widget 可以理解为 用来代替 activity fragement view viewgroup 等等。Widget用来配置显示的页面View信息，最后El...
flutter Text文本，中英文混合，或则英文单词自动换行处理
lhj_android的博客
08-16 3403
之前在安卓原生遇到过，当中英文混合，或者中文与数字或者特殊符号，或则英文单词时，文本会被自动换行，这样会导致，换行时上一行可能会留很大的空白区域，今天群里也有人问题过此种情况。 下面给出我在项目中的解决方案，当然有更好的解决方案也希望能分享分享。 解决思路是把每个字符插入一个0宽的字符，大家网上搜索也能搜索带是什么是0宽字符 \u{200B} 于是我们可以对String进行一下扩展方便后续使用 下面是我对String的一个扩展实现 import 'package:characters/characters.
Flutter中text文本换行
热门推荐
qq_42945853的博客
04-22 1万+
如text中的文本可能会很长，则可能会出现父组件越界问题，这是单纯修改子的布局或者设置text的换行不解决问题，可以考虑使用flexble或者expanded组件。 这两个组件都需要作为row或者column的子组件使用，如主轴空间不够用，则会自动扩充至次轴，实现自动换行。 Expanded会尽可能的充满分布在Row, Column, or Flex的主轴方向上； Flexible也是为小部件提供空间的，但是不会要求子空间填满可用空间。 使用Flexible的例子： new Row( mainAx
如何禁止RICHTEXT控件自动换行？（改编）
欢迎来到 Balloonman2002 之家,:)
01-24 2643
如何禁止RICHTEXT控件自动换行？问题描述：如何禁止RICHTEXT控件自动换行？解决方案：第一步：声明外部函数：Function ulong SendMessage(ulong hwnd,ulong wMsg,ulong wParam,ulong lParam) LIBRARY "user32.dll" ALIAS FOR "SendMessageA" 第二步：在
flutter 实现自适应、自动换行、相对布局
星光的专栏
01-19 4067
两个控件，为了实现文本2紧靠文本1右侧。 如果随着文本1变长，会将文本2顶到右侧，最终文本1继续边长会自动换行。 Android实现： <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:layout_w..
Flutter 布局Layout，富文本与状态管理State
wyyrls的博客
01-17 358
Flutter 布局Layout，富文本与状态管理State 1. 普通文本 Flutter中普通文本使用Text（）函数创建，常见的属性如下： textAlign： 文本位置 enum TextAlign { left, right, center, justify,///拉伸以软换行符结尾的文本行，以填充其宽度容器。以硬换行符结尾的行朝[start]边缘对齐。 start, ///在容器...
flutter textfield 换行
最新发布
09-06
Flutter的TextField组件默认是单行显示文本的，如果需要实现多行文本输入并换行显示，可以通过设置TextField的属性来实现。 一种常见的实现方式是使用TextField的maxLines属性来设置最大行数，并将keyboardType属性设置为TextInputType.multiline，这样可以让TextField支持多行输入。同时，可以将TextField的textAlignVertical属性设置为TextAlignVertical.top，这样可以保证文字在TextField的顶部显示。示例代码如下： ``` TextField( maxLines: null, // 设置为null表示支持无限行数输入 keyboardType: TextInputType.multiline, // 设置为多行输入类型 textAlignVertical: TextAlignVertical.top, // 文字在顶部显示 ) ``` 此外，如果需要限制输入的行数，可以通过设置TextField的maxLines属性为指定的行数，例如设置为3表示最多显示3行。示例代码如下： ``` TextField( maxLines: 3, // 最多显示3行 keyboardType: TextInputType.multiline, // 设置为多行输入类型 textAlignVertical: TextAlignVertical.top, // 文字在顶部显示 ) ``` 通过上述的设置，就可以实现在Flutter中使用TextField实现多行文本输入并换行显示的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值