前面三篇可以算是一个小小的里程碑。

主要是介绍了 Flutter 环境的搭建、如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter。

这一篇我们来学习下 Flutter 的 UI。

前言

说到 UI,我就简单说下 Flutter 作为一门跨平台语言具有的优势之一,提高效率吧。

举个例子:

假设现在要开发一个界面,Android 开发需要一天,iOS 开发也需要一天。那么就是两天。

如果你用 Flutter 开发,就只需要一天(因为 Android 和 iOS 都可以共用一套 Flutter 代码)。这样效率自然就提高了。

另外,假设后面产品发现界面有个位置需要调整,如果是 Android 或者 iOS 单独开发,则两个端都需要进行额外调整。

而 Flutter 就一套代码而已,所以相较之下 Flutter 更易维护。

官网关于 UI 的介绍 User interface

这边笔者按照自己的感受和认识进行说明。

读者看完之后有了个基本的认识,后续不管是阅读官方文档还是使用搜索引擎搜索相关问题,相信会事半功倍。

记住一句话:

Flutter 里面一切皆 Widget。

目录

1. 基本配置

我们紧接之前文章,现在进入 MyApp/sub/my_flutter 位置。

打开 main.dart。如果提示下图:

Dart support is not enabled for the project

我们点击右边第一个(Enabled Dart support)或者第二个(Open Dart settings)都是 OK 的。

如果点击第二个,需要配置 dart 的目录。

dart 的目录在 flutter 的 bin 目录下面的 cache 目录下面。

举个例子,笔者的 flutter bin 目录(terminal 执行which flutter)为/Users/nesger/Desktop/nesger_folder/flutter/flutter/bin/,那么 dart 目录就在/Users/nesger/Desktop/nesger_folder/flutter/flutter/bin/cache/dart-sdk

然后直接拷贝下面代码替换 main.dart 的代码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My Flutter'),
),
body: Center(),
)
);
}
}

实际编译器可能会显示如下图,就是会有注释显示每个控件。

这有好处也有坏处。好处就是你可以看到哪一块是哪一个 Widget。坏处就是视觉干扰。

这个是自动产生的,不可删除。

可以通过如下操作控制是否显示:

Android Studio->Preferences->Editor->General->Appearance

2. main.dart 学习

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My Flutter'),
),
body: Center(),
)
);
}
}

执行 flutter run 运行后可以看到下图:

对比上面代码可看到顶部蓝色区域是 AppBar 这个 Widget 来控制的。

你可以自行修改 Text 里面的内容然后按 r 键通过热重载看下效果。

我们可以看到,Flutter 里面的 dart 代码一个比较明显的地方就是一个 Widget 套着一个 Widget,有点树形的样子。

比如这里

我们尝试把 AppBar 去掉,可以看到界面显示就是一片纯白的界面。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(),
)
);
}
}

那么这里的 MaterialApp Widget 是不是必需的呢?

其实 MaterialApp 说明这个界面是按照 Material Design 的风格。

我们看下如果去掉会怎样?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(),
);
}
}

所以说 Scaffold 这个 Widget 不能直接返回,我们需要给它外面套一层 MaterialApp。

可以看下这个链接:https://github.com/nesger/FlutterNote/issues/4

我们返回之前的状态,然后给他加一个 Hello World,看下怎样?

我们知道,Flutter 一切皆 Widget,所以需要显示 Hello World,就需要 Widget。

Widget 可以通过这个链接查看:https://flutter.io/docs/development/ui/widgets

可以看到 Text 这个 Widget

点击进入

再点击进入,可以看到介绍以及 Sample。

大家以后如果要看其他 Widget 也可以按照同样的方式学习。

当然如果时间要求比较紧的话,大家学完博客可以直接在搜索引擎输入关键字看下别人的 Sample,然后化用一下就没问题啦。

我们点击右边复制,然后简单修改如下:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text(
'Hello World!',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
);
}
}

可以看到我们将其放到 Center 这个 Widget 里面,表示居中,同时作为它的一个 child。

大家可以试下去掉 Center 会怎样,直接将 Text 作为 body,如下:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Text(
'Hello World!',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
);
}
}

可以想象应该是不居中的。

到了这里你应该可以发现,我们整个页面其实是 body 对应的 Widget 来控制的。

上面我们的例子都是 MaterialApp,是不是一定只能这个 Widget 在最外层?

不是的,只是这里 Scaffold 跟它配对而已,我们可以修改如下:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
),
);
}
}

注意多了一行textDirection: TextDirection.ltr,没有会报错。

3. 以 Text 为例子初窥 Widget 写法

我们点进去 Text 源码看下,

对比一下上面我们的代码:

Text(
'Hello, world!',
textDirection: TextDirection.ltr,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
)

我们可以这样认为,括号里面的是待传入参数。其中没有花括号{}包裹的是必填项,有花括号{}的是选填项。

有花括号{}的在传入参数时需要指定参数,格式为参数:值。不同参数之间逗号分隔。

所以我们可以猜测上面 Center 下面的 child 应该是在花括号里面。所以才会有上面的写法,我们跟进去源码看看。

确实跟我们猜的一样。而且由于参数的类型是 Widget,所以可以传 Text 也是没问题的。

所以到这里你再回顾一下上面是不是就知道上面代码的写法了呢?

总结

由于 Flutter UI 内容比较多,讲起来篇幅会比较大。

所以我们会拆分成几篇文章进行讲解。

回顾一下,本篇文章主要讲解如下内容:

  1. dart sdk 配置和 dart 源代码括号后面编译器提示的显示和隐藏。
  2. 通过 main.dart 的修改初步熟悉 Flutter 界面的写法。
  3. 通过 Text 说明如何在官方文档上面查找控件和对应 Sample。
  4. 通过一个具体的小控件 Text 初窥 Flutter Widget 的写法和使用方法。

小彩蛋

这个彩蛋是微信群里一个小伙伴说到的。这里分享给大家。

简单说就是设置 Android Studio 的背景图。

先上图

大家觉得哪种更加赏心悦目呢?

可以根据自己的喜好确定是否设置。

设置方法为

其中 Opacity 是不透明度。

0 表示完全透明,跟没设置一样。100 表示完全不透明。

一般默认即可。

背景图公众号回复「ASBG」获取。

更多阅读:

Flutter 即学即用系列博客——01 环境搭建

Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

Flutter 即学即用系列博客——03 在旧有项目引入 Flutter

Flutter 即学即用系列博客——04 Flutter UI 初窥的更多相关文章

  1. Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget

    前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...

  2. Flutter 即学即用系列博客——09 EventChannel 实现原生与 Flutter 通信(一)

    前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生 ...

  3. Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信

    背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么 ...

  4. Flutter 即学即用系列博客——06 超实用 Widget 集锦

    本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...

  5. Flutter 即学即用系列博客总结篇

    前言 迟到的总结篇,其实大家看我之前发的系列博客最后一篇,发文时间是 3 月 29 日.距离现在快两个月了. 主要是因为有很多事情在忙,所以这篇就耽搁了. 今天终于可以跟大家会面了. 系列博客背景 F ...

  6. Flutter 即学即用系列博客——09 MethodChannel 实现原生与 Flutter 通信(二)

    前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 Meth ...

  7. Flutter 即学即用系列博客——03 在旧有项目引入 Flutter

    前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...

  8. Flutter 即学即用系列博客——10 混淆

    前言 之前的博客我们都是在 debug 的模式下进行开发的. 实际发布到市场或者给到用户的都是 release 包. 而对于 Android 来说,release 包一个重要的步骤就是混淆. Andr ...

  9. Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

    前言 上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC ...

随机推荐

  1. Linux下MySQL的数据文件存放位置

    http://bbs.csdn.net/topics/390620630mysql> show variables like '%dir%';+------------------------- ...

  2. maven重新导入,不能拉到最新jar包的问题

    需要删除本地jar,再重新reimport  pom.xml

  3. echart css样式弄了几个月了,样式一直都没有好好解决,好激动

    legend 图例,每个图表最多仅有一个图例.try this » 名称 默认值 描述 {string} orient 'horizontal' 布局方式,默认为水平布局,可选为:'horizonta ...

  4. DOM元素的Attribute(特性)和Property(属性) 【转载】

    1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...

  5. RabbitMQ (四) 路由选择 (Routing)

    上一篇博客我们建立了一个简单的日志系统,我们能够广播日志消息给所有你的接收者,如果你不了解,请查看:RabbitMQ (三) 发布/订阅.本篇博客我们准备给日志系统添加新的特性,让日志接收者能够订阅部 ...

  6. 树链剖分的一种妙用与一类树链修改单点查询问题的时间复杂度优化——2018ACM陕西邀请赛J题

    题目描述 有一棵树,每个结点有一个灯(初始均是关着的).每个灯能对该位置和相邻结点贡献1的亮度.现有两种操作: (1)将一条链上的灯状态翻转,开变关.关变开: (2)查询一个结点的亮度. 数据规模:\ ...

  7. mysql事务隔离级别和MVCC

    一.三种问题: 脏读(Drity Read):事务A更新记录但未提交,事务B查询出A未提交记录. 不可重复读(Non-repeatable read):在一个事务的两次查询之中数据不一致,这可能是两次 ...

  8. 【爆料】-《南澳大学毕业证书》UniSA一模一样原件

    ☞南澳大学毕业证书[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&a ...

  9. Android--APP性能测试工具GT的使用总结

    GT(随身调)是APP的随身调测平台,它是直接运行在手机上的"集成调测环境"(IDTE, Integrated Debug Environment).利用GT,仅凭一部手机,无需连 ...

  10. 深入浅出Git教程(转载)

    目录 一.版本控制概要 1.1.什么是版本控制 1.2.常用术语 1.3.常见的版本控制器 1.4.版本控制分类 1.4.1.本地版本控制 1.4.2.集中版本控制 1.4.3.分布式版本控制 1.5 ...