flutter学习笔记：第一个APP应用

flutter学习笔记

引入第三方包

打开 pubspec.yaml，引入 english_words 这个包。

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  english_words: ^3.1.0

点击上方的 “Packages get” 以加载引入的包，或者在终端执行命令

flutter packages get`

也是可以的。

添加一个 Stateful widget

Stateless widgets 是不可变的，所有属性都是 final 的。MyApp 本身就是一个 Stateless widget，实现了 build 方法。

Stateful widgets 维持着整个生命周期中可变的状态。实现一个 stateful widget 需要至少两个类：State 类和一个创建 State 实例的 StatefulWidget。StatefulWidget 本身不可变，但是 State 类在 widget 生命周期中一直存留。

1.添加 RandomWordsState。

大部分代码会在这个类里，它是一个 State，它为 RandomWords widget 保存维持状态。这个例子里它的作用是：

• 保存生成的单词对，随着用户滑动而无限增长
• 用户通过点击列表的心形图标来添加或移除喜欢的单词对

class RandomWordsState extends State<RandomWords> {
  // TODO Add build() method
}

2.添加 stateful 类型的 RandomWords widget，在 main.dart 中，MyApp 类外的任何地方定义都可以。主要作用是创建 State。

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => RandomWordsState();
}

3.实现 build 方法

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

build 方法返回一个 Widget，而 Text 本身是 StatelessWidget 的子类。

4.使用 RandomWords 这个 Widget

将 MyApp 中 body 里的

child: Text(wordPair.asPascalCase),

修改成

child: RandomWords(),

RandomWords 是一个 stateful widget，它通过 createState 创建了一个 RandomWordsState，这个 State 来为这个 Widget 保存状态，State 本身通过 build 返回了一个 Text。
创建无限滚动的列表
在 RandomWordsState 中创建一个变量 _suggestions，用于保存单词对，

在 Dart 语言中，_ 开头表示私有权限。

再创建 _biggerFont 使文字变大

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[]; // 私有变量保存单词对

  final _biggerFont = const TextStyle(fontSize: 18.0);
  // ...
}

RandomWordsState 中创建私有函数 _buildSuggestions()，用于创建 ListView 并展示单词对。

ListView 类提供了一个 builder 属性——itemBuilder，它是一个工厂构建者，且通过匿名函数提供回调功能，这个匿名函数有两个参数，BuildContext 和行迭代器，迭代器从 0 开始且每次调用方法时递增。

class RandomWordsState extends State<RandomWords> {
  // ...
  Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        // 奇数行，返回 1 像素的分割线，相比于 Android，这里分割线本身也是一个 Item，也占了一个 position
        if (i.isOdd) return Divider();

        // 整除 2，由于奇数行是分割线，所以能执行到这里时，i 的值为 0, 2, 4, ...
        final index = i ~/ 2;
        // _suggestions 里的单词都被用过了
        if (index >= _suggestions.length) {
          // 再添加 10 条进去
          _suggestions.addAll(generateWordPairs().take(10));
        }
        // 使用单词对创建一个 ListTile
        return _buildRow(_suggestions[index]);
      });
  }
}

在 RandomWordsState 中添加 _buildRow 函数

Widget _buildRow(WordPair pair) {
  return ListTile(
    title: Text(
      pair.asPascalCase,
      style: _biggerFont, // 使用定义的文字样式控制大小
    ),
  );
}

修改 RandomWordsState 的 build 方法，使用 _buildSuggestions

class RandomWordsState extends State<RandomWords> {
  // ...
  @override
  Widget build(BuildContext context) {
    return Scaffold (
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }
}

修改 MyApp 的 build 方法

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

这样整个页面的状态都转移到了 RandomWords 这个 Stateful widget 里，它最后通过 State 的 build 方法来获取显示的 Widget，而这个 Widget 的 body 调用 _buildSuggestions 方法返回 ListView。

效果：