目錄
1. 引言
2. 基本使用
3. 自定義樣式
4. 文本對齊與溢出控制
5. 外邊距
5.1?使用 Container 包裹
5.2 使用 Padding 組件
5.3 在 Row/Column 中使用
5.4 動態邊距調整
5.5?關鍵區別說明
5.6?設置 margin 無效
6. 結論
相關推薦
1. 引言
? ? Text 組件是 Flutter 中最常用的 UI 組件之一，用于顯示文本內容。它支持樣式自定義、多行顯示、溢出控制等功能，適用于各種文本場景。本文將詳細介紹 Text 組件的使用方式及其重要參數。
2. 基本使用
import 'package:flutter/material.dart';class ScTextPage extends StatefulWidget {const ScTextPage({super.key});@overrideState<ScTextPage> createState() => _ScTextPageState();
}class _ScTextPageState extends State<ScTextPage> {@overrideWidget build(BuildContext context) {return Text('Hello, Flutter!');}
}
解析：
Text('Hello, Flutter!')創建了一個最簡單的文本組件。- 默認使用
defaultTextStyle，字體大小、顏色取決于應用主題。
????????雖然設置了主題，但是沒有設置 Scaffold，依然丑，我們加一下Scaffold ：
? ? ? ? 加了??Scaffold 樣式好看了很多，但是位置有點問題，咱們可以在下面調整一下
3. 自定義樣式
? ? Text 組件可以通過 style 參數自定義字體樣式。
class _ScTextPageState extends State<ScTextPage> {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text('Hello, Flutter!',style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold,color: Colors.blue,fontStyle: FontStyle.italic,decoration: TextDecoration.underline,),),));}
}
常用樣式參數：
fontSize：字體大小fontWeight：字體粗細（FontWeight.bold、FontWeight.w300等）color：文本顏色fontStyle：字體風格（FontStyle.normal、FontStyle.italic）decoration：文本裝飾（如下劃線、刪除線）
4. 文本對齊與溢出控制
當文本過長時，可以使用 overflow 參數控制顯示方式。
Text('Text 組件是 Flutter 中最常用的 UI 組件之一，用于顯示文本內容。',maxLines: 1,overflow: TextOverflow.ellipsis,
)
重要參數：
maxLines：限制最大行數overflow：文本溢出處理方式（TextOverflow.ellipsis顯示省略號）
5. 外邊距
????????在 Flutter 中，Text?組件本身沒有直接的?margin?屬性，但可以通過以下 4 種方式設置外邊距。
5.1?使用 Container 包裹
????????這是最常用的解決方案，通過?Container?的?margin?屬性控制外邊距：
class _ScTextPageState extends State<ScTextPage> {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child:Container(margin: EdgeInsets.all(20), // 四周外邊距child: Text('帶外邊距的文本'),),)));}
}
5.2 使用 Padding 組件
????????如果只需要單邊外邊距，推薦使用?Padding?組件：
Padding(// padding: EdgeInsets.all(40),//可以allpadding: EdgeInsets.only(left: 20,right: 40,),//可以上下左右隨意設置child: Text('左側縮進20，右側縮進40'),
)5.3 在 Row/Column 中使用
????????當文本位于行列布局中時，可用?SizedBox?間隔：
Row(children: [Text('左邊文本'),SizedBox(width: 20), // 橫向間距Text('右邊文本')],
)5.4 動態邊距調整
????????使用?MediaQuery?響應式布局：
Container(margin: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * 0.1),child: Text('自適應邊距文本'),
)5.5?關鍵區別說明
| 屬性/組件 | 作用范圍 | 典型使用場景 |
|---|---|---|
margin | 組件外部空間 | 控制與其他組件的間距 |
padding | 組件內部空間 | 控制文本內容與容器的間距 |
SizedBox | 布局間隔 | 在行列布局中精確控制元素間距 |
5.6?設置 margin 無效
-
檢查父容器是否允許子組件擴展（如?
ListView?需要設置?shrinkWrap: true） -
確保外層沒有被?
Center?或?Align?等布局組件限制?
6. 結論
? ? Text 組件是 Flutter 開發中不可或缺的一部分，它提供了豐富的自定義選項，適用于不同文本場景。掌握 Text 組件的各種參數和特性，可以幫助開發者構建更加美觀和靈活的 UI 界面。
相關推薦
Flutter Widget 體系結構解析-CSDN博客文章瀏覽閱讀710次，點贊23次，收藏15次。Flutter 是 Google 開發的一款跨平臺 UI 框架，它基于 Dart 語言，能夠在 iOS、Android、Web、桌面等多個平臺運行。Flutter 采用 聲明式 UI，并依賴其強大的 Widget 體系來構建界面。本文將深入解析 Flutter 的 Widget 體系結構，幫助開發者理解其運行原理，并掌握構建高效 UI 的方法。https://shuaici.blog.csdn.net/article/details/146066531Flutter：StatelessWidget vs StatefulWidget 深度解析-CSDN博客文章瀏覽閱讀631次，點贊44次，收藏29次。在 Flutter 中，所有的 UI 組件都是由 Widget 組成，而 Widget 又分為兩大類：StatelessWidget（無狀態組件） 和 StatefulWidget（有狀態組件）。StatelessWidget 適用于不會隨時間變化的 UI，如文本、圖標等靜態內容；StatefulWidget 則適用于需要動態更新的 UI，如用戶交互、動畫、網絡請求等。本文將深入解析這兩種 Widget 的本質區別、適用場景以及生命周期，幫助開發者更好地理解 Flutter 組件的運行機制。
https://shuaici.blog.csdn.net/article/details/146066840
Flutter 基礎組件 Scaffold 詳解-CSDN博客文章瀏覽閱讀403次，點贊15次，收藏16次。Scaffold 主要在 MaterialApp 主題下使用，它是實現Material Design基本視覺布局結構的Widget，它為應用提供了一個可定制的結構，包括 AppBar（應用欄）、Drawer（側邊欄）、FloatingActionButton（浮動按鈕）、BottomNavigationBar（底部導航欄） 等。本文將詳細解析 Scaffold 的功能和使用方法。https://shuaici.blog.csdn.net/article/details/146067470?
介紹)
