Flutter container text 组件详解

Flutter文章目录

Container 组件是一个常用的可视化容器，可以用来包裹其他 Widget ，并且它可以设置自己的宽和高，边距，背景颜色等等。

而 Text 组件则是用来显示文本的 Widget ，可以设置字体大小，颜色，字体样式等等。

---

提示：如有雷同、请联系作者删除

---

前言

Flutter 是一款功能强大的跨平台移动应用程序开发框架，它可以帮助开发者快速构建高质量的原生用户界面。其中，Container 和 Text 组件是 Flutter 中常用的基础组件之一，可以用来包裹其他 Widget 和显示文本内容。通过合理使用 Container 和 Text 组件，可以轻松实现各种复杂的界面布局和文本展示效果。在本文中，我们将对 Container 和 Text 组件进行详细介绍，包括它们的属性、用法以及使用案例。希望通过本文的学习，能够帮助你更好地理解和应用 Flutter 中的 Container 和 Text 组件。

---

一、Container

1. container 组件详解

代码如下（示例）：

class MyApp extends StatelessWidget{
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: const EdgeInsets.only(top: 20),
        alignment: Alignment.center, // 配置Container内部的元素对齐方式
        width: 100,
        height: 100,
        // transform: Matrix4.rotationZ(0.2), // 配置Container的旋转角度
        // transform: Matrix4.diagonal3Values(1.2, 1, 1), // 配置Container的缩放
        // transform: Matrix4.skewX(0.2), // 配置Container的倾斜
        // transform: Matrix4.skewY(0.2), // 配置Container的倾斜
        // transform: Matrix4.translationValues(10, 10, 0), // 配置Container的位移
         transform: Matrix4.identity(), // 配置Container的变换矩阵
        // transformAlignment: Alignment.center, // 配置Container的变换的原点
        // transformAlignment: Alignment.topRight, // 配置Container的变换的原点
        // transformAlignment: Alignment.bottomLeft, // 配置Container的变换的原点
        // transformAlignment: Alignment.bottomRight, // 配置Container的变换的原点
        // transformAlignment: Alignment.topCenter, // 配置Container的变换的原点
        // transformAlignment: Alignment.bottomCenter, // 配置Container的变换的原点
        // transformAlignment: Alignment.centerLeft, // 配置Container的变换的原点
        // transformAlignment: Alignment.centerRight, // 配置Container的变换的原点
        // transformAlignment: Alignment(0.2, 0.2), // 配置Container的变换的原点
        decoration: BoxDecoration(
          color: Colors.red, // 配置Container的背景色
          border: Border.all( // 配置Container的边框
            color: Colors.blue, // 边框颜色
            width: 2, // 边框宽度
          ),
          borderRadius: const BorderRadius.all(Radius.circular(100),// 配置Container的圆角
          ),
          boxShadow: const [
            BoxShadow( // 配置Container的阴影
              color: Colors.grey, // 阴影颜色
              offset: Offset(2, 2), // 阴影偏移量
              blurRadius: 10, // 阴影模糊程度
            ),
          ],
          // gradient: const LinearGradient( // 配置Container的渐变色 线性渐变
          //   colors: [Colors.red, Colors.blue],
          // ),
          // gradient: const RadialGradient( // 配置Container的渐变色 环形渐变
          //   colors: [Colors.red, Colors.blue],
          // ),
          gradient: const SweepGradient( // 配置Container的渐变色 扫描渐变
            colors: [Colors.red, Colors.blue],
          ),
        ),
        child: const Text(
          'Hello',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 28,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

2. 用container实现一个自定义按钮

代码如下（示列）：

class MyButton extends StatelessWidget{
  const MyButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 20),
      alignment: Alignment.center, // 配置Container内部的元素对齐方式
      width: 200,
      height: 40,
      decoration: const BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.circular(8)),
      ),
      child: const Text(
        '自定义按钮',
        style: TextStyle(
          color: Colors.white,
          fontSize: 14,
        ),
      ),
    );
  }
}

二、text 组件详解

1.text

代码如下（示例）：

class MyText extends StatelessWidget{
  const MyText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 20),
      width: 200,
      height: 200,
      decoration: const BoxDecoration(
        color: Colors.red,
      ),
      child: const Text(
        'Hello world',
        textAlign: TextAlign.center,
        maxLines: 1, // 最大行数
        overflow: TextOverflow.ellipsis, // 超出部分省略号
        style: TextStyle(
          fontSize: 28,
          fontWeight: FontWeight.bold,
          color: Colors.white,
          letterSpacing: 10, // 字间距
          wordSpacing: 10, // 单词间距
          height: 1.5, // 行高
          fontStyle: FontStyle.italic, // 斜体
          textBaseline: TextBaseline.alphabetic, // 文字基线
          shadows: [
            Shadow(
              color: Colors.grey,
              offset: Offset(2, 2),
              blurRadius: 10,
            ),
          ],
          decoration: TextDecoration.underline, // 文字装饰线
          decorationColor: Colors.blue, // 文字装饰线颜色
          decorationStyle: TextDecorationStyle.dashed, // 文字装饰线样式
          decorationThickness: 2, // 文字装饰线粗细
          fontFamily:  'Courier', // 字体
    ),
      ),
    );
  }
}

总结

1. Container 组件是一个常用的可视化容器，可以用来包裹其他 Widget ，并且它可以设置自己的宽和高，边距，背景颜色等等。

2. Text 组件是用来显示文本的 Widget ，可以设置字体大小，颜色，字体样式等等。同时，它还支持多种对齐方式、文本的截断处理等。

3. 在使用 Container 和 Text 组件时，我们可以通过设置它们的属性来实现不同的布局和效果，比如设置 Container 的背景颜色、 Text 的字体大小等。

4. Container 和 Text 组件可以灵活地配合使用，实现各种复杂的布局和文本展示效果。

5. 在实际开发中，我们需要根据具体的需求，灵活地选择和应用 Container 和 Text 组件，以达到最佳的用户体验和视觉效果。

希望以上总结可以帮助您更好地理解和应用 Flutter 中的 Container 和 Text 组件。