# Dart

## 一、开发资源

* [Dart官网](http://dart.goodev.org/)&#x20;
* [结合Flutter 的Dart](https://flutterchina.club/bootstrap-into-dart/)&#x20;
* [在线开发Dart](https://dartpad.dartlang.org/) &#x20;
* [高效Dart代码](http://dart.goodev.org/guides/language/effective-dart) &#x20;
* [Dart库](http://dart.goodev.org/guides/libraries) &#x20;
* [Dart示例](http://dart.goodev.org/samples) &#x20;
* [Dart推荐书籍](http://dart.goodev.org/resources/books)
* [Dart开发工具](http://dart.goodev.org/tools)

## 二、工具

* IntelliJ IDE
* WebStorm

## 三、问题

### 问题：StatelessWidget与StatefulWidget的区别

Flutter 使用 StatefulWidgets 来实现这一想法。StatefulWidgets 是一种特殊的 widget，它会生成 State 对象，用于保存状态。

### 问题：Material组件有什么东西，能用来做什么，是包括了一下写好的widgets吗

* Material 是 Flutter 中两个自带的设计之一，如果想要以 iOS 为主的设计，可以参考 Cupertino component，它有自己版本的 CupertinoApp 和 CupertinoNavigationBar。
* 默认情况下，非 Material app 不包含 AppBar、标题和背景颜色。如果你希望在非 Material app 中使用这些功能，则必须自己构建它们。对于非 Material app，你可以将 Center widget 添加到 app 的 build() 方法里：
* 对于 Material app，你可以使用 Scaffold 组件，它提供默认的 banner、背景颜色，还有用于添加抽屉、提示条和底部列表弹窗的 API。你可以将 Center widget 直接添加到主页 body 的属性中。
* widget 会分为两类：widgets 库 中的标准 widgets 和 Material 库 中的 widgets。 任何 app 都可以使用 widget 库，但是 Material 库中的组件只能在 Material app 中使用。

### 问题：Dart代码中的child和children有什么区别

我感觉child有点像是widget下的属性propertice，child下面有很多的属性

### 问题：Scaffold是什么

Scaffold class 介绍 <https://api.flutter.dev/flutter/material/Scaffold-class.html>

### 问题：Widget build(BuildContext context) {}这段代码是返回样式吗，为什么有的class类中可以不写？

Flutter 布局的核心机制是 widgets。在 Flutter 中，几乎所有东西都是 widget —— 甚至布局模型都是 widgets。你在 Flutter 应用程序中看到的图像，图标和文本都是 widgets。此外不能直接看到的也是 widgets，例如用来排列、限制和对齐可见 widgets 的行、列和网格。一个 Flutter app 本身就是一个 widget，大多数 widgets 都有一个 build() 方法。 在 app 的 build() 方法中实例化和返回一个 widget 会让它显示出来。

### 问题：widget布局图介绍

<https://flutter-io.cn/docs/development/ui/layout>

### 问题：Container 主要用来实现什么呢？

Container 是一个 widget，允许你自定义其子 widget。如果要添加 padding、margin、边框或背景颜色，你就可以用上 Container 了。

### 问题：常见的widget有哪些

```
Text widget：
Text('Hello World'),

Image widget：
Image.asset(
  'images/lake.jpg',
  fit: BoxFit.cover,
),

Icon widget：
Icon(
  Icons.star,
  color: Colors.red[500],
),
```

### 问题：可见widget和布局widget都指的是哪些？他们的关系是什么？

布局widget： Center

* 所有布局 widgets 都具有以下任一项：&#x20;
* 一个 child 属性，如果它们只包含一个子项 —— 例如 Center 和 Container&#x20;
* 一个 children 属性，如果它们包含多个子项 —— 例如 Row、Column、ListView 和 Stack&#x20;
* 一个child一般放在Container下面，Container一般用来放自定义的Widget，一个Children下可以有多个Children

```
// 将 Text widget 添加进 Center widget：
content_copy
Center(
  child: Text('Hello World'),
),
```

### 问题：有哪些布局模式

最常见的布局模式之一是垂直或水平 widgets。 你可以使用 Row widget 水平排列 widgets，使用 Column widget 垂直排列 widgets。

### 问题：Row 和 Column 使用注意事项

* Row 和 Column 是两种最常用的布局模式。
* Row 和 Column 每个都有一个子 widgets 列表。
* 一个子 widget 本身可以是 Row、Column 或其他复杂 widget。
* 可以指定 Row 或 Column 如何在垂直和水平方向上对齐其子项。
* 可以拉伸或限制特定的子 widgets。
* 可以指定子 widgets 如何占用 Row 或 Column 的可用空间。
* 和 Row 相比你可能更喜欢 ListTile，这是一个易于使用的 widget，有属性可以设置头尾图标，最多可以显示 3 行文本；和 Column 相比你也可能更喜欢 ListView，这是一种类似于列的布局，但如果其内容太长导致可用空间不够容纳时会自动滚动。

### 问题：标准的widget有哪些

* Container：向 widget 增加 padding、margins、borders、background color 或者其他的装饰。
* GridView：将 widget 展示为一个可滚动的网格。
* ListView：将 widget 展示为一个可滚动的列表。
* Stack：将 widget 覆盖在另一个的上面。

### 问题：Material widgets有哪些

* Card：将相关信息整理到一个有圆角和阴影的盒子中。
* ListTile：将最多三行的文本、可选的导语以及后面的图标组织在一行中。

### 问题：Stack一般用在哪里&#x20;

* 可以使用 Stack 在基础 widget（通常是图片） 上排列 widget。widget 可以完全或者部分覆盖基础 widget。
* 叠加在别的widget上面 Stack 的内容是无法滚动的。

### 问题：row和column的相似类别

* column与ListView相似，row与ListTile相似

### 问题：flutter项目中代码调用是否有先后

* 有的，如果被调用的方法是当前类，且在调用方法之后，会报错，必须放到调用者前面。

### &#x20;问题：flutter中文字怎么换行

* 添加softWrap: true,这个是Text Widget中的一个属性

### 问题：ListView能实现什么？

* ListView，一个和列很相似的 widget，当内容长于自己的渲染盒时，就会自动支持滚动。&#x20;
* 一个用来组织盒子中列表的专用 Column&#x20;
* 可以水平或者垂直布局

### 问题：ListTile常用在那里

* ListTile 是 Material 库 中专用的行 widget，它可以很轻松的创建一个包含三行文本以及可选的行前和行尾图标的行。&#x20;
* ListTile 在 Card 或者 ListView 中最常用，但是也可以在别处使用。、

### 问题：分隔线怎么实现

```
Divider(),
```

### 问题：Card能实现什么效果

* 在 Flutter 中，Card 有轻微的圆角和阴影来使它具有 3D 效果。改变 Card 的 elevation 属性可以控制阴影效果。例如，把 elevation 设置为 24，可以从视觉上更多的把 Card 抬离表面，使阴影变得更加分散。关于支持的 elevation 的值的列表，可以查看 Material guidelines 中的 Elevation。使用不支持的值则会使阴影无效。 Card 只有一个子项，这个子项可以是列、行、列表、网格或者其他支持多个子项的 widget。 默认情况下，Card 的大小是 0x0 像素。你可以使用 SizedBox 控制 card 的大小。

### 问题：GridView是类似瀑布流吗？

* 使用 GridView 将 widget 作为二维列表展示。GridView 提供两个预制的列表，或者你可以自定义网格。当 GridView 检测到内容太长而无法适应渲染盒时，它就会自动支持滚动。&#x20;
* 实在在网格中使用的 widget&#x20;
* 创建自定义的网格，或者使用下面提供的网格的其中一个：

```
GridView.count 允许你制定列的数量
GridView.extent 允许你制定单元格的最大宽度
```

### 问题：Container 主要用来实现什么呢？

* 许多布局都可以随意的用 Container，它可以将使用了 padding 或者增加了 borders/margins 的 widget 分开。 你可以通过将整个布局放到一个 Container 中，并且改变它的背景色或者图片，来改变设备的背景。 只包含一个子 widget，但是这个子 widget 可以是行、列或者是 widget 树的根 widget

### 问题：flutter项目怎么添加图片

```
更新 pubspec.yaml 文件，添加一个 assets 标签。这使得在你的代码中可以访问到该图片。
+ assets:            
    + - images/lake.jpg
```

### 问题：设置Expanded的作用是什么？

* 设置了之后可以拉伸
* 将 Column 元素放到 Expanded widget 中可以拉伸该列，以利用该行中所有剩余的闲置空间。 设置 crossAxisAlignment 属性值为 CrossAxisAlignment.start， 这会将该列放置在行的起始位置。

```dart
Widget titleSection = Container(
  padding: const EdgeInsets.all(32),
  child: Row(
    children: [
      Expanded(
        /*1*/
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            /*2*/
            Container(
              padding: const EdgeInsets.only(bottom: 8),
              child: Text(
                'Oeschinen Lake Campground',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Text(
              'Kandersteg, Switzerland',
              style: TextStyle(
                color: Colors.grey[500],
              ),
            ),
          ],
        ),
      ),
      /*3*/
      Icon(
        Icons.star,
        color: Colors.red[500],
      ),
      Text('41'),
    ],
  ),
);
```

### 问题：下面的说法正确吗？

一个Container只能有一个child，一个Row或者Column或者ListView只有一个children

### 问题：无边界约束怎么设置？

* 传递给框的约束是 无边界 的或无限的。这意味着约束的最大宽度或最大高度为double.INFINITY&#x20;
* 当传递无边界约束给类型为尽可能大的框时会失效，在 debug 模式下，则会抛出异常，该异常信息会把你引导到本页面。
* 渲染框具有无边界约束的最常见情况是：当其被置于 flex boxes ( Row 和 Column )内以及可滚动区域( ListView 和其它 ScrollView 的子类)内时。

### 问题：无边界处理Row和Column注意事项

* Flex 框本身( Row 和 Column )的行为会有所不同，这取决于其在给定方向上是处于有边界约束还是无边界约束。
* 在有边界约束条件下，它们在给定方向上会尽可能大。
* 在无边界约束条件下，它们试图让其子 widget 自适应这个给定的方向。在这种情况下，不能将子 widget 的flex属性设置为 0（默认值）以外的任何值。这意味着在 widget 库中，当一个 flex 框嵌套在另外一个 flex 框或者嵌套在可滚动区域内时，不能使用 Expanded 。如果这样做了，就会收到异常，该异常信息会把你引导到本页面。
* 在交叉方向上，如 Column（垂直的 flex）的宽度和 Row（水平的 flex）的高度，它们必将不能是无界的，否则它们将无法合理地对齐它们的子 widget。

### 问题：如何自定义一个StatefulWidget的类

* 需要创建两个类:&#x20;
* 一个 StatefulWidget 的子类，用来定义一个 widget 类。
* 一个 State 的子类，包含该widget状态并定义该 widget 的 build() 方法.

### 问题：状态的管理方法应该怎么挑选？

* widget 管理自己的状态
* 父 widget 管理此 widget 的状态
* 混搭管理
* 规则：如果状态是用户数据，如复选框的选中状态、滑块的位置，则该状态最好由父 widget 管理 如果所讨论的状态是有关界面外观效果的，例如动画，那么状态最好由 widget 本身来管理. 如果有疑问，首选是在父 widget 中管理状态

### 问题：GestureDetector类似Container吗？BoxDecoration又是什么？

* [GestureDetector class](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html)介绍，包在这个里面的widget可以使用手势
  * A widget that detects gestures.
  * Attempts to recognize gestures that correspond to its non-null callbacks.
  * If this widget has a child, it defers to that child for its sizing behavior. If it does not have a child, it grows to fit the parent instead.
* [BoxDecoration class](https://api.flutter.dev/flutter/painting/BoxDecoration-class.html)是用来描绘一个框框&#x20;
  * An immutable description of how to paint a box.
  * The BoxDecoration class provides a variety of ways to draw a box.
  * The box has a border, a body, and may cast a boxShadow.

### 问题：SizedBox主要用来做什么？

* 比如要给一个Text设置一个宽度和高度，就可以把Text放到这个SizedBox 里面 A box with a specified size.
* If given a child, this widget forces its child to have a specific width and/or height (assuming values are permitted by this widget's parent). If either the width or height is null, this widget will size itself to match the child's size in that dimension.
* If not given a child, this widget will size itself to the given width and height, treating nulls as zero.

### 问题：使用@required注解，要导入？

```
import 'package:flutter/foundation.dart';
```

### 问题：预置 widget 部分列表有哪些？

* 标准 widgets:&#x20;
  * Form&#x20;
  * FormField&#x20;
  * 质感组件   [质感app的演示demo](https://github.com/flutter/flutter/tree/master/examples/flutter_gallery)
  * Checkbox&#x20;
  * DropdownButton&#x20;
  * FlatButton&#x20;
  * FloatingActionButton&#x20;
  * IconButton&#x20;
  * Radio&#x20;
  * RaisedButton&#x20;
  * Slider&#x20;
  * Switch&#x20;
  * TextField

### 问题：关于flutter中的状态管理视频

* <https://www.bilibili.com/video/av55811674/>

### 问题：flutter中的手势讲解

* <https://flutter-io.cn/docs/development/ui/advanced/gestures>

### 问题：有状态和无状态的 widgets的区别

* 有状态widget有哪些
  * &#x20;Icon, IconButton 和 Text 都是无状态 widget, 它们都是 StatelessWidget 的子类。 一个 stateless widget 没有内部状态。
* 无状态widget有哪些
  * 一个 stateful widget 是动态的。用户可以和其交互 (例如输入一个表单、 或者移动一个 slider 滑块)或者可以随时间改变 (也许是数据改变导致的 UI 更新). Checkbox, Radio, Slider, InkWell, Form 和 TextField 都是 stateful widgets, 它们都是 StatefulWidget 的子类。
* 有些 widgets 是有状态的, 有些是无状态的。
* 如果用户与 widget 交互，widget 会发生变化，那么它就是*有状态的*.
* 一个 widget 的状态是一些可以更改的值, 如一个滑动条的当前值或一个复选框是否被选中。
* 一个 widget 的状态保存在一个 State 对象中, 它和 widget 的显示分离。
* 当 widget 状态改变时, State 对象调用 setState(), 告诉框架去重绘 widget。

### 问题：ideviceinfo returned an error:

```
ERROR: Could not connect to lockdownd, error code -19
brew install gnutls
brew install libgcrypt
```

### 问题：跨平台连接iOS设备的库

* ithub.com/libimobiledevice/libimobiledevice
