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。

目录

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