flutter text 左对齐_03、从头开始整 Flutter--基本小部件-Text&Image

本节大纲

教程简介

1、阅读对象

本篇教程适合新手阅读，老手直接略过

2、教程难度

初级，本人水平有限，文章内容难免会出现问题，如果有问题欢迎指出，谢谢

正文

一、组件化思想

我们前面说过 Flutter 是借鉴了 React 的组件化思想，一切皆组件「小部件」，在 Flutter 中一个个组件就是一个类「当然我们知道类就有属性和方法」，为什么要有组件化思想，这是前端的一大进步「可以说 React 功不可没」，组件化其实就是封装的粒度，把小小的按钮或是界面封装成一个个小组件便于维护和扩展「也便于团队协作」，团队中可以封装一些公共的组件，后期使用即可「一次编写，到处使用」，再重声一遍在 Flutter 中小部件和我们说的组件是一个东西「只不过我习惯说组件，保不齐会两者都说，大家知道是一个东西即可」

二、Flutter 中的组件

Flutter 中的组件分为两种

1、无状态组件

无状态组件定义

无状态组件就是不能修改状态的组件，也就是传递过去的值不能动态修改，我们说过组件是一个类，无状态组件就是继承 StatelessWidget 类的组件

无状态组件声明

class CustomWidget extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Container(

);

}

}

即通过继承 StatelessWidget 类并重写其 build 方法就可以声明一个无状态组件「build 方法就相当于 React 中的 Render 方法」

2、有状态组件

有状态组件定义

有状态组件和无状态组件是相对的即我们想动态修改数据的时候必须定义的组件，它是继承 StatefulWidget 类的组件

有状态组件声明

class CustomWidget extends StatefulWidget {

@override

_CustomWidgetState createState() => _CustomWidgetState();

}

class _CustomWidgetState extends State {

@override

Widget build(BuildContext context) {

return Container(

);

}

}

和无状态组件声明还是有点区别要重写 createState 方法并且重写 State 的 build 方法来构建界面

总之不管是无状态组件还是有状态组件都是通过重写 build 方法来构建界面的「至于底层是如何渲染界面的，后面专门开一篇来说」，以上两种定义组件的基本骨架一定要把它记下

三、组件 Text & Image

1、文本组件 Text

先来个最简单的组件文本组件--Text 可以定义一个文本并且声明其颜色字体大小，颜色、对齐方式等样式

Text 常用属性

属性

含义

style

文本的样式

textAlign

文本的对齐方式

textDirection

文本的装饰，比如下划线等

locale

用于选择区域特定字形的语言环境，很少使用

softWrap

是否自动换行，超出一行时设置

overflow

超出一行的处理方式，比如加...或是直接裁断

textScaleFactor

文本缩放的倍率

maxLines

设置文本的最大行数

semanticsLabel

图像描述

Text 例子

(1)、普通文本

不废话，先看效果

显示效果

核心代码

普通文本组件代码

(2)、文本居左对齐「默认方式」

效果图

显示效果

核心代码