Flutter關於一個登入頁

蘇武難飛發表於2019-07-31
Flutter

前言

Hello,Hello大家好，這裡是一個不務正業的業餘程式設計師，前一段比較忙，最近閒下來先擼了一個簡單好看的登入頁( •̀ ω •́ )y，其中的技術點都是非常非常基礎簡單的，不過我們可以慢慢從簡單走向複雜~

登入頁

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

建議閱讀時間: 20分鐘

效果圖

01-sign-up-daily-ui-challenge

最終實現效果

03

Column

看設計圖我們可以知道這是一個垂直排列Widget的頁面，所以我們可以使用Column，關於Column由於是一個基礎控制元件相信大家都已經可以很熟練的使用，這裡就不細細展開了，舉幾個小?子。

04
修改一下mainAxisAlignment

MainAxisAlignment.spaceBetween

05

MainAxisAlignment.spaceEvenly

06

等等~就不一一列舉啦

LoginPage頁面設計

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

07

合理使用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>[
        //圖片
        //輸入框
        //輸入框
        //...
]))
複製程式碼

軟鍵盤遮擋問題

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

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

  1. resizeToAvoidBottomInset → bool

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

09

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

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

  1. SingleChildScrollView

我們在佈局外包裹一層SingleChildScrollView，讓這個介面可以滾動，此時我們再來看看效果。

10
效果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之支援不同的螢幕尺寸和方向

相關文章