Flutter新手入门（二）

本篇讲解第一篇程序内容的含义 并拓展该程序
Flutter新手入门（一）

在 Flutter 中，几乎所有都是 widget，包括对齐 (alignment)、填充 (padding) 和布局 (layout)。本程序继承了StatelessWidget。

Flutter中widget都是不可变的，不能对其直接修改，必须通过修改widget的state来达到更新视图的目的，于是就引入了 Stateful widget 和 Stateless widget 的概念。

比如你需要把logo当作image放入程序中，如果在运行时这个 logo 不会发生变化，那么对应 Flutter 中你应该使用 StatelessWidget。

但是如果你想要根据 HTTP 请求的返回结果动态的修改 UI，那么你应该使用 StatefulWidget。在 HTTP 请求结束后，通知 Flutter 更新这个 widget 的 State，然后 UI 就会得到更新。

StatefulWidget 和 StatelessWidget 最重要的区别就是， StatefulWidget 中有一个 State 对象，它用来存储一些状态的信息，并在整个生命周期内保持不变。

Scaffold 是 Material 库中提供的一个 widget，它提供了默认的导航栏、标题和包含主屏幕 widget 树的 body 属性。 widget 树可以很复杂。

继续往下写 使用外部package

在pub.dev上可以找到很多开源package
1.pubspec.yaml 文件管理 Flutter 应用程序的 assets（资源，如图片、package等）。

我们在pubspec.yaml中添加如下内容，然后保存VSCode会自动执行pub get帮我们下载对应的包

pubspec

pubsoec.lock文件包含了我们依赖packages的名称和版本

2.在main.dart中引入

引入package

3.使用package

使用
接下来保存看看有什么变化吧

下一步 添加Stateful widget

Stateless widgets 是不可变的，这意味着它们的属性不能改变 —— 所有的值都是 final。

而Stateful widgets 持有的状态可能在 widget 生命周期中发生变化，实现stateful widget至少需要两个类：StatefulWidget类 State类，StatefulWidget类本身是不变的，但State类在widget生命周期中始终存在

1.回车另起新行，在IDE中输入stateful 编辑器会自动提示是否创建statefulwidget,回车创建 光标会被定位在输入widget名称处

2.输入RandomWords作为有状态widget的名称

Stateful

IDE会自动生成对应的State类，并且添加下划线前缀，Dart语言中，添加下划线前缀可以增强隐私性。
State类继承自State<RandomWords>，表示专门用于RandomWords的通用State类。

3.修改RandomWordsState

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

4.修改class MyApp中的代码

Widget

保存运行，和之前一样，每次热重载都会显示一个单词

创建ListView

1.向_RandomWordsState类中添加一个数组，添加一个字体大小的变量

class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = TextStyle(fontSize: 18.0);
  // ...
}

2.在_RandomWordsState类中创建一个_buildSuggestions()方法，在该方法中创建ListView。
ListView类提供了名为itemBuilder的builder属性，该函数接受两个参数BuildContext和迭代器i。每次调用该函数i会自增

Widget _buildSuggestions() {
    return ListView.builder(
        padding: EdgeInsets.all(16.0),
        itemBuilder: (context, i) {
          if (i.isOdd) {
            // 奇数行
            return Divider(); // 添加1像素的分割线
          }
          final index = i ~/ 2; // i ~/ 2 表示i除2 返回值是整形（向下取整）
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

3.创建_buildRow()函数，该函数返回一个ListTitle

Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

4.修改_RandomWordsState类的build()方法，使用_buildSuggestions()函数

@override
  Widget build(BuildContext context) {
    return Scaffold( //  Scaffold类实现基础的 Material Design 布局

      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }

5. 修改MyApp的build()方法

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

6.保存运行，会看到如下的效果

bingo