全部标签
写点什么
开源云计算行业资讯玩转写作平台算法Python人工智能区块链Linux前端个人成长面试架构师编程企业动态新基建敏捷安全读书笔记高效工作团队管理创业活动专区生涯规划知识管理运维产品经理 查看更多

【Flutter 专题】06 图解基础【登录】页面并学习相关 Widget

作者：阿策小和尚
  • 2021 年 11 月 17 日

  • 本文字数：3955 字

    阅读完需：约 13 分钟

【Flutter 专题】06 图解基础【登录】页面并学习相关 Widget

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



技术积累

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

实操问题 + 解决方案

1. 如何加入本地图片？


解决如下：

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



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



  1. 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 实现圆角和投影，但是按钮长度按照文字长度展示；



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


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,),
复制代码


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



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



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

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



  1. 对于图片比例，小菜用的是 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，还有很多不清楚和不理解的地方，如果又不对的地方还希望多多指出。


来源：阿策小和尚

划线
评论
复制
发布于: 2 小时前阅读数: 4

版权声明: 本文为 InfoQ 作者【阿策小和尚】的原创文章。

原文链接:【http://xie.infoq.cn/article/908b8b902b9524011a3921de9】。文章转载请联系作者。

Flutter 小菜0 基础学习 FlutterAndroid 小菜鸟11月日更
用户头像

阿策小和尚

关注

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟～

评论

发布
暂无评论
Copyright © 2021, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
【Flutter 专题】06 图解基础【登录】页面并学习相关 Widget