Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.
Flutter允许你使用同一个代码库在Android和IOS上构建漂亮的本机应用。

前言

又双叒叕要开坑了，技术日新月异，怎么可以停滞不前。相信很多传统开发的小伙伴都有被UI支配的恐惧，比如我们公司，一个新的项目过来，要Android、AndroidHD、IOS、IPAD、桌面最少5个版本，加上开发成本的压力，很自然的就想到了跨平台，至于为什么选择flutter，最重要的还是它媲美原生的性能吧，而且2月26日发布flutter 1.2版本的时候也提到2019年的工作重心是将flutter推广到移动平台之外，支持web和桌面，我只能说很期待！
关于这系列文章，不会写的很详细，主要还是我个人的学习记录吧，而且flutter说到底只是一个用dart语言编写的UI框架，如果有移动端开发经验的话，入门和使用还是比较简单的。至于没有这方面经验的，并不建议直接学习flutter，还是应该先学习下移动的原生开发，毕竟很多东西用flutter是做不到的。

安装配置

安装配置官方有详细文档，不再赘述。
Flutter官网
国内翻译

项目结构

首先我们新建一个Flutter项目，来看一下目录结构：

hello_flutter.png

需要我们重点关注的主要有5个目录：

android：存放android平台相关代码，比如原生和Flutter混编，或者Flutter和Android通过Channel通信的相关代码。
ios：功能同上，存放ios相关。
lib：flutter的核心目录，存放我们自己编写的flutter跨平台代码。
pubspec.yaml：项目的描述和配置文件，比如版本号、依赖库、资源文件等等。类似于android中的build.gradle文件。
test：测试目录，学习阶段可以不使用。

入门

学习一门新的技术，首先要学会的是使用，千万不要一开始就陷入到各种xxx原理解析里面，要不可能就真的是从入门到放弃了。就像Flutter，但凡有点了解的都知道它有一个核心思想：一切皆Widget。它提供了许多的小widget，小到Padding、Size、GestureDetector都是一个widget，我们可以用这些小widget来组合成我们需要的UI。那么首先要做的，抛开生命周期，抛开渲染过程解析，了解一下flutter的内置Widgets，利用它提供的基础widget来编写一个简单的页面（比如登录页），在自己心里对它有一个模糊的概念。

分析

首先简单分析一下登录页的简单实现：

一个简单的垂直方向的线性布局
logo图片
text文本
text输入框
登陆按钮

需要涉及到的Widget：

Text：显示文本，可以自定义样式。
Image：显示图片，可以从网络、本地、内存、资源图片等路径加载。
Row：水平线性布局。
Column：垂直线性布局。
RaisedButton：Material Design风格的按钮。
Container：应该是最常用的一个布局控件了，可以设置背景、尺寸、边距、装饰等。
Expanded：一般用于扩展Row、Column中的某个子widget。

更多内置Widgets

实践

接下来开始实践，新建工程，删除自动生成的Demo代码，从入口函数开始写起：

import 'package:flutter/material.dart';void main(){  runApp(MyApp());}class MyApp extends StatelessWidget{  ///我们需要在build函数中构建出我们的UI  @override  Widget build(BuildContext context) {    return null;  }}

接下来我们写出所要用到的所有小部件：

    //地址为我的头像    Image _logo = Image.network(        "https://upload.jianshu.io/users/upload_avatars/1215918/b54de985d456.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/300/format/webp"    );    Text _textAccount = Text(      "账号：",      textDirection: TextDirection.ltr,      style: TextStyle(color: Colors.pink, fontSize: 14),    );    Text _textPassword = Text(      "密码：",      textDirection: TextDirection.ltr,      style: TextStyle(color: Colors.pink, fontSize: 14),    );    TextField _textFieldAccount = TextField(      decoration: InputDecoration(hintText: "请输入账号"),    );    TextField _textFieldPassword = TextField(      decoration: InputDecoration(hintText: "请输入密码"),    );    RaisedButton _buttonLogin = RaisedButton(      onPressed: () => {},      child: Text("登陆"),    );

最后我们只需要在build方法里面将这些widget组装成我们想要的布局样式：

    return MaterialApp(        home: Scaffold(      body: Container(        color: Colors.white,        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: [            _logo,            Row(              children: [                _textAccount,                Expanded(                    child: _textFieldAccount)              ],            ),            Row(              children: [                _textPassword,                Expanded(                    child: _textFieldPassword)              ],            ),            _buttonLogin,          ],        ),      ),    ));

最外层的MaterialApp和Scaffold是Flutter提供的，用于快速创建Material Design风格的app，因为我们这是使用到了TextField，它要求必须有一个Material Design风格的父Widget。

运行看下效果图：

效果图

实话实说。。。好丑！不过效果还是可以看到的，因为只是为了入门，有个概念，并没有再去各种嵌套调边距什么的，有兴趣的可以自己试试。

完整代码

Flutter之旅：入门

前言

安装配置

项目结构

入门

分析

实践

更多相关文章

随机推荐