【Flutter 专题】06 图解基础【登陆】页面并学习相关 Widget #yyds干货盘点#

2021年11月20日 阅读数:3
这篇文章主要向大家介绍【Flutter 专题】06 图解基础【登陆】页面并学习相关 Widget #yyds干货盘点#,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

技术积累

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

实操问题 + 解决方案

1. 如何加入本地图片?

0602.png

解决以下:
  1. 在根目录下新建 images 文件夹,将本地图片拷贝到该文件夹下,文件格式包括 JPEG / WebP / GIF / 动画WebP / GIF / PNG / BMP / WBMP 等格式;
    0603.png
  2. pubspec.yaml 文件中添加相应的图片文件指向,如:- images/icon_username.png特别注意:images 与 '-' 之间必定要有空格!!!
    9604.png
  3. Content 中添加图片便可,如:
    new Image.asset(
    'images/ic_launcher.png',
    ),
    2. Row 中如何添加输入框?

    0605.png

    解决以下:
  4. 水平排列控件须要用到 Row,竖直排列控件须要 Column;
  5. 小菜须要在同一行中添加一个图标和一个输入框 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: '请输入用户名',
        ),
      )
    ]),
    ),
  6. 能够设置文本输入框的固定长度,或是在文本输入框外添加一层 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. 如何调整按钮宽度及效果?
    解决以下:
  7. Flutter 没有直接的 Button,小菜用的是 FlatButton,可是这仅仅是一个按钮,样式须要本身调整,配合 Card 实现圆角和投影,可是按钮长度按照文字长度展现;
    0606.png
  8. 依旧是在按钮外添加一层父布局,按需求调整固定长度,以下:
    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),
      ),
    )),
    ),
    )

    0607.jpg

    相关延展

  9. Flutter 中引用图片有四种方式,小菜认为目前用的较多的为 网络图片Assets 图片,引用网络图片方式也很简单,以下:
    new Image.network(
    'http://XXX.jpg',
    scale: 4.0,
    ),
  10. 对于文本输入框中明文显示或密码显示,主要经过 obscureText: true, 属性,当该属性为 true 时为密码隐文展现;
    0608.jpg
  11. 对于位置方面内边距,小菜目前用到两个,分别是 EdgeInsets.all 和 EdgeInsets.fromLTRB;all 只有一个参数,相似于 Android 中 android:padding="10dp";fromLTRB 有四个参数,分别对应上下左右四个高度,而顺序也是按照 L->left T->Top R->Right B->Bottom 顺序排列,刚开始没明白,后来反应过来发现很方便;
    0609.png
  12. 对于 Card 中阴影效果,须要 elevation: 16.0, 属性,值越大并不是表明阴影效果越深,只是表明阴影距离离控件越远;
  13. Flutter' , ' 相似于 Java 中 ' ; ' 建议编辑完一个属性后添加 ' , ' 并且 Flutter 很贴心的地方是默认后面会有提示,对应的 ' ) ' 级别,方便修改的时候查找,如图:
    0610.png
  14. 对于图片比例,小菜用的是 scale: 4.0, 测试发现 scale 值越大图片反而越小。

    主要源码

    
    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {br/>@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,markdown

      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),
                  ),
                )),
          ),
        ),
      ],
    ),
  ),
);

}
}网络


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**[GitHub Demo](https://github.com/ACE-YANGCE/FlutterSign)**
***
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小菜也是刚接触 **Flutter**,还有不少不清楚和不理解的地方,若是又不对的地方还但愿多多指出。

> 来源:阿策小和尚