Flutter开发--UI遇到的点点滴滴

本篇文章记录了在Flutter开发过程中遇到的UI问题，以供以后方便查阅。

一、Text换行问题

Text(
        "你好你好你好你好你好你好你好你好你好",
        style: TextStyle(fontSize: 30),
        maxLines: 100,
      ),

直接设置maxLines发现有些场景会无效，比如Row包裹的时候，解决方法使用Expanded，如下：

Expanded(child: Text(
        "你好你好你好你好你好你好你好你好你好",
        style: TextStyle(fontSize: 30),
        maxLines: 100,
      ))，

二、Text 文字下有黄色下划线

导致原因

导致这种情况发生的原因是因为，Text widget 隶属于Material 风格下的组件，如果根节点不是Material 相关组件，则会使用默认带黄色下划线的格式。如果根节点是Material 容器组件，则会采用其Material风格的样式（即不带有下换线）。

解决方式

• 采用根节点为脚手架Scaffold组件

Scaffold(body: content,);

• 采用根节点为Material 组件

Material(child: content);

• 逐个修改Text 组件的style 下的decoration为TextDecoration.none

Text(
        "你好",
        style: TextStyle(
          decoration: TextDecoration.none,
        ),

三、Text 设置文本溢出不生效、多层嵌套时Row的布局方式不生效

需要给Text 、Row设置Size约束

四、Image图片加载不出来问题

大概几个两种可能性：

• 图片路径错误，检查路径

• images在pubspec文件里没有加空格，格式必须和如下图中一致，否则加载不出来。

  
  

• Android Studio本身有缓存，清楚缓存试一试。
  （Vscode 直接跑flutter项目，新增图片是可以直接加载出来的，android studio 无法直接加载）

flutter clean
flutter run

五、导航栏标题在安卓设备下显示在左边

设置AppBar的centerTitle为true

AppBar(
          centerTitle: true,
          elevation: 1.0,
          backgroundColor: Colors.white,
          title:
              Text(widget.model.title!, style: TextStyle(color: Colors.black))
          )

六、输入盘弹出时造成布局溢出Overflow错误

使用一些能滚动的组件包住页面。比如SingleChildScrolView

return Scaffold(
      body: SingleChildScrollView(
        child: Container(),
      ),
);

七、解决Flutter真机debug拔线后闪退

iOS高版本,debug在断开连接时，进入flutter模块会闪退;使用flutter_boast在启动时就闪退。
如无须debug，可运行flutter run --release；如须debug，可设置在debug也能运行release

最后

FlutterUnit收集了目前大量组件的使用，可以供我们更直观得查看组件的使用和代码，是我们学习UI的好工具。

|