Flutter 这么火为什么不了解一下呢？（下，2020-2021 京东 Android 面试真题解析

#####首页获取代码：

• 确定已经设置好环境

• 创建基本 Flutter 工程

#####下来在工程中添加图片：

• 在工程根目录创建 images 目录

• 添加 lake.jpg 图片

• 更新 pubspec.yaml 文件，添加 assets 标签

##Step 1：图解布局 #####第一步是将布局分解成基本元素:

• 区分行与列。

• 布局是否包含一个网格？

• 是否有层叠元素？

• UI 是否需要 tabs？

• 注意需要对齐，内边据或者边框的区域。

首先，识别更大的元素。在这里，四个元素在同一列中：一个图片，两行和一个文本块。

接下来，图解每行。第一行，我们称其 Title Section，有 3 个子组件：一列文本区域，一个星型图标，及一个数字。第一列子组件包含 2 行文本。且第一列占有较大空间，因此需要将两行文本放在 Expanded 组件中。

第二行

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

，我们称其 Button section，同样有 3 个子组件：由三列组成，且每列均由一个图标和文本组成。

在图解了布局之后，再从细节到整体来实现这个布局就容易了。为了让嵌套的代码看起来不那么混乱，我们将一些实现置于变量和函数中。

Step 2：实现 Title Section

首先需要在 Title Section 左侧创建一列。在 Expanded 组件中的 Column 组件使得当前列（column 并非组件）可以覆盖真个 Title section. 将 Column 组件的 crossAxisAlignment 属性设置 CrossAxisAlignment.start ，这样 Column 组件位于当前行的起始位置。

将第一行的文本组件放置于 Container 组件中以便添加 Container 内边据。第二个文本组件文字是灰色。

最后的 2 个组件包括一个红色星型图标和一个数字“41”的文本。将整个标题行（Title Section 图解中的 Row with 3 children）放置在一个 Container 组件中，并且设置 Container 组件 32px 的内边距。

Note: 如何代码实现有问题，可以依据 Github 上的 lib/main.dart 来检查你的代码。

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {Widget titleSection = new Container(padding: const EdgeInsets.all(32.0),child: new Row(children: [new Expanded(child: new Column(crossAxisAlignment: CrossAxisAlignment.start,children: [new Container(padding: const EdgeInsets.only(bottom: 8.0),child: new Text('Oeschinen Lake Campground',style: new TextStyle(fontWeight: FontWeight.bold,),),),new Text('Kandersteg, Switzerland',style: new TextStyle(color: Colors.grey[500],),),],),),new Icon(Icons.star,color: Colors.red[500],),new Text('41'),],),);//...}

Tip: 粘贴代码到工程中时，代码缩进可能错乱。如果是在 IntelliJ 中，可以有单机选择 Reformat with Dart Style。或者在命令行中使用 dartfmt 命令。

Tip: 为体验更快开发过程，尝试使用 Flutter 的热加载功能。热加载使得在修改代码同时快速地在查看到修改后的效果，而不用重运行 app。

##Step 3：实现按钮行（Button Section）

Button Section 包含 3 列相同的布局——一个图标和一个文本。这行中 3 列均匀分布，并且文本和图标颜色是 APP build()方法中设置的 primary color。

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// title section implementation

return new MaterialApp(title: 'Flutter Demo',theme: new ThemeData(primarySwatch: Colors.blue,),

//...}

由于创建每列的代码是相同的，最高效的办法就是创建一个嵌套函数，例如就定义为 buildButtonColumn()，这个方法中创建包含一个图标和一个文本得组件，并且返回 Column 对象。

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {//...

Column buildButtonColumn(IconData icon, String label) {Color color = Theme.of(context).primaryColor;

return new Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: [new Icon(icon, color: color),new Container(margin: const EdgeInsets.only(top: 8.0),child: new Text(label,style: new TextStyle(fontSize: 12.0,fontWeight: FontWeight.w400,color: color,),),),],);}//...}

这个创建方法中直接添加 icon 组件。将文本组件放于 Container 组件中来添加上边距，将 icon 与 text 分离开。

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {//...

Widget buttonSection = new Container(child: new Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [buildButtonColumn(Icons.call, 'CALL'),buildButtonColumn(Icons.near_me, 'ROUTE'),buildButtonColumn(Icons.share, 'SHARE'),],),);//...}

##Step 4：实现多行文本（Text Section）

由于文本太长，其实现我们赋值于一个变量。将文本放在 Container 中，四周边距设置 32px。设置 softwrap 属性，这个属性表示当每行文本遇到句号或者逗号时是否需要换行。

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {//...

Widget textSection = new Container(padding: const EdgeInsets.all(32.0),child: new 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,),);//...}

##Step 5：实现头部图片（Image Section）

目前只剩头部图片部分还未实现。这张图片基于 Creative Commons 协议在网上是可以获取到的（当然学习过程，可以自己比较随意的拿一张图片进行）。由于图片较大且网络加载慢，所以在 Step 0 步骤中已经 inlude 进来并且修改了 pubspec.yml 文件，可以直接在本地进行访问。

body: new ListView(children: [new Image.asset('images/lake.jpg',height: 240.0,fit: BoxFit.cover,),// ...],)

BoxFit.cover 告诉 Framework 图片需要尽可能的小但是需要充满显示部分。

##Step 6：整合

最后一步，将删除个步骤中定义的组件最终整合在一起。所有组件放置于 ListView 中。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {Widget titleSection = new Container(