Flutter關於一個登陸頁

前言

Hello,Hello你們好，這裏是一個遊手好閒的業餘程序員，前一段比較忙，最近閒下來先擼了一個簡單好看的登陸頁( •̀ ω •́ )y，其中的技術點都是很是很是基礎簡單的，不過咱們能夠慢慢從簡單走向複雜~

登陸頁

登陸頁相信 99% 的 App 都有涉及,本篇文章就帶你們簡單的走一遍流程吧~

建議閱讀時間: 20分鐘

效果圖

01-sign-up-daily-ui-challenge

最終實現效果

Column

看設計圖咱們能夠知道這是一個垂直排列Widget的頁面，因此咱們可使用Column，關於Column因爲是一個基礎控件相信你們都已經能夠很熟練的使用，這裏就不細細展開了，舉幾個小🌰子。

修改一下 mainAxisAlignment

MainAxisAlignment.spaceBetween

MainAxisAlignment.spaceEvenly

等等~就不一一列舉啦

LoginPage頁面設計

回到咱們的登陸頁開發流程中，能夠看出來在豎屏模式下整個頁面就是單純的豎向排列以下~

合理使用SingleChildScrollView

在設計圖上咱們能看到一個頁面恰好顯示徹底，可是實際狀況是咱們要面臨各個分辨率的手機有時候一個頁面並不能徹底顯示，這時候咱們就應讓界面能夠滾動，並且咱們要考慮到 軟鍵盤 遮擋的問題，SingleChildScrollView就該大顯身手啦~

SingleChildScrollView介紹

這個控件仍是比較簡單好用的，就是讓一個Widget能夠滾動，並且也能夠實現一些頗有意思的效果，這裏也暫且不談~簡單看下api

const SingleChildScrollView({
    Key key,
    this.scrollDirection = Axis.vertical,
    this.reverse = false,
    this.padding,
    bool primary,
    this.physics,
    this.controller,
    this.child,
    this.dragStartBehavior = DragStartBehavior.down,
  })
複製代碼

這裏主要解釋下reverse和primary，引用自 Flutter中文網

• reverse：該屬性API文檔解釋是：是否按照閱讀方向相反的方向滑動，如：scrollDirection值爲Axis.horizontal，若是閱讀方向是從左到右(取決於語言環境，阿拉伯語就是從右到左)，reverse爲true時，那麼滑動方向就是從右往左。其實此屬性本質上是決定可滾動widget的初始滾動位置是在「頭」仍是「尾」，取false時，初始滾動位置在「頭」，反之則在「尾」，讀者能夠本身試驗。
• primary：指是否使用widget樹中默認的PrimaryScrollController；當滑動方向爲垂直方向（scrollDirection值爲Axis.vertical）而且controller沒有指定時，primary默認爲true.

目前咱們的結構應該是

SingleChildScrollView(
    child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
        //圖片
        //輸入框
        //輸入框
        //...
]))
複製代碼

軟鍵盤遮擋問題

既然涉及到輸入框，那麼就不得不說另外一個問題，軟鍵盤遮擋問題。

如圖所示，軟鍵盤彈出時會遮擋掉部分視圖而且觸發 Flutter的視圖診斷警告，那麼咱們如何解決呢？

1. resizeToAvoidBottomInset → bool

這個屬性是用在咱們外層的Scaffold中，這個值爲false時，在軟鍵盤彈出時不會觸發調整總體大小。

Scaffold(
     resizeToAvoidBottomInset: false,
     backgroundColor: Colors.white,
     body: _buildVerticalLayout()
);
複製代碼

很完美？nonono~咱們此次點擊的是第二個輸入框,軟鍵盤彈出時遮擋住了咱們實際獲取焦點的TextField。

2. SingleChildScrollView

咱們在佈局外包裹一層SingleChildScrollView，讓這個界面能夠滾動，此時咱們再來看看效果。

效果ok~

橫豎屏切換時加載不一樣頁面

Flutter中橫豎屏切換時加載不一樣頁面仍是比較方便的，經過組合不一樣組件來達成。不過咱們如何知道橫豎屏切換事件呢？

OrientationBuilder來幫你

Flutter中提供了一個OrientationBuilder的小部件,OrientationBuilder能夠在設備的方向發生改變的時候，從新構建佈局。OrientationBuilder有一個builder函數來構建咱們的佈局。當設備的方向發生改變的時候，就會調用builder函數。orientation的值有兩個，Orientation.landscape和Orientation.portrait。

也是很是簡單的一個組件😂再次感嘆下Flutter果真是萬物皆組件啊~咱們的代碼改造以後

Scaffold(
        backgroundColor: Colors.white,
        body: OrientationBuilder(builder: (context, orientation) {
          return orientation == Orientation.portrait ? _buildVerticalLayout() : _buildHorizontalLayout();
}))
複製代碼

後記

本篇博文很是的簡單，感受寫出來有點很差意思，可是我準備就在這一個登陸頁上進行各類好玩有趣的魔改~但願你們能有所收穫 距離掘金社區50個贊還差32個！！

鳴謝

Flutter中文網

Flutter之支持不一樣的屏幕尺寸和方向