Flutter 基础组件 Text 详解

目录

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