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之支持不一样的屏幕尺寸和方向