移动应用程序开发的未来：Flutter-CSDN博客

本文链接：https://blog.csdn.net/2401_84048935/article/details/137256171

让我们看看几个例子：一个有异步操作，一个没有。

// Without asynchronous operations

import ‘dart:async’;

main() {

longOperation();

printSomething();

}

longOperation() {

Duration delay = Duration(seconds: 3);

Future.delayed(delay);

print(‘Waited 3 seconds to print this and blocked execution.’);

}

printSomething() {

print(‘That sure took a while!’);

}

输出 t ：

Waited 3 seconds to print this and blocked execution.

That sure took a while!

这不太理想。没人会想用在执行长时间操作时会卡住的App。所以让我们稍微修改一下并使用async和await关键字。

// With asynchronous operations

import ‘dart:async’;

main() {

longOperation();

printSomething();

}

Future longOperation() async {

var retVal = await runLongOperation();

print(retVal);

}

const retString = ‘Waited 3 seconds to return this without blocking execution.’;

Duration delay = Duration(seconds: 3);

Future runLongOperation() => Future.delayed(delay, () => retString);

printSomething() {

print(‘I printed right away!’);

}

并再次输出：

I printed right away!

Waited 3 seconds to return this without blocking execution.

有了异步操作，我们在执行需要比较久才能完成的代码的同时，其余代码的执行也不会被妨碍。

二、只写一次代码，就能同时在Android和iOS上运行

========================================================================================

考虑到需要为Android和iOS使用不同的代码库，开发移动应用程序可能需要花费大量时间。除非您使用像Flutter这样的SDK，这样您就将拥有一个能适配两个操作系统的代码库。不仅如此，你还可以完全原生地运行它们。这意味着诸如浏览页面和导航之类的东西，完美配合不同的操作系统。

一言以蔽之，只要您有个设备或模拟器在运行着，Flutter就可以使构建和运行您的应用程序来进行测试的过程简单到动动手指就能完成。

三、UI开发

==================================================================

UI开发几乎是我最不期待的事情之一。我更像是一个后端开发人员，所以当涉及到严重依赖它的东西时，我只想要一些简单的东西。这就是Flutter在我眼中闪耀的地方。

UI通过将不同的小部件组合在一起并修改它们以适合你的App外观来创建。你几乎可以完全控制这些小部件的显示方式，因此你最终总是会得偿所愿。为了布局UI，可以使用诸如Row，Column和Container之类的小部件。对于内容，有诸如Text和RaisedButton之类。这只是Flutter提供的小部件中的几个，除这些之外还有很多。使用这些小部件，我们可以构建一个非常简单的UI：

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(‘Flutter App’),

centerTitle: true,

elevation: 0,

body: Row(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Container(

child: Text(‘Some text’),

Container(

child: RaisedButton(

onPressed: () {

// Do something on press

child: Text(‘PRESS ME’),

);

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gcd7ipPE-1594103092983)(https://upload-images.jianshu.io/upload_images/22436740-905dc24af6484113?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

Flutter像一个拥有各种各样道具的魔术师，使你能轻而易举地构建App的主题。你可以通过手动更改字体，颜色，并逐个设置所有内容，但这需要太长时间了。相反，Flutter为我们提供了一个名为ThemeData的东西，它允许我们为颜色，字体，输入字段等等设值。此功能在保持应用外观的一致性方面很出色。

theme: ThemeData(

brightness: Brightness.dark,

canvasColor: Colors.grey[900],

primarySwatch: Colors.teal,

primaryColor: Colors.teal[500],

fontFamily: ‘Helvetica’,

primaryTextTheme: Typography.whiteCupertino.copyWith(

display4: TextStyle(

color: Colors.white,

fontSize: 36,

使用此ThemeData，我们设置应用程序颜色，字体系列和一些文本样式。除文本样式之外的所有内容都将自动应用于整个app范围。每个小部件的文本样式必须手动地一个一个设置，但这仍然很简单：