Flutter(十)——登入界面實作

登入界面設計

login_page.dart登入頁面代碼

home_page.dart首頁面代碼

mian.dart程式入口代碼

3個注意事項

在手機App的開發過程中，基本App都會有登入界面，是以我們今天将使用Flutter來實作登入界面的效果。

首先，我們需要掌握登入界面有那些元素，比如使用者名，密碼提示以及輸入框，其次可能還有上面的logo，下面的登入按鈕，以及忘記密碼等顯示。

前面部落客講解元件的時候，已經講過，在Flutter開發中，一切皆元件，也就是說，你可以把界面直接指派給一個變量，比如前面的操作，那麼多return代碼，可以直接複制給一個變量，這樣友善插入操作，那麼多嵌套的寫着，要是弄丢一個括号，估計找就得找死，是以指派變量，然後放置在return中，代碼看起來就會簡潔很多。

這裡我們先寫登入頁面，login_page.dart代碼如下：

上面注釋已經非常詳細了，這裡就不在贅述，細心的讀者應該看到這段代碼中有一個登入按鈕，點選之後的跳轉界面，也就是大多數App的首頁，是以我們還需要寫一個跳轉之後的界面home_page.dart，代碼如下：

這上面的注釋也是非常的詳細，而且線性漸變之前介紹元件的時候有講解過，應該很好了解，兩個界面都寫完了，現在重要的就是App程式入口代碼需要寫，mian.dart代碼如下：

這段代碼有幾點需要注意：

第一，我們之前寫的所有應用，是不是右上角都有一個debug标簽呢？這在實際應用中肯定不會要的，是以這裡設定debugShowCheckedModeBanner屬性為false，就不會顯示debug标簽。

第二，前面我們跳轉頁面用的pop()，然後push()，出棧進棧的方式操作，這裡我們定義了一個路由，将使用到的頁面全部寫在裡面，後續需要使用的時候，隻要使用如下代碼就可以直接跳轉：

這就是剛在定義路由routes裡面的key值，這種跳轉屬于靜态路由，前面用到的屬于動态路由，兩種都可以跳轉界面，這裡提及一樣友善大家了解。

第三，home定義App首次進入頁面的首頁面，其中也可以設定initialRoute屬性來達到初始頁面的設定，如果沒有initialRoute這個屬性，那麼會去尋找路由表裡面的’/’，或者MaterialApp的home屬性。但需要特别注意一下，路由表（也就是我們上面代碼裡面定義的routes變量）裡面的’/’（key值） 和MaterialApp的home屬性，二者不能同時存在，但是必須有一個存在。

當initialRoute和’/‘或者MaterialApp的home屬性同時存在的時候，initialRoute的優先級高于二者。意思就是如果initialRoute定義的頁面和’/'或者MaterialApp的home設定的頁面不一樣，使用者看到的是initialRoute定義的頁面。

當MaterialApp的home屬性定義了首頁面，而initialRoute沒有定義的時候，使用者看到的就是’/'或者MaterialApp的home多對應的頁面。

登入界面的代碼就講到這裡，顯示的效果如博文首圖所示。

該博文代碼的下載下傳位址：點選下載下傳