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
• 簡書
• 博客園
• 掘金