作为开发者我我们第一个页面是什么呢？不出意外应该是登录页面。那么我们从登录页面的搭建过程，来学些flutter吧。下面开启我们的学习之旅。

一个登录页面需要哪一些控件呢？

• 两个输入框（TextField）
• 一个Button按钮（FlatButton）
• 或许还有一些文本Text
• 一个图片（Image）

1.Widget简介

1.1 概念

在Flutter中几乎所有的对象都是一个Widget。与原生开发中“控件”不同的是，Flutter中的Widget的概念更广泛，它不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的 GestureDetector widget、用于APP主题数据传递的Theme等等，而原生开发中的控件通常只是指UI元素。在后面的内容中，我们在描述UI元素时可能会用到“控件”、“组件”这样的概念，读者心里需要知道他们就是widget，只是在不同场景的不同表述而已。由于Flutter主要就是用于构建用户界面的，所以，在大多数时候，读者可以认为widget就是一个控件，不必纠结于概念。

1.2 文本及样式

1.2 Text

Text用于显示简单样式文本，它包含一些控制文本显示样式的一些属性，一个简单的例子如下：

const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }) : assert(data != null), textSpan = null, super(key: key);

const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }): assert(textSpan != null), data = null, super(key: key);

const RichText({
    Key key,
    @required this.text,
    this.textAlign = TextAlign.start,
    this.textDirection,
    this.softWrap = true,
    this.overflow = TextOverflow.clip,
    this.textScaleFactor = 1.0,
    this.maxLines,
    this.locale,
  }) : assert(text != null) ,assert(textAlign != null), assert(softWrap != null), assert(overflow != null),
       assert(textScaleFactor != null), assert(maxLines == null || maxLines > 0), super(key: key);

1.2.1 String data

要显示的字符串

1.2.2 TextStyle style

文本样式，样式属性如表：

该 style 参数可选。省略时，文本将使用最接近的DefaultTextStyle的样式。如果给定样式的TextStyle.inherit属性为true（默认值），则给定样式将与最接近的DefaultTextStyle合并。例如，这种合并行为很有用，可以在使用默认字体系列和大小时使文本变为粗体。

1.2.3 TextAlign textAlign

文本应如何水平对齐enum：

1.2.4 TextDirection textDirection

这个属性估计是给外国人习惯使用，

相对TextAlign中的start、end而言有用（当start使用了ltr相当于end使用了rtl，也相当于TextAlign使用了left）

对于从左到右的文本（TextDirection.ltr），文本从左向右流动；

对于从右到左的文本（TextDirection.rtl），文本从右向左流动。

1.2.5 bool softWrap

某一行中文本过长，是否需要换行。默认为true，如果为false，则文本中的字形将被定位为好像存在无限的水平空间。

1.2.6 TextOverflow overflow

如何处理视觉溢出:

1.2.7 double textScaleFactor

每个逻辑像素的字体像素数

作为textScaleFactor赋予构造函数的值。如果为null，将使用从环境MediaQuery获取的MediaQueryData.textScaleFactor 即手机的像素密度（1.0、1.5、2.0、3.0）

1.2.8 int maxLines

文本要跨越的可选最大行数,

为1，则文本不会换行。否则，文本将被包裹在框的边缘。

1.2.9 String semanticsLabel

图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述

talkback是一款由谷歌官方开发的系统软件,它的定位是帮助盲人或者视力有障碍的用户提供语言辅助

Voiceover功能是APPLE公司在2009年4月新推出的一种语音辅助程序

备注：参考：

https://docs.flutter.io/flutter/widgets/Text-class.html

https://docs.flutter.io/flutter/painting/TextStyle-class.html