Flutter example01-526互联

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   // final worldPair = WordPair.random();
    return const MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
   // return MaterialApp(
   //   title: 'Welcome to Flutter',
   //   home: Scaffold(
   //     appBar: AppBar(
   //       title: const Text('Welcome to Flutter'),
   //     ),
   //     body: const Center(
   //       // child: Text(worldPair.asPascalCase)
   //       child: RandomWords(),
   //     ),
   //   ),
   // );
  }
}

// 分析
// Material是一种标准的移动端和Web端的视觉设计语言， https://m2.material.io/guidelines/
// 如果应用程序正在运行，使用按钮 ⚡ 更新正在运行的App
// 每次【单机热重载 or 保存项目】的时候都会在正在运行的应用程序中随机选择不同的文字


// 添加一个有状态的部件（Stateful Widget)
// ? Stateless widgets是不可变的，意味着其属性无法改变， —— 所有的值都是最终值

// ? Stateful widgets 持有状态可能在widget生命周期中发生变化，实现一个stateful widget需要两个类
// 1. StatefulWidget类 2. State类
// StatefulWidget类本身是不可变的，但是State类在widget生命周期中始终存在

// 添加一个有状态的widget-RandomWords, 创建其state类RandomWordsState
// State类将最终为widget维护

// 添加有状态的RandomWords widget到main.dart
// 可以在MyApp之外的文件的任何位置使用

class RandomWords extends StatefulWidget {
  const RandomWords({super.key});
  @override
  createState() => RandomWordsState();
}

// 添加RandomWordsState类，该应用程序的大部分代码都在类中
// RandomWords widget的状态。该类将保存随着用户滚动而无限增长和的生成单词对

class RandomWordsState extends State<RandomWords> {
  // 以下划线开头的Dart语言中会强制将其转为私有变量
  final _suggestions  = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);
  final _saved = new Set<WordPair>();
  // 构建显示建议单词对的ListView
  // ListView类提供一个builder属性，itemBuilder值是一个匿名回调函数
  // BuildContext和行迭代器i
  Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        // 每列之前增加分割线
        if(i.isOdd) return const Divider();
        final index = i ~/ 2;
        if(index >= _suggestions.length) {
          // 在生成10个单词对，之后添加到建议列表
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      },
    );
  }

  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      // 在Flutter的响应式风格框架中，调用setState()为State对象触发build()方法，从而导致UI的更新
      onTap: () {
        setState(() {
          if(alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      }
    );
  }
  @override
  Widget build(BuildContext context) {
    // final wordPair = WordPair.random();
    // return Text(wordPair.asPascalCase);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Startup Name Generator'),
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved),
        ]
      ),
      body: _buildSuggestions(),
    );
  }
  // 当用户点击导航栏中的列表图标的时候，建立一个路由并将其推入到导航管理器栈中
  // 切换页面以显示新路由
  // 新页面的内容在MaterialPageRoute的builder属性中构建
  // builder - 匿名函数
  void _pushSaved() {
    // 添加Navigator.push调用，让路由入栈
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) {
          final tiles = _saved.map(
              (pair) {
                return ListTile(
                  title: Text(
                    pair.asPascalCase,
                    style: _biggerFont,
                  ),
                );
              },
          );
          final divided = ListTile.divideTiles(
            context: context,
            tiles: tiles,
          ).toList();
          return Scaffold(
            appBar: AppBar(
              title: const Text('Saved Suggestions'),
            ),
            body: ListView(children: divided),
          );
        },
      ),
    );
  }
}


// 导航到新的页面 ===> 添加一个显示收藏内容的新页面
// 学习如何在主路由和新路由之间导航（切换页面）
// 在Flutter中，导航器管理应用程序的路由栈
// 将路由推入(push)到导航器的栈中，将会显示更新为新路由页面
// 从导航器的栈中弹出(pop)路由，将显示返回到前一个路由

// 在RandomWordState的build方法中为AppBar添加列表图标
// 当用户点击列表图标的时候，包含收藏夹的新路由页面入栈显示