网页抓取手机号(用户协议实现“运营位”实现、验证码登录表单 )

　　网页抓取手机号(用户协议实现“运营位”实现、验证码登录表单

)

　　设计效果如下：

　　拿到设计后，先把整体拆成几个部分：

　　“操作位置”，使用自定义轮播滑块组件实现滚动操作位置。 “登录表单”，使用自定义登录表单组件实现手机号和验证码登录表单。 “用户协议”，使用自定义的用户协议组件来实现用户协议的声明文本。

　　然后你就可以开始编码了。

　　第一步：绘制组件树

　　第 2 步：实现“操作位置”

　　先介绍一下需要一次性引用的自定义组件，carousel_with_indicator.dart、login_form.dart和user_agreement.dart文件，分别对应《Flutter Layout Kit——Carousel Pictures and Sliders》和《Flutter Layout Kit——蜡笔画》表单”和“Flutter 布局技巧——用户协议声明”。

　　import 'package:flutter/material.dart';

import 'widgets/carousel_with_indicator.dart';

import 'widgets/login_form.dart';

import 'widgets/user_agreement.dart';

/// 登录页面组件。

class LoginPage extends StatefulWidget {

@override

_LoginPageState createState() => _LoginPageState();

}

　　实现“操作位置”的UI很简单，因为具体实现在《Flutter布局技巧-轮播图片和滑块》中已经完成，只需要调用CarouselWithIndicator组件即可。

　　/// 与登录页面组件关联的状态子类。

class _LoginPageState extends State {

@override

Widget build(BuildContext context) {

// TODO: 第4步：实现“用户协议”，实现“相对下方”布局。

// 脚手架（`Scaffold`）组件，实现基本Material设计视觉布局结构。

return Scaffold(

body: SafeArea(

child: ListView(

children: [

CarouselWithIndicator(),

// TODO: 第3步：实现“登录表单”。

// TODO: 第4步：实现“用户协议”。

],

),

),

);

}

}

　　第 3 步：实施“登录表单”

　　同上，“登录表单”的实现只需要调用LoginForm组件即可。具体实现见《Flutter Layout Kit-蜡笔画表格》。

　　 // TODO: 第3步：实现“登录表单”。

LoginForm(),

　　第 4 步：实施“用户协议”

　　执行《用户协议》比较困难，因为需要相对于屏幕底部放置组件。笔者在Flutter文档中并没有找到一种既可以实现灵活布局又可以相对于屏幕底部进行布局的方法。我只能采取很土的方法，先算出屏幕剩余空间。

　　 // TODO: 第4步：实现“用户协议”，实现“相对下方”布局。

/// 屏幕下方的剩余高度。

double screenHeight;

// 媒体查询（`MediaQuery`）类，建立媒体查询解析给定数据的子树，返回媒体查询数据（`MediaQueryData`）类。

// 媒体查询数据（`MediaQueryData`）类的方向（`orientation`）属性，媒体的方向，即设备是处于横向还是纵向模式。

if (MediaQuery.of(context).orientation == Orientation.portrait) {

// 媒体查询数据（`MediaQueryData`）类的大小（`size`）属性，逻辑像素中的媒体大小，即屏幕的大小。

// 媒体查询数据（`MediaQueryData`）类的填充（`padding`）属性，应用程序可以呈现的显示矩形每一侧的物理像素数。

// 填充（`padding`）属性的顶部（`top`）值是状态栏高度，底部（`bottom`）值是系统操作栏高度。

screenHeight = MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top -

MediaQuery.of(context).padding.bottom - 536;

} else {

// 横屏时的高度，用于避免因为切换横竖屏导致的异常显示。

screenHeight = 82.0;

}

　　然后使用 SizedBox 组件占据屏幕剩余空间，然后使用 Column 组件的 mainAxisAlignment 属性将 UserAgreement 组件布局在屏幕底部。

　　 // TODO: 第4步：实现“用户协议”。

// 通过大小框（`SizedBox`）组件来利用屏幕剩余的空间，实现从屏幕下方布局。

SizedBox(

height: screenHeight,

child: Align(

alignment: Alignment.bottomCenter,

child: Column(

// 垂直（`Column`）组件的主轴对齐（`mainAxisAlignment`）属性，如何将子组件放在主轴上。

mainAxisAlignment : MainAxisAlignment.end,

children: [

UserAgreement(),

SizedBox(height: 20.0),

],

),

),

),

　　第五步：恢复效果