Flutter之撸一个漂亮的登录界面的总结,帮你快速拿Offer

}

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: [
    Flexible(
    child: Padding(
    padding: const EdgeInsets.only(
    left: 25, right: 25, top: 20, bottom: 20),
    child: new TextFormF
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值