带你高效入门 Flutter(1)

最新推荐文章于 2024-11-07 15:46:40 发布

2401_84123113

最新推荐文章于 2024-11-07 15:46:40 发布

阅读量695

点赞数 18

分类专栏：程序员文章标签： flutter

本文链接：https://blog.csdn.net/2401_84123113/article/details/137437323

版权

程序员专栏收录该内容

476 篇文章 0 订阅

订阅专栏

本文介绍了Dart中的dynamic关键字，如何声明和使用动态类型，以及在Flutter中处理函数、可选参数、Future、async/await和异步任务的方法。还详细讲解了Flutter中的基础控件如Widget、StatefulWidget和StatelessWidget，以及布局和功能控件的应用。

摘要由CSDN通过智能技术生成

dynamic

如果还是非要这样写，那也可以。Dart 有一个特有的关键字 dynamic，把 Object 改成 dynamic 就不报错了：

dynamic num = 666;

void main() {
num = “666”;
print(num.length);
}

我们运行一下这个文件，可以在控制台看到正确打印出了字符串长度。

dynamic 是动态的意思，使用它声明的话，系统会去找到可用的属性和函数来调用。但这种写法其实是不太安全的，因为即使你把属性名拼错了，编译器也是不会报错的，要到运行时才会报错。

函数

dynamic

在 Dart 里，函数也是可以不写返回类型的，不写的话会被当做 dynamic 来处理。这样的话，函数的类型就是 return 的类型，如果没有 return 则是 void 类型。比如可以这样:

main() {
print(getNum().length);
}

getNum(){
return “666”;
}

运行之后是能正确打印出字符串长度的。

用于传参

Dart 里的函数也是一个对象，所以可以把函数作为参数来传递，比如：

main() {
execute(print666);
}

print666() {
print(“666”);
}

execute(Function fun){
fun();
}

可选参数

在 Dart 的函数传参里，有一个叫可选参数的概念，我们以文字控件 Text 为例，在源码里可以看到 Text 的构造函数是这样的:

const Text(
this.data, {
Key key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
})

首先，在参数里有一个 data，它是要显示的文字内容，是一个必填项。而 data 后面的一堆参数，是用一个大括号括起来的，这些参数就叫做可选参数，意思是这些参数可传可不传。

假如我们要显示一个比较长的文字，又想限制它最多显示两行，就可以这样来创建一个 Text:

new Text(“666666666666”, maxLines: 2);

可选参数，在 Flutter 里面用的非常多。

异步

Future

在 Dart 里使用 Future 来处理异步任务，比如我们现在延时一秒打印 666，代码如下：

void main() {
Future.delayed(new Duration(seconds: 1), () {
return “666”;
}).then((data) {
// 成功后执行
print(data);
}).catchError((e) {
// 失败后执行
print(“error”);
}).whenComplete(() {
// 无论成功失败都会执行
print(“complete”);
});
}

Future 的语法和 Promise 非常像。任务执行成功会调用 then，执行失败会调用 catchError，而无论成功还是失败，都会调用 whenComplete。

async/await

如果你不喜欢上面那种写法，或者是想把异步转成同步，就可以用 async 和 await 这两个关键字来转换。

我们把上面的代码转换一下，写一个 getString 方法，返回的类型是 Future，它会延时返回一个字符串。在 main 函数后面加上 async 关键字，在 getString() 前面加上 await，代码如下:

void main() async{
print(await getString());
}

getString() {
return Future.delayed(new Duration(seconds: 1), () {
return “666”;
});
}

运行之后可以看到，能正常延时一秒后，把字符串打印出来。这里 getString() 返回的类型是 Future，而 await getString() 则是返回了延时之后返回的字符串。await 要在 async 的函数里面才能使用。

async 和 await 其实是一个语法糖，它最终也是转换成 Future 调用链的形式执行的。

万物皆控件

接下来回到 Flutter，Flutter 里最重要的一个概念是 Widget（下面翻译作控件）。

在原生开发里面，我们可能会在界面上区分，这是一个 View，这是一个 Layout，这是一个 View Controller。但在 Flutter 里面，它们全都属于一个统一的模型 Widget。可以说，在 Flutter 界面里，所有东西都是 Widget。

以前学面向对象的时候，我们都听过一句话，叫万物皆对象。我这里套用一下，在 Flutter 里，万物皆控件。

具体有哪些控件，我做了一下简单的分类。

根控件

class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MyWidget();
}
}

所有的控件都属于 StatefulWidget 或 StatelessWidget。它们的区别是，StatefulWidget 拥有状态 State，而 StatelessWidget 没有。

StatefulWidget

当一个控件是可变的时候，就要使用 StatefulWidget 来构建。StatefulWidget 本身不可变，但它持有的状态 State 是可变的。

StatelessWidget

当一个控件状态是固定不可变的时候，就可以使用 StatelessWidget。前面我们写的 Hello World 就是使用 StatelessWidget。

容器控件

Center(
child: MyWidget()
)

容器类控件一般是将某些属性或配置，作用在它的子控件上，比如控件所在的宽高、背景、位置等。

常用的容器控件有 Container、Center、Padding 等。

布局控件

Column(children: [
MyWidget1(),
MyWidget2()
])

布局控件可以类比作原生开发中的 Layout，通常它会拥有一个 children 的属性，用于接收一个控件数组，对这些控件进行特定的排版。

常用的布局控件有 Row、Column、Stack、Flex 等。

基础控件

Text(“666”)

基础控件就是常用的文字、按钮、图片等控件。

常用的基础控件有 Text、TextField、Button、Image 等。

功能控件

Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return NewPage();
}));

在 Flutter 里还有一类控件，它们不影响 UI 布局，但带有一些特定的功能，比如页面跳转、事件监听、定义主题等。我们把这一类控件称作功能控件。

常用的功能控件有 Navigator、NotificationListener、Theme 等。

计数器

开始写 Flutter 代码了。还记不记得，在 Flutter 项目创建之后，是自带一个计数器 demo 的，现在我们用自己的代码实现一遍。代码修改成如下：

import ‘package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: MyPage());
}
}

class MyPage extends StatefulWidget {
@override
State createState() {
return MyPageState();
}
}

class MyPageState extends State {
int num = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“计数器”),
),
body: Center(
child: Text(
num.toString(),
style: TextStyle(fontSize: 36)
)
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
num++;
});
}));
}
}

运行之后，就可以看到这样的界面了：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

按钮每点击一次，数字就会加一。下面我们来分析一下这段代码，看下里面用到的一些 Widget。

StatefulWidget

由于页面中的数字是跟随状态变化的，所以该页面改用 StatefulWidget。StatefulWidget 并不会直接返回一个 Widget，而是返回状态 State，在 State 里再返回 Widget。

Scaffold

Scaffold 是一个标准的 Material Design 页面，它包含了标题栏、浮动按钮、侧滑菜单、底部导航栏等配置。我们这里用到了标题栏 appBar、页面内容 body、浮动按钮 floatingActionButton。

AppBar

AppBar 就是标题栏，通过查看控件的构造方法，我们可以知道它可配置的属性。

AppBar 的可选参数除了标题 title，还可以配置标题前的内容 leading，右侧的操作按钮 anctions，控件垂直高度 elevation 等。我们只传了 title，其他属性都用默认值。

Center

Center 是一个容器类控件，它的作用就是让它的子控件居中显示。

FloatingActionButton

熟悉安卓开发的应该对这个控件比较熟悉，它就是页面右下角一个特定样式的 Button，参数里面的 onPressed 是一个必填项，要传一个点击之后的回调函数。

根据这个例子，下面给大家介绍一下 Flutter 两个比较重要的特性。

响应式 UI

点击 Button 之后，我们把 num 变量加一，并使用 setState 通知状态发生了改变，Flutter 会根据新的状态更新 UI。如果有接触过小程序开发，setState 就和小程序的 setData 类似。

在 Flutter 里面我们不需要用 set 方法来更新 UI，可变控件是和状态绑定的，这就是 Flutter 的响应式 UI 编程。

热重载

在 Android Q 和 iOS 13 里都加入了暗黑模式，我们也换一个暗黑主题来玩一下。MaterialApp 里有一个 theme 的属性，我们把它配置一下:

return MaterialApp(
theme: ThemeData.dark(),
home: MyPage()
);

这次改完之后不点 Run 了，我们点一下闪电图标 Flutter Hot Reload，就能看到界面发生了变化:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这就是 Flutter 的热重载，在修改完代码之后，通过热重载就能马上在设备上看到修改结果，可以很大程度上增加开发效率。

下面再给大家介绍几个 Flutter 里的常见操作。

页面跳转

在 Flutter 里，使用 Navigator 来管理页面跳转，比如要跳转到一个 NewPage 可以这样写:

Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return NewPage();
}));

进栈使用 push，出栈则是 pop。

使用 MaterialPageRoute 会模拟出 Android 上页面跳转的过场效果。

本地图片

我们来看看怎么显示一张本地图片。

先在根目录新建一个存放图片的文件夹，比如叫 images，把图片 picture.png 放进去。

找到根目录下的 pubspec.yaml 文件，这个便是 Flutter 依赖配置文件，我们需要在这里配置一下刚才的图片：

assets:

images/picture.png

这样，我们就能使用 Image 控件把这张图片显示出来了：

Image.asset(“images/picture.png”))

引入第三方库

和 node 的 npm 以及 Android 的 jcenter 类似，Flutter 也拥有一个公共仓库 pub.dev。pub.dev 是 Google 官方的 Dart 仓库，在上面可以找到我们需要的包和插件。

Flutter 本身没有 Toast，我们来接入一个。在 pub.dev 上搜索后，我决定使用 fluttertoast：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

按照说明，在 pubspec.yaml 文件里的 dependencies 下配置：

fluttertoast: ^3.1.0

点一下 Android Studio 右上角的 Packages get 同步之后就可以使用了：

Fluttertoast.showToast(msg: “666666”);

iOS 样式

我们上面使用的都是 Material Design 的控件，它们都是在 flutter/material.dart 包里面的。如果要使用 iOS 风格的控件，则要用到 flutter/cupertino.dart 包：

import ‘package:flutter/cupertino.dart’;

iOS 风格的控件，基本都以 Cupertino 开头。我们把计时器页面里的控件替换一下：

import ‘package:flutter/cupertino.dart’;

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(home: MyPage());
}
}

class MyPage extends StatefulWidget {
@override
State createState() {
return MyPageState();
}
}

class MyPageState extends State {
int num = 0;

@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text(“计数器”),
),
child: Container(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(num.toString(), style: TextStyle(fontSize: 36)),
CupertinoButton(
color: CupertinoColors.activeBlue,
child: Icon(CupertinoIcons.add),
onPressed: () {
setState(() {
num++;
});
})
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。