Flutter Text自动换行,全网独一份
网上搜不到,长时间探索,得出的结论,不容易。1、问题介绍Flutter的Text默认不支持自动换行,如果文字过长,会溢出到屏幕之外。例如这样的布局,此时Text换行失效:Row->Column->Text2、如何实现换行?(1)找到Text被包裹的所有Row(必须是Row),在Row内部,使用Expanded包住里面的元素(只包裹住通往Text那条线上的元素就行)(2)同时为Text套
·
网上搜不到,长时间探索,得出的结论,不容易。
1、问题介绍
Flutter的Text默认不支持自动换行,如果文字过长,会溢出到屏幕之外。
例如这样的布局,此时Text换行失效:
Row->Column->Text
2、如何实现换行?
找到Text被包裹的所有Row(必须是Row),在Row内部,使用Expanded包住里面的元素(只包裹住通往Text那条线上的元素就行)
这样解决了这个问题,最终支持换行的嵌套关系:
Row->Expanded->Column->Text
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: Column(
children: [Text("很长很长很长很长很长很长很长很长很长很长很长很长很长")],
),
),
],
);
}
3、课后习题(哈哈,给大家留个作业)
例如:Row->Column->Row->Column->Row->Text
问:如何让Text自动换行?
答案:
Widget build(BuildContext context) {
return Row(children: [
Expanded(
child: Column(children: [
Row(
children: [
Expanded(
child: Column(
children: [
Row(
children: [
Expanded(child: Text("1很长很长很长很长很长很长很长很长很长很长很长很长很长"))
],
)
],
)),
],
)
]))
]);
}
4、Column里面放Text天然支持换行,无需特殊处理。
注意的是,Column里放Expaned会报错,因为没有限制Column高度,内部Expanded展开会让高度变得无穷大,因此会报错。需要指定Column高度,例如套一层SizedBox(height:100)
其实Flutter还有很多技巧(坑),后面整理一下分享出来。
更多推荐
已为社区贡献2条内容
所有评论(0)