flutter-Text等组件出现双层黄色下划线的问题

1. 现象

这天我正在写Flutter项目的页面功能，突然发现我的 Text 文字出现了奇怪的样式，具体如下：

• 文字下面出现了双层黄色下划线
• 文字的空格变得很大，文字的间距也变得很大

我百思不得其解，经过搜索，发现原因如下，特此记录

2. 原因

原来，因为我的页面不是 Material 风格的组件，所以 Text 的样式是默认的，所以出现了上述问题。解决方法也很简单，只需要在页面中使用 Scaffold 做为根节点，或者使用 Material 小部件包裹一下即可。这里注意，Material 小部件自带背景色，记得设置为透明色。

3. 解决方法

• 方法一：使用 Scaffold 做为根节点

Scaffold(body: Center(child: Text('Hello World')));

• 方法二：使用 Material 小部件包裹

Material(color: Colors.transparent, child: Text('Hello World'));

---

本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

往期文章

• flutter-使用extended_image操作图片的加载和状态处理以及缓存和下载
• flutter-制作可缩放底部弹出抽屉评论区效果
• flutter-实现Tabs吸顶的PageView效果
• Vue2全家桶+Element搭建的PC端在线音乐网站
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金