40個flutter入門實例詳解(二)

3.頁面的切換跳轉

class RouterTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () async {
          // 異步執行轉爲同步執行，必須等待結果返回後才往下執行
          var result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                //創建新路由時傳入參數text
                return TipRoute(
                  // 路由參數
                  text: "我是提示xxxx",
                );
              },
            ),
          );
          //輸出`TipRoute`路由返回結果
          print("路由返回值: $result");
        },
        child: Text("打開提示頁"),
      ),
    );
  }
}

class TipRoute extends StatelessWidget {
  TipRoute({
    Key key,
    @required this.text,  // 接收一個text參數
  }) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("提示"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text),
              RaisedButton(
                //從路由棧將路由出棧
                onPressed: () => Navigator.pop(context, "我是返回值"),
                child: Text("返回"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

效果：

    

4.引入包並使用包中的方法

Google官方的Dart Packages倉庫:https://pub.dev/

(1)修改pubspec.yaml文件，添加english_words包

dependencies:
  flutter:
    sdk: flutter
  english_words: ^3.1.5

(2)命令行執行

flutter packages get

(3)引入english_words包

import 'package:english_words/english_words.dart';

(4)使用english_words包的方法

class MyHomePage extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    //使用english_words包的方法
    final wordPair = new WordPair.random();
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('標題'),
      ),
      body: new Padding(
          padding: const EdgeInsets.all(38.0),
          child: new Text(wordPair.toString()),
        ),
    );
  }
}

效果：

5.捕獲同步異常

try{
    Future.delayed(Duration(seconds: 1)).then((e) => Future.error("xxx"));
}catch (e){
    print(e);
}

效果：

6.捕獲異步異常

Future.delayed(Duration(seconds: 1)).then((e) => Future.error("xxx"));

import 'dart:async';

void main() {
  runZoned(
    //可能發生異常的代碼
    () => runApp(MyApp()),
    //捕獲異常並輸出
    onError: (e) {
      print(e);
    },
  );
}

效果：

7.Widget的各個生命週期

class CounterWidget extends StatefulWidget {
  const CounterWidget({
    Key key,
    //默認參數
    this.initValue: 0
  });

  final int initValue;

  @override
  _CounterWidgetState createState() => new _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {  
  int _counter;
  //State類第一次初始化數據時調用
  @override
  void initState() {
    super.initState();
    //獲取StatefulWidget類的成員變量
    _counter=widget.initValue;
    print("initState");
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      body: Center(
        child: FlatButton(
          child: Text('$_counter'),
          //點擊後計數器自增
          onPressed:()=>setState(()=> ++_counter,
          ),
        ),
      ),
    );
  }
  //熱重載調用reassemble()後調用
  @override
  void didUpdateWidget(CounterWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("didUpdateWidget");
  }
  //當State對象從樹中被移除時，會調用此回調
  @override
  void deactivate() {
    super.deactivate();
    print("deactive");
  }
  //當State對象從樹中被永久移除時調用
  @override
  void dispose() {
    super.dispose();
    print("dispose");
  }
  //熱重載(hot reload)時會被調用
  @override
  void reassemble() {
    super.reassemble();
    print("reassemble");
  }
  //當State對象的依賴發生變化時會被調用
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("didChangeDependencies");
  }
}

效果：