网上搜不到,长时间探索,得出的结论,不容易。

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还有很多技巧(坑),后面整理一下分享出来。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐