Flutter之?dāng)]一個(gè)漂亮的登錄界面的總結(jié)

介紹

最近學(xué)習(xí)了Flutter的一些控件使用，然后在Github上面看見了一個(gè)挺漂亮的登錄界面，于是就用Flutter自己模仿地實(shí)現(xiàn)了一下。原作者做得比較好看，不過只是單純實(shí)現(xiàn)界面。所以自己加了些東西，比如Key的使用和InheritedWidget的使用。

下面是一些總結(jié)，如果有說錯(cuò)的地方，還請(qǐng)各位指出來，謝謝。

最終的展示界面

image
image

代碼結(jié)構(gòu)

image

每個(gè)類的名字，相信大家一看就知道對(duì)應(yīng)的作用類。每個(gè)類的作用，我在代碼里面都有注釋，可以去看下代碼。

主要用到的控件

  • 利用Row，Column沿水平方向或者垂直方向排列子布局

  • 利用Stack實(shí)現(xiàn)布局層疊，利用Positioned控件實(shí)現(xiàn)絕對(duì)定位

  • 利用Container實(shí)現(xiàn)裝飾效果

  • 利用TextFormField實(shí)現(xiàn)文本輸入，利用Form來管理這些TextFormField

  • 利用Key來獲取widget的狀態(tài)

  • 利用InheritedWidget可以把數(shù)據(jù)傳遞給子控件

  • 利用PageView和PageController實(shí)現(xiàn)頁面滑動(dòng)切換

在pubspec.yaml中添加依賴

  • font_awesome_flutter，這個(gè)一個(gè)Flutter的圖標(biāo)庫

  • 添加一張登錄界面的頂部圖片，并聲明資源路徑。下面的這種寫法，會(huì)之間把整個(gè)文件夾下面的資源都導(dǎo)入應(yīng)用程序，可以不用一個(gè)一個(gè)資源地進(jìn)行聲明。

  • random_pk。這里說一下這個(gè)庫的作用，一方面是為容器提供隨機(jī)顏色。另一方面，我覺得可以這個(gè)有顏色的容器進(jìn)行調(diào)試布局，這個(gè)RandomContainer的用法是跟Container一樣的，只需包裹c(diǎn)hild就可以了。然后你可以通過容器的背景的大小，來判斷是否所繪制布局的大小是不是對(duì)的，看起來比較直觀一些，而且自己可以不用手動(dòng)的去寫container+color的那種寫法。當(dāng)你不需要用的時(shí)候，再把這一層RandomContainer給去掉就可以了。我自己在平時(shí)用的時(shí)候，發(fā)現(xiàn)確實(shí)挺有作用的，大家可以拿去試試。

  random_pk: any
  font_awesome_flutter: any
  //省略部分代碼
  assets:
 - assets/

代碼實(shí)現(xiàn)

1.利用代碼模板生成代碼，新建一個(gè)空頁面（如果手動(dòng)打出一段stateful的代碼是真的麻煩）

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

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

2.根據(jù)布局編寫代碼

這部分沒什么好說的，主要是要熟悉一些控件的使用，根據(jù)UI稿一步一步寫出布局就可以了。

例如，輸入賬號(hào)和密碼的TextForm的實(shí)現(xiàn)

 /**
   * 創(chuàng)建登錄界面的TextForm
   */
  Widget buildSignInTextForm() {
    return new Container(
      decoration:
      new BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(8))
          , color: Colors.white
      ),
      width: 300,
      height: 190,
      /**
       * Flutter提供了一個(gè)Form widget，它可以對(duì)輸入框進(jìn)行分組，
       * 然后進(jìn)行一些統(tǒng)一操作，如輸入內(nèi)容校驗(yàn)、輸入框重置以及輸入內(nèi)容保存。
       */
      child: new Form(
        key: _SignInFormKey,
        //開啟自動(dòng)檢驗(yàn)輸入內(nèi)容，最好還是自己手動(dòng)檢驗(yàn)，不然每次修改子孩子的TextFormField的時(shí)候，其他TextFormField也會(huì)被檢驗(yàn)，感覺不是很好
//        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(
                  //關(guān)聯(lián)焦點(diǎn)
                  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),
                  //驗(yàn)證
                  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的實(shí)現(xiàn)

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的使用

例如，我想在任意一個(gè)地方的子控件，想獲得用戶的數(shù)據(jù)User，就可以利用InheritedWidget來實(shí)現(xiàn)。比如我們平時(shí)用的Theme.of(context)在任何地方來獲取應(yīng)用的主題，或者用MediaQuery.of(context)來獲取應(yīng)用的屏幕數(shù)據(jù)，其實(shí)本質(zhì)上都是用了InheritedWidget來實(shí)現(xiàn)數(shù)據(jù)的共享。

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

/**
 * 利用InheritedWidget用于子節(jié)點(diǎn)向祖先節(jié)點(diǎn)獲取數(shù)據(jù)
    當(dāng)依賴的InheritedWidget rebuild,會(huì)觸發(fā)子控件的didChangeDependencies()接口
 */
class UserProvider extends InheritedWidget {
  final Widget child;
  final User user;//在子樹中共享的數(shù)據(jù)

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

  /**
   * 該回調(diào)決定當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，是否通知子樹中依賴數(shù)據(jù)的Widget
   */
  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    return true;
  }
}

/**
 * 需要一個(gè)StatefulWidget作為外層的組件，
    將我們的繼承于InheritateWidget的組件build出去
 */
class UserContainer extends StatefulWidget {
  //給子控件分享的數(shù)據(jù)
  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中，每個(gè)Widget的構(gòu)建方法都會(huì)有一個(gè)key的參數(shù)可選，如果沒有傳key，那么應(yīng)用會(huì)自動(dòng)幫忙生成一個(gè)key值。這個(gè)key值在整個(gè)應(yīng)用程序里面是唯一的，并且一個(gè)key唯一對(duì)應(yīng)一個(gè)widget，所以你可以利用key來獲取到widget的state，進(jìn)而對(duì)widget進(jìn)行控制。

例如，利用key來獲取Form的狀態(tài)FormState,當(dāng)我點(diǎn)擊登錄按鈕的時(shí)候，利用key來獲取widget的狀態(tài)FormState，再利用FormState對(duì)Form的子孫FromField進(jìn)行統(tǒng)一的操作。

//定義一個(gè)key，并關(guān)聯(lián)到對(duì)應(yīng)的widget
  GlobalKey<FormState> _SignInFormKey = new GlobalKey();
new Form(
        key: _SignInFormKey,
        child: .........)


 /**利用key來獲取widget的狀態(tài)FormState
              可以用過FormState對(duì)Form的子孫FromField進(jìn)行統(tǒng)一的操作
           */
          if (_SignInFormKey.currentState.validate()) {
            //如果輸入都檢驗(yàn)通過，則進(jìn)行登錄操作
            Scaffold.of(context).showSnackBar(
                new SnackBar(content: new Text("執(zhí)行登錄操作")));
            //調(diào)用所有自孩子的save回調(diào)，保存表單內(nèi)容
            _SignInFormKey.currentState.save();
          }

遇到的問題

1.一些布局方面的坑 利用SafeArea可以讓內(nèi)容顯示在安全的可見區(qū)域。 利用SingleChildScrollView可以避免彈出鍵盤的時(shí)候，出現(xiàn)overFlow的現(xiàn)象。

image

2.理解context，state，key，widget的一些概念和之間的關(guān)系，這篇文章我覺得寫得很不錯(cuò)： https://user-gold-cdn.xitu.io/2018/12/8/1678bb83bcdb5f6d

下一步計(jì)劃

繼續(xù)整理自己學(xué)習(xí)Flutter中的收獲和遇到的一些問題

我自己是一名從事了5年Android的老程序員，辭職目前在做講師，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的Android學(xué)習(xí)干貨，各個(gè)方面都有整理，送給每一位Android開發(fā)的小伙伴，這里是開發(fā)者聚集地，歡迎初學(xué)和進(jìn)階中的小伙伴。
加QQ群：457848807獲取以下高清技術(shù)思維圖以及相關(guān)的學(xué)習(xí)資料
image
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容