Flutter 即学即用系列博客——04 Flutter UI 初窥

Flutter 即学即用系列博客——04 Flutter UI 初窥

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

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

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

前言

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

举个例子:

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

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

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

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

官网关于 UI 的介绍 User interface

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

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

记住一句话:

Flutter 里面一切皆 Widget。

目录

Flutter 即学即用系列博客——04 Flutter UI 初窥

1. 基本配置

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

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

Flutter 即学即用系列博客——04 Flutter UI 初窥

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(), ) ); } }

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

Flutter 即学即用系列博客——04 Flutter UI 初窥

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

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

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

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

Flutter 即学即用系列博客——04 Flutter UI 初窥

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 运行后可以看到下图:

Flutter 即学即用系列博客——04 Flutter UI 初窥

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

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

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

比如这里

Flutter 即学即用系列博客——04 Flutter UI 初窥

我们尝试把 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(), ) ); } }

Flutter 即学即用系列博客——04 Flutter UI 初窥

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwxgs.html