专栏首页阿策小和尚【Flutter 专题】07 您搭好【登录】页面了么?

【Flutter 专题】07 您搭好【登录】页面了么?

和尚最近在利用业余时间学习 Flutter,还真的是值得研究。和尚觉得学习一门技术最好的方式就是动手,在实践过程中结合官网文档才能更快的学习和理解。因为和尚技术太差,花了很久才搭建了一个最简单的【登录】页面,对于同一个页面,搭建的方式千差万别,和尚的方式也绝非最佳,现在仅结合这个基本的【登录】页面记录整理一下遇到的问题。 和尚这次整理的小博客只是单纯的搭建页面,不涉及以无逻辑和页面跳转,毕竟和尚还没研究到那部分。

技术积累

【登录】页面很基本,整个页面分为标题栏 Title内容块 Content 两部分,标题栏不用处理,主要是编辑内容块部分。内容块包括一个应用 Logo,两个图标,两个输入框,一个按钮。 因此需要用到的控件包括:图片,文本输入框,按钮,布局等。当然 Flutter 最大的优势就是一切都是 widget。

实操问题 + 解决方案

1. 如何加入本地图片?
解决如下:

1. 在根目录下新建 images 文件夹,将本地图片拷贝到该文件夹下,文件格式包括 JPEG / WebP / GIF / 动画WebP / GIF / PNG / BMP / WBMP 等格式;

2. 在 pubspec.yaml 文件中添加相应的图片文件指向,如:- images/icon_username.png特别注意:images 与 '-' 之间一定要有空格!!!

3. Content 中添加图片即可,如:

new Image.asset(
    'images/ic_launcher.png',
),
2. Row 中如何添加输入框?
解决如下:
  1. 水平排列控件需要用到 Row,竖直排列控件需要 Column;
  2. 和尚需要在同一行中添加一个图标和一个输入框 TextField,单独的一个文本输入框没问题,但是直接放在 Row 中缺报错;
child: new Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      new Image.asset(
          'images/icon_username.png',
          width: 40.0,
          height: 40.0,
          fit: BoxFit.fill,
        ),
      new TextField(
        decoration: new InputDecoration(
          hintText: '请输入用户名',
        ),
      )
    ]),
),
  1. 可以设置文本输入框的固定长度,或是在文本输入框外添加一层 widget,和尚理解为添加一层父布局,限制文本输入框宽度,如下:
new Padding(
  padding: new EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 40.0),
  child: new Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        new Padding(
          padding: new EdgeInsets.fromLTRB(0.0, 0.0, 5.0, 0.0),
          child: new Image.asset(
            'images/icon_password.png',
            width: 40.0,
            height: 40.0,
            fit: BoxFit.fill,
          ),
        ),
        new Expanded(
            child: new TextField(
          decoration: new InputDecoration(
            hintText: '请输入密码',
          ),
          obscureText: true,
        ))
      ]),
),
3. 如何调整按钮宽度及效果?
解决如下:

1. Flutter 没有直接的 Button,和尚用的是 FlatButton,但是这仅仅是一个按钮,样式需要自己调整,配合 Card 实现圆角和投影,但是按钮长度按照文字长度展示;

2. 依旧是在按钮外添加一层父布局,按需求调整固定长度,如下:

new Container(
  width: 340.0,
  child: new Card(
    color: Colors.blue,
    elevation: 16.0,
    child: new FlatButton(
        child: new Padding(
      padding: new EdgeInsets.all(10.0),
      child: new Text(
        '极速登录',
        style: new TextStyle(color: Colors.white, fontSize: 16.0),
      ),
    )),
  ),
)

相关延展

1. Flutter 中引用图片有四种方式,和尚认为目前用的较多的为 网络图片Assets 图片,引用网络图片方式也很简单,如下:

new Image.network(
  'http://XXX.jpg',
  scale: 4.0,
),

2. 对于文本输入框中明文显示或密码显示,主要通过 obscureText: true, 属性,当该属性为 true 时为密码隐文展示;

3. 对于位置方面内边距,和尚目前用到两个,分别是 EdgeInsets.all 和 EdgeInsets.fromLTRB;all 只有一个参数,类似于 Android 中 android:padding="10dp";fromLTRB 有四个参数,分别对应上下左右四个高度,而顺序也是按照 L->left T->Top R->Right B->Bottom 顺序排列,刚开始没明白,后来反应过来发现很方便;

4. 对于 Card 中阴影效果,需要 elevation: 16.0, 属性,值越大并非代表阴影效果越深,只是代表阴影距离离控件越远;

5. Flutter' , ' 类似于 Java 中 ' ; ' 建议编辑完一个属性后添加 ' , ' 而且 Flutter 很贴心的地方是默认后面会有提示,对应的 ' ) ' 级别,方便修改的时候查找,如图:

6. 对于图片比例,和尚用的是 scale: 4.0, 测试发现 scale 值越大图片反而越小。

主要源码

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '轻签到',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('极速登录'),
        ),
        body: new Column(
          // Column is also layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug paint" (press "p" in the console where you ran
          // "flutter run", or select "Toggle Debug Paint" from the Flutter tool
          // window in IntelliJ) to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.start,

          children: <Widget>[
            new Padding(
                padding: new EdgeInsets.all(30.0),
                child: new Image.asset(
                  'images/ic_launcher.png',
                  scale: 1.8,
                )),
            new Padding(
              padding: new EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 15.0),
              child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    new Padding(
                      padding: new EdgeInsets.fromLTRB(0.0, 0.0, 5.0, 0.0),
                      child: new Image.asset(
                        'images/icon_username.png',
                        width: 40.0,
                        height: 40.0,
                        fit: BoxFit.fill,
                      ),
                    ),
                    new Expanded(
                        child: new TextField(
                          decoration: new InputDecoration(
                            hintText: '请输入用户名',
                          ),
                        ))
                  ]),
            ),
            new Padding(
              padding: new EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 40.0),
              child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    new Padding(
                      padding: new EdgeInsets.fromLTRB(0.0, 0.0, 5.0, 0.0),
                      child: new Image.asset(
                        'images/icon_password.png',
                        width: 40.0,
                        height: 40.0,
                        fit: BoxFit.fill,
                      ),
                    ),
                    new Expanded(
                        child: new TextField(
                          decoration: new InputDecoration(
                            hintText: '请输入密码',
                          ),
                          obscureText: true,
                        ))
                  ]),
            ),
            new Container(
              width: 340.0,
              child: new Card(
                color: Colors.blue,
                elevation: 16.0,
                child: new FlatButton(
                    child: new Padding(
                      padding: new EdgeInsets.all(10.0),
                      child: new Text(
                        '极速登录',
                        style: new TextStyle(color: Colors.white, fontSize: 16.0),
                      ),
                    )),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

GitHub Demo


和尚也是刚接触 Flutter,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。以下是和尚公众号,欢迎闲来吐槽~

本文分享自微信公众号 - 阿策小和尚(gh_8297e718c166),作者:阿策小和尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Flutter 专题】08 小小优化【登录】页面

    和尚前两天花了很久才搭建了一个最简单的【登录】页面,但依然还有很多需要优化的地方,和尚又花了很久的时间尝试做了一点点的优化,仅针对优化的部分简单整理...

    阿策
  • 【Flutter 专题】13 通过丑丑的【签到】页面学习以下【权重/比例】的重要性

    和尚今天搭建了一个很丑的【签到】小页面,页面很简单,只有寥寥几个控件,但和尚想通过这个简单的小页面学习一下权重/比例的使用方式,顺便也学习了一下如何...

    阿策
  • 【Flutter 15】图解 ListView 不同样式 item 及 Widget 显隐性

    一年一度的谷歌大会又开始了,谷歌对 Flutter 的投入力度又加大了,所以更得好好学 Flutter 了。和尚在做新闻列表方面的 Demo 时,想...

    阿策
  • DartVM服务器开发(第十七天)--Jaguar_websocket结合Flutter搭建简单聊天室

    我们这里定义了一个ChatMessageData,如果你想需要更多字段,可以再添加

    rhyme_lph
  • [Flutter]使用顶部切换导航TabBar

    目前移动开发tab切换是一个很通用的功能,Flutter 通过Material 库提供了很方便的API来使用tab切换。

    吴老师
  • 【Flutter 专题】08 小小优化【登录】页面

    和尚前两天花了很久才搭建了一个最简单的【登录】页面,但依然还有很多需要优化的地方,和尚又花了很久的时间尝试做了一点点的优化,仅针对优化的部分简单整理...

    阿策
  • Flutter 简易新闻项目目标效果对比简介代码代码地址

    使用flutter快速开发 Android 和 iOS 的简易的新闻客户端 API使用的是 showapi(易源数据) 加载热门微信文章

    gwk_iOS
  • Flutter中的操作提示

    在前面的文章中我们学习了Flutter中输入以及选择控件的用法,借助于这些组件大家可以完成很多常用的功能,但是他不能及时在用户操作后完成相应的界面提示,所以今天...

    flyou
  • ListView&GirdView

    在前面的的文章中我们了解了Flutter中操作提示的用法,包括SnackBar、Dialog、以及BottomSheet,通过这些Widget我们可以很方便的...

    flyou
  • 【Flutter 专题】13 通过丑丑的【签到】页面学习以下【权重/比例】的重要性

    和尚今天搭建了一个很丑的【签到】小页面,页面很简单,只有寥寥几个控件,但和尚想通过这个简单的小页面学习一下权重/比例的使用方式,顺便也学习了一下如何...

    阿策

扫码关注云+社区

领取腾讯云代金券