目录

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});
 
  @override
  State createState() => _ScTextPageState();
}
 
class _ScTextPageState extends State<ScTextPage> {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}
AI写代码

解析：

• Text('Hello, Flutter!') 创建了一个最简单的文本组件。
• 默认使用 defaultTextStyle，字体大小、颜色取决于应用主题。

        虽然设置了主题，但是没有设置 Scaffold，依然丑，我们加一下Scaffold ：

        加了  Scaffold 样式好看了很多，但是位置有点问题，咱们可以在下面调整一下

3. 自定义样式

    Text 组件可以通过 style 参数自定义字体样式。

class _ScTextPageState extends State<ScTextPage> {
  @override
  Widget 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,
          ),
        ),
      )
    );
  }
}
AI写代码

常用样式参数：

• fontSize：字体大小
• fontWeight：字体粗细（FontWeight.bold、FontWeight.w300 等）
• color：文本颜色
• fontStyle：字体风格（FontStyle.normal、FontStyle.italic）
• decoration：文本装饰（如下划线、删除线）

4. 文本对齐与溢出控制

当文本过长时，可以使用 overflow 参数控制显示方式。

Text(
  'Text 组件是 Flutter 中最常用的 UI 组件之一，用于显示文本内容。',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)
AI写代码

重要参数：

• maxLines：限制最大行数
• overflow：文本溢出处理方式（TextOverflow.ellipsis 显示省略号）

5. 外边距

        在 Flutter 中，Text 组件本身没有直接的 margin 属性，但可以通过以下 4 种方式设置外边距。

5.1 使用 Container 包裹

        这是最常用的解决方案，通过 Container 的 margin 属性控制外边距：

class _ScTextPageState extends State<ScTextPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Container(
          margin: EdgeInsets.all(20), // 四周外边距
          child: Text('带外边距的文本'),
          ),
        )
      )
    );
  }
}
AI写代码

5.2 使用 Padding 组件

        如果只需要单边外边距，推荐使用 Padding 组件：

Padding(
    // padding: EdgeInsets.all(40),//可以all
    padding: EdgeInsets.only(left: 20,right: 40,),//可以上下左右随意设置
    child: Text('左侧缩进20，右侧缩进40'),
)
AI写代码

5.3 在 Row/Column 中使用

        当文本位于行列布局中时，可用 SizedBox 间隔：

Row(
  children: [
    Text('左边文本'),
    SizedBox(width: 20), // 横向间距
    Text('右边文本')
  ],
)
AI写代码

5.4 动态边距调整

        使用 MediaQuery 响应式布局：

Container(
  margin: EdgeInsets.symmetric(
    horizontal: MediaQuery.of(context).size.width * 0.1
  ),
  child: Text('自适应边距文本'),
)
AI写代码

5.5 关键区别说明

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 的方法。http://iyenn.com/rec/1821637.htmlFlutter：StatelessWidget vs StatefulWidget 深度解析-CSDN博客文章浏览阅读631次，点赞44次，收藏29次。在 Flutter 中，所有的 UI 组件都是由 Widget 组成，而 Widget 又分为两大类：StatelessWidget（无状态组件） 和 StatefulWidget（有状态组件）。StatelessWidget 适用于不会随时间变化的 UI，如文本、图标等静态内容；StatefulWidget 则适用于需要动态更新的 UI，如用户交互、动画、网络请求等。本文将深入解析这两种 Widget 的本质区别、适用场景以及生命周期，帮助开发者更好地理解 Flutter 组件的运行机制。http://iyenn.com/rec/1821638.html

Flutter 基础组件 Scaffold 详解-CSDN博客文章浏览阅读403次，点赞15次，收藏16次。Scaffold 主要在 MaterialApp 主题下使用，它是实现Material Design基本视觉布局结构的Widget，它为应用提供了一个可定制的结构，包括 AppBar（应用栏）、Drawer（侧边栏）、FloatingActionButton（浮动按钮）、BottomNavigationBar（底部导航栏） 等。本文将详细解析 Scaffold 的功能和使用方法。http://iyenn.com/rec/1821634.html