[译] 深入了解 Flutter，从基础到源码统统帮你搞定

最新推荐文章于 2024-09-16 20:13:32 发布

2401_83947105

最新推荐文章于 2024-09-16 20:13:32 发布

阅读量309

点赞数 3

分类专栏： 2024年程序员学习文章标签： flutter javascript 前端

本文链接：https://blog.csdn.net/2401_83947105/article/details/137099216

版权

2024年程序员学习专栏收录该内容

270 篇文章 1 订阅

订阅专栏

文章介绍了如何通过Flutter的UI-as-code方法重构一个湖泊探险家应用程序的组件树，强调了命名子表达式和功能抽象的重要性，以提高代码可读性和复用性。作者还提到了在Android开发中提升技能和职业发展的紧迫性。

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

挑战

flutter.io 的布局教程提供了一个说明性的例子——看起来像是——一个湖泊探险家应用程序。

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

这是实现此视图的原始组件树：

import ‘package:flutter/material.dart’;

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter Demo’,
home: Scaffold(
appBar: AppBar(title: Text(‘Top Lakes’)),
body: ListView(
children: [
Image.asset(
‘images/lake.jpg’,
width: 600.0,
height: 240.0,
fit: BoxFit.cover,
),
Container(
padding: const EdgeInsets.all(32.0),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
‘Oeschinen Lake Campground’,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Text(
‘Kandersteg, Switzerland’,
style: TextStyle(color: Colors.grey[500]),
),
],
),
),
Row(
children: [
Icon(Icons.star, color: Colors.red[500]),
Text(‘41’),
],
),
],
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.call, color: Theme.of(context).primaryColor),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
‘CALL’,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Theme.of(context).primaryColor,
),
),
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.near_me,
color: Theme.of(context).primaryColor),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
‘ROUTE’,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Theme.of(context).primaryColor,
),
),
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.share, color: Theme.of(context).primaryColor),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
‘SHARE’,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Theme.of(context).primaryColor,
),
),
),
],
),
],
),
),
Container(
padding: const EdgeInsets.all(32.0),
child: Text(
'Lake Oeschinen lies at the foot of the Blüemlisalp in the ’
'Bernese Alps. Situated 1,578 meters above sea level, it ’
'is one of the larger Alpine Lakes. A gondola ride from ’
'Kandersteg, followed by a half-hour walk through pastures ’
'and pine forest, leads you to the lake, which warms to ’
'20 degrees Celsius in the summer. Activities enjoyed here ’
‘include rowing, and riding the summer toboggan run.’,
softWrap: true,
),
),
],
),
),
);
}
}

这只是一个静态组件树，没有实现任何行为。但是将视图逻辑直接嵌入到这样的树中估计不会是一次愉快的体验。

接受挑战。

重新审视代码编写 UI

使用 Flutter 的 UI-as-code 方法时，组件树就是代码。因此，我们可以使用所有常用的代码组织工具来改善这种情况。工具箱中最简单的工具之一就是命名子表达式。这会在语法上将组件树翻出来。而不是

return A(B(C(D(), E())), F());

我们可以命名每个子表达式并得到

final Widget d = D();
final Widget e = E();
final Widget c = C(d, e);
final Widget b = B©;
final Widget f = F();
return A(b, f);

我们的湖泊应用可以重写成下面这样：

import ‘package:flutter/material.dart’;

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Widget imageSection = Image.asset(
‘images/lake.jpg’,
width: 600.0,
height: 240.0,
fit: BoxFit.cover,
);
final Widget titles = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
‘Oeschinen Lake Campground’,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Text(
‘Kandersteg, Switzerland’,
style: TextStyle(color: Colors.grey[500]),
),
],
);
final Widget stars = Row(
children: [
Icon(Icons.star, color: Colors.red[500]),
Text(‘41’),
],
);
final Widget titleSection = Container(
padding: const EdgeInsets.all(32.0),
child: Row(
children: [
Expanded(child: titles),
stars,
],
),
);
final Widget callAction = Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.call, color: Theme.of(context).primaryColor),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
‘CALL’,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Theme.of(context).primaryColor,
),
),
),
],
);
final Widget routeAction = Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.near_me, color: Theme.of(context).primaryColor),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
‘ROUTE’,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Theme.of(context).primaryColor,
),
),
),
],
);
final Widget shareAction = Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.share, color: Theme.of(context).primaryColor),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
‘SHARE’,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Theme.of(context).primaryColor,
),
),
),
],
);
final Widget actionSection = Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
callAction,
routeAction,
shareAction,
],
),
);
final Widget textSection = Container(
padding: const EdgeInsets.all(32.0),
child: Text(
'Lake Oeschinen lies at the foot of the Blüemlisalp in the ’
'Bernese Alps. Situated 1,578 meters above sea level, it ’
'is one of the larger Alpine Lakes. A gondola ride from ’
'Kandersteg, followed by a half-hour walk through pastures ’
'and pine forest, leads you to the lake, which warms to ’
'20 degrees Celsius in the summer. Activities enjoyed here ’
‘include rowing, and riding the summer toboggan run.’,
softWrap: true,
),
);
final Widget scaffold = Scaffold(
appBar: AppBar(title: Text(‘Top Lakes’)),
body: ListView(
children: [
imageSection,
titleSection,
actionSection,
textSection,
],
),
);
return MaterialApp(
title: ‘Flutter Demo’,
home: scaffold,
);
}
}

缩进级别现在更合理，我们可以通过引入更多名称使子树的缩进级别变得像我们希望的那样浅。更好的是，通过为各个子树提供有意义的名称，我们可以表示每个子树的作用。所以我们现在可以谈谈 xxxAction 子树…并观察到我们在这里面有很多重复的代码！另一个基本的代码组织工具——功能抽象——负责这部分内容：

import ‘package:flutter/material.dart’;

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Widget imageSection = …
final Widget titles = …
final Widget stars = …
final Widget titleSection = …

Widget action(String label, IconData icon) {
final Color color = Theme.of(context).primaryColor;
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, color: color),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
label,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: color,
),
),
),
],
);
}

final Widget actionSection = Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
action(‘CALL’, Icons.call),
action(‘ROUTE’, Icons.near_me),
action(‘SHARE’, Icons.share),
],
),
);
final Widget textSection = …
final Widget scaffold = …
return MaterialApp(
title: ‘Flutter Demo’,
home: scaffold,
);
}
}

我们将看到一个简单功能抽象的替代，它会更具有更 Flutter 风格的。

重新审视组成

接下来是什么？好吧，build 方法依然很长。也许我们可以提取一些有意义的作品…片断？组件！Flutter 的组件都是关于组合和重用的。我们用框架提供的简单组件组成了一个复杂的组件但是发现结果过于复杂，我们可以选择把它分解成不太复杂的自定义组件。定制组件是 Flutter 世界中的一等公民，而明确定义的组件具有很大的潜力被重用。让我们将 action 函数转换为 Action 组件类型并将其放在自己的文件中：