作為開(kāi)發(fā)者我我們第一個(gè)頁(yè)面是什么呢扭弧？不出意外應(yīng)該是登錄頁(yè)面阎姥。那么我們從登錄頁(yè)面的搭建過(guò)程，來(lái)學(xué)些flutter吧鸽捻。下面開(kāi)啟我們的學(xué)習(xí)之旅呼巴。

一個(gè)登錄頁(yè)面需要哪一些控件呢？

• 兩個(gè)輸入框（TextField）
• 一個(gè)Button按鈕（FlatButton）
• 或許還有一些文本Text
• 一個(gè)圖片（Image）

1.Widget簡(jiǎn)介

1.1 概念

在Flutter中幾乎所有的對(duì)象都是一個(gè)Widget御蒲。與原生開(kāi)發(fā)中“控件”不同的是衣赶，F(xiàn)lutter中的Widget的概念更廣泛，它不僅可以表示UI元素厚满，也可以表示一些功能性的組件如：用于手勢(shì)檢測(cè)的 GestureDetector widget府瞄、用于APP主題數(shù)據(jù)傳遞的Theme等等，而原生開(kāi)發(fā)中的控件通常只是指UI元素碘箍。在后面的內(nèi)容中摘能，我們?cè)诿枋鯱I元素時(shí)可能會(huì)用到“控件”续崖、“組件”這樣的概念，讀者心里需要知道他們就是widget团搞，只是在不同場(chǎng)景的不同表述而已严望。由于Flutter主要就是用于構(gòu)建用戶(hù)界面的，所以逻恐，在大多數(shù)時(shí)候像吻，讀者可以認(rèn)為widget就是一個(gè)控件，不必糾結(jié)于概念复隆。

1.2 文本及樣式

1.2 Text

Text用于顯示簡(jiǎn)單樣式文本拨匆，它包含一些控制文本顯示樣式的一些屬性，一個(gè)簡(jiǎn)單的例子如下：

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 參數(shù)可選喷斋。省略時(shí)，文本將使用最接近的DefaultTextStyle的樣式蒜茴。如果給定樣式的TextStyle.inherit屬性為true（默認(rèn)值）星爪，則給定樣式將與最接近的DefaultTextStyle合并。例如粉私，這種合并行為很有用顽腾，可以在使用默認(rèn)字體系列和大小時(shí)使文本變?yōu)榇煮w。

1.2.3 TextAlign textAlign

文本應(yīng)如何水平對(duì)齊enum：

1.2.4 TextDirection textDirection

這個(gè)屬性估計(jì)是給外國(guó)人習(xí)慣使用陈瘦，

相對(duì)TextAlign中的start幌甘、end而言有用（當(dāng)start使用了ltr相當(dāng)于end使用了rtl，也相當(dāng)于TextAlign使用了left）

對(duì)于從左到右的文本（TextDirection.ltr）痊项，文本從左向右流動(dòng)锅风；

對(duì)于從右到左的文本（TextDirection.rtl），文本從右向左流動(dòng)鞍泉。

1.2.5 bool softWrap

某一行中文本過(guò)長(zhǎng)皱埠，是否需要換行。默認(rèn)為true咖驮，如果為false边器，則文本中的字形將被定位為好像存在無(wú)限的水平空間。

1.2.6 TextOverflow overflow

如何處理視覺(jué)溢出:

1.2.7 double textScaleFactor

每個(gè)邏輯像素的字體像素?cái)?shù)

作為textScaleFactor賦予構(gòu)造函數(shù)的值睦刃。如果為null砚嘴，將使用從環(huán)境MediaQuery獲取的MediaQueryData.textScaleFactor 即手機(jī)的像素密度（1.0、1.5、2.0际长、3.0）

1.2.8 int maxLines

文本要跨越的可選最大行數(shù),

為1耸采，則文本不會(huì)換行。否則工育，文本將被包裹在框的邊緣虾宇。

1.2.9 String semanticsLabel

圖像的語(yǔ)義描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供圖像描述

talkback是一款由谷歌官方開(kāi)發(fā)的系統(tǒng)軟件,它的定位是幫助盲人或者視力有障礙的用戶(hù)提供語(yǔ)言輔助

Voiceover功能是APPLE公司在2009年4月新推出的一種語(yǔ)音輔助程序

備注：參考：

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

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