Flutter关于一个登录页

5,854 阅读4分钟

前言

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,
  })

这里主要解释下reverseprimary,引用自 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之支持不同的屏幕尺寸和方向