Flutter —— 文本,Container,布局

最新推荐文章于 2024-08-15 17:43:43 发布

LinShunIos

最新推荐文章于 2024-08-15 17:43:43 发布

阅读量1k

点赞数 1

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/LinShunIos/article/details/120966611

版权

本文详细介绍了Flutter中的文本组件Text和RichText的使用，包括文本样式设置和限制。接着讲解了Container作为布局容器的重要性和使用注意事项。重点探讨了Row、Column和Stack布局，以及Alignment、主轴、交叉轴的对齐方式。最后总结了布局部件的特性，如Expanded的使用和布局原则。

摘要由CSDN通过智能技术生成

Flutter —— 文字和弹性盒子布局

1. 文本

1.1 Text

首先创建一个简单的Text，然后输入文本后运行。

class TextDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Text(
      "大扎好，我系轱天乐，我四渣渣辉，探挽懒月，介四里没有挽过的船新版本，挤需体验三番钟，里造会干我一样，爱象节款游戏"
    );
  }
}

在这里插入图片描述
当加上textAlign: TextAlign.center之后，那么文字就会居中对齐。那么对应的.left 和 .right 则分别是左右对齐。

textAlign: TextAlign.center

在这里插入图片描述
文本里还可以添加style，这里有两种添加方式，一种是直接在Text里面的style添加，一种则是声明最终变量后使用。

class TextDemo extends StatelessWidget {

  final TextStyle _textStyle = TextStyle(
    fontSize:39,
  );
  @override
  Widget build(BuildContext context) {
    return Text(
      "大扎好，我系轱天乐，我四渣渣辉，探挽懒月，介四里没有挽过的船新版本，挤需体验三番钟，里造会干我一样，爱象节款游戏",
      textAlign: TextAlign.center,
      style:TextStyle(
        fontSize: 20,
      ),
    );
  }
}

这里也可以声明字符串然后进行字符串的拼接

  final String _lecturer = "LS";
  final String _title = "Flutter";
  //Text里面的文字变成
    "${'《' + _title + '》' + " ————  "+ _lecturer + "  "  }大扎好，我系轱天乐，我四渣渣辉，探挽懒月，介四里没有挽过的船新版本，挤需体验三番钟，里造会干我一样，爱象节款游戏",

运行后得到：
在这里插入图片描述
这里可以通过maxLines来进行最大行数的限制,然后运用overflow进行超出文字的处理。

 maxLines:1
 overflow: TextOverflow.ellipsis,

1.2 RichText

我们在进行开发的时候经常会遇到一段文本中会有不同的字体，不同的颜色展示，RichText就是用来解决这些问题的。
简单的样例：

RichText(
      text: const TextSpan(
        children:  <TextSpan>[
          TextSpan(
            text: "《Flutter》",
            style: TextStyle(
              fontSize: 30,
              color: Colors.black,
            ),
          ),
          TextSpan(
            text: "--",
            style: TextStyle(
              fontSize: 40,
              color: Colors.red,
            ),
          ),