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?

https://flutter.io/docs/development/ui

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

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

记住一句话：

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 的代码。

代码语言：javascript复制

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 学习

代码语言：javascript复制

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 去掉，可以看到界面显示就是一片纯白的界面。

代码语言：javascript复制

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 的风格。

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

代码语言：javascript复制

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，然后化用一下就没问题啦。

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

代码语言：javascript复制

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，如下：

代码语言：javascript复制

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 跟它配对而已，我们可以修改如下：

代码语言：javascript复制

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 源码看下，

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

代码语言：javascript复制

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

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

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

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