Flutter之擼一個漂亮的登入介面的總結

入魔的冬瓜發表於2018-12-08
Flutter

介紹

最近學習了Flutter的一些控制元件使用，然後在Github上面看見了一個挺漂亮的登入介面，於是就用Flutter自己模仿地實現了一下。原作者做得比較好看，不過只是單純實現介面。所以自己加了些東西，比如Key的使用和InheritedWidget的使用。

下面是一些總結，如果有說錯的地方，還請各位指出來，謝謝。

最終的展示介面

Flutter之擼一個漂亮的登入介面的總結
Flutter之擼一個漂亮的登入介面的總結

程式碼結構

Flutter之擼一個漂亮的登入介面的總結
每個類的名字，相信大家一看就知道對應的作用類。每個類的作用，我在程式碼裡面都有註釋，可以去看下程式碼。

主要用到的控制元件

  1. 利用Row，Column沿水平方向或者垂直方向排列子佈局
  2. 利用Stack實現佈局層疊，利用Positioned控制元件實現絕對定位
  3. 利用Container實現裝飾效果
  4. 利用TextFormField實現文字輸入，利用Form來管理這些TextFormField
  5. 利用Key來獲取widget的狀態
  6. 利用InheritedWidget可以把資料傳遞給子控制元件
  7. 利用PageView和PageController實現頁面滑動切換

在pubspec.yaml中新增依賴

  1. font_awesome_flutter，這個一個Flutter的圖示庫
  2. 新增一張登入介面的頂部圖片，並宣告資源路徑。下面的這種寫法，會之間把整個資料夾下面的資源都匯入應用程式，可以不用一個一個資源地進行宣告。
  3. random_pk。這裡說一下這個庫的作用，一方面是為容器提供隨機顏色。另一方面，我覺得可以這個有顏色的容器進行除錯佈局，這個RandomContainer的用法是跟Container一樣的，只需包裹child就可以了。然後你可以通過容器的背景的大小，來判斷是否所繪製佈局的大小是不是對的，看起來比較直觀一些，而且自己可以不用手動的去寫container+color的那種寫法。當你不需要用的時候，再把這一層RandomContainer給去掉就可以了。我自己在平時用的時候，發現確實挺有作用的，大家可以拿去試試。
  random_pk: any
  font_awesome_flutter: any
  //省略部分程式碼
  assets:
 - assets/
複製程式碼

程式碼實現

1.利用程式碼模板生成程式碼，新建一個空頁面（如果手動打出一段stateful的程式碼是真的麻煩）

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
複製程式碼

2.根據佈局編寫程式碼

這部分沒什麼好說的，主要是要熟悉一些控制元件的使用，根據UI稿一步一步寫出佈局就可以了。

例如，輸入賬號和密碼的TextForm的實現

 /**
   * 建立登入介面的TextForm
   */
  Widget buildSignInTextForm() {
    return new Container(
      decoration:
      new BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(8))
          , color: Colors.white
      ),
      width: 300,
      height: 190,
      /**
       * Flutter提供了一個Form widget，它可以對輸入框進行分組，
       * 然後進行一些統一操作，如輸入內容校驗、輸入框重置以及輸入內容儲存。
       */
      child: new Form(
        key: _SignInFormKey,
        //開啟自動檢驗輸入內容，最好還是自己手動檢驗，不然每次修改子孩子的TextFormField的時候，其他TextFormField也會被檢驗，感覺不是很好
//        autovalidate: true,
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
              child: Padding(
                padding: const EdgeInsets.only(
                    left: 25, right: 25, top: 20, bottom: 20),
                child: new TextFormField(
                  //關聯焦點
                  focusNode: emailFocusNode,
                  onEditingComplete: () {
                    if (focusScopeNode == null) {
                      focusScopeNode = FocusScope.of(context);
                    }
                    focusScopeNode.requestFocus(passwordFocusNode);
                  },

                  decoration: new InputDecoration(
                      icon: new Icon(Icons.email, color: Colors.black,),
                      hintText: "Email Address",
                      border: InputBorder.none
                  ),
                  style: new TextStyle(fontSize: 16, color: Colors.black),
                  //驗證
                  validator: (value) {
                    if (value.isEmpty) {
                      return "Email can not be empty!";
                    }
                  },
                  onSaved: (value) {

                  },
                ),
              ),
            ),
            new Container(
              height: 1,
              width: 250,
              color: Colors.grey[400],
            ),
            Flexible(
              child: Padding(
                padding: const EdgeInsets.only(
                    left: 25, right: 25, top: 20),
                child: new TextFormField(
                  focusNode: passwordFocusNode,
                  decoration: new InputDecoration(
                      icon: new Icon(Icons.lock, color: Colors.black,),
                      hintText: "Password",
                      border: InputBorder.none,
                      suffixIcon: new IconButton(icon: new Icon(
                        Icons.remove_red_eye, color: Colors.black,),
                          onPressed: showPassWord)
                  ),
                  //輸入密碼，需要用*****顯示
                  obscureText: !isShowPassWord,
                  style: new TextStyle(fontSize: 16, color: Colors.black),
                  validator: (value) {
                    if (value == null || value.isEmpty || value.length < 6) {
                      return "Password'length must longer than 6!";
                    }
                  },
                  onSaved: (value) {

                  },
                ),
              ),
            ),


          ],
        ),),
    );
  }
複製程式碼

例如，PageView的實現

PageController _pageController;
  PageView _pageView;
  int _currentPage = 0;

  @override
  void initState() {
    super.initState();
    _pageController = new PageController();
    _pageView = new PageView(
      controller: _pageController,
      children: <Widget>[
        new SignInPage(),
        new SignUpPage(),
      ],
      onPageChanged: (index) {
        setState(() {
          _currentPage = index;
        });
      },
    );
  }
複製程式碼

3. InheritedWidget的使用

例如，我想在任意一個地方的子控制元件，想獲得使用者的資料User，就可以利用InheritedWidget來實現。比如我們平時用的Theme.of(context)在任何地方來獲取應用的主題，或者用MediaQuery.of(context)來獲取應用的螢幕資料，其實本質上都是用了InheritedWidget來實現資料的共享。

具體的用法，後面再寫一篇文章來解釋吧（最近剛弄懂）

/**
 * 利用InheritedWidget用於子節點向祖先節點獲取資料
    當依賴的InheritedWidget rebuild,會觸發子控制元件的didChangeDependencies()介面
 */
class UserProvider extends InheritedWidget {
  final Widget child;
  final User user;//在子樹中共享的資料

  UserProvider({this.user, this.child}) : super(child: child);

  /**
   * 該回撥決定當資料發生變化時，是否通知子樹中依賴資料的Widget
   */
  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    return true;
  }
}

/**
 * 需要一個StatefulWidget作為外層的元件，
    將我們的繼承於InheritateWidget的元件build出去
 */
class UserContainer extends StatefulWidget {
  //給子控制元件分享的資料
  final User user;
  final Widget child;

  UserContainer({Key key, this.user, this.child}) : super(key: key);

  @override
  _UserContainerState createState() => _UserContainerState();

  static UserProvider of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(UserProvider);
  }
}

class _UserContainerState extends State<UserContainer> {
  @override
  Widget build(BuildContext context) {
    return new UserProvider(user: widget.user, child: widget.child);
  }
}

複製程式碼

4.Key的使用

在Flutter中，每個Widget的構建方法都會有一個key的引數可選，如果沒有傳key，那麼應用會自動幫忙生成一個key值。這個key值在整個應用程式裡面是唯一的，並且一個key唯一對應一個widget，所以你可以利用key來獲取到widget的state，進而對widget進行控制。

例如，利用key來獲取Form的狀態FormState,當我點選登入按鈕的時候，利用key來獲取widget的狀態FormState，再利用FormState對Form的子孫FromField進行統一的操作。

//定義一個key，並關聯到對應的widget
  GlobalKey<FormState> _SignInFormKey = new GlobalKey();
new Form(
        key: _SignInFormKey,
        child: .........)
複製程式碼
 /**利用key來獲取widget的狀態FormState
              可以用過FormState對Form的子孫FromField進行統一的操作
           */
          if (_SignInFormKey.currentState.validate()) {
            //如果輸入都檢驗通過，則進行登入操作
            Scaffold.of(context).showSnackBar(
                new SnackBar(content: new Text("執行登入操作")));
            //呼叫所有自孩子的save回撥，儲存表單內容
            _SignInFormKey.currentState.save();
          }
複製程式碼

遇到的問題

1.一些佈局方面的坑 利用SafeArea可以讓內容顯示在安全的可見區域。 利用SingleChildScrollView可以避免彈出鍵盤的時候，出現overFlow的現象。

Flutter之擼一個漂亮的登入介面的總結

2.理解context，state，key，widget的一些概念和之間的關係，這篇文章我覺得寫得很不錯： user-gold-cdn.xitu.io/2018/12/8/1…

下一步計劃

繼續整理自己學習Flutter中的收穫和遇到的一些問題

Demo地址（程式碼我都加了挺多註釋的地方）

github.com/LXD31256949…

相關文章