Flutter日志输出 SnackBar组件实例 单选开关复选开关实例

作业说明：

本次练习所有内容在上次练习项目的基础上添加内容完成。提交的内容包括关键性的代码片段、说明性的描述文字以及在虚拟机上的界面截图（如图1、图2所示）。

（1）在自己的项目中重现教程P81的日志输出，即：

reassemble

deactive

disposed

 

（2）在练习项目中演示SnackBar组件的使用，参见教材P84-85内容（3.1.7 在Widget树中获取State对象），使用“通过contex”与“通过GlobalKey”两种方式获取State对象，进而调用State对象的某些方法，如showSnackBar() etc.

 

（3）参考教程P109（3.6单选开关和复选框）内容介绍，在练习项目中演示SnackBar组件与单选开关和复选框的配合使用，即在用户单击了Switch单选开关后以及用户勾选或取消Checkbox的勾选后均用SnackBar进行响应的反馈。

 

图1

 

图2

 

项目目录

 

 其中许多代码是上一篇随笔写的，建议前一页。

源代码

第一个dart是计数器，使用widgetful，在主页点击进入该页，点击正中间按钮，会在控制台显示日志输出。

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;

  @override
  void initState(){
    super.initState();
    //初始化状态
    _counter=widget.initValue;
    print("initState");
  }

  @override
  Widget build(BuildContext context){
    print("build");
    return Scaffold(
      body: Center(
        child: FlatButton(
          child: Text('$_counter'),
          //点击后计数器自增
          onPressed: ()=>setState(()=> ++_counter),
        ),
      ),
    );
  }

  @override
  void didUpdateWidget(CounterWidget oldWidget){
    super.didUpdateWidget(oldWidget);
    print("didUpdateWidget");
  }

  @override
  void deactivate(){
    super.deactivate();
    print("dectivate");
  }

  @override
  void dispose(){
    super.dispose();
    print("dispose");
  }

  @override
  void reassemble(){
    super.reassemble();
    print("reassemble");
  }

  @override
  void didChangeDependencies(){
    super.didChangeDependencies();
    print("didChangeDependencies");
  }
}

 

第二段源代码示例的是两种方法显示SnackBar

import 'package:flutter/material.dart';

class showSnackBar1 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("龚一半的博客"),
      ),
      body: Center(
        child: Builder(builder: (context) {
          return RaisedButton(
            onPressed: () {
              ScaffoldState _state = context.ancestorStateOfType(
                  TypeMatcher<ScaffoldState>());
              _state.showSnackBar(
                  SnackBar(
                    content: Text("略略略SnackBar"),
                  ));
            },
            child: Text("显示SnackBar"),
          );
        },),
      ),
    );
  }
}


class showSnackBar2 extends StatefulWidget {
  @override
  _showSnackBar2State createState() => _showSnackBar2State();
}

class _showSnackBar2State extends State<showSnackBar2> {
  static GlobalKey<ScaffoldState> _globalKey=GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(
        title: Text("Show SnackBar"),
      ),
      body: Center(
        child: Builder(builder: (context) {
          return RaisedButton(
            onPressed: () {
              _globalKey.currentState.showSnackBar(
                  SnackBar(
                    content: Text("略略略SnackBar2"),
                  ));
            },
            child: Text("显示SnackBar"),
          );
        },),
      ),
    );
  }
}

 

第三段代码使用了单选开关和复选框来确定要展示的snackBar

import 'package:flutter/material.dart';


class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  @override
  _SwitchAndCheckBoxTestRouteState createState() => _SwitchAndCheckBoxTestRouteState();
}

class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
  static GlobalKey<ScaffoldState> _globalKey=GlobalKey();
  bool _switchSelected=false;
  bool _checkboxSelected=false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,//使用GlobalKey进行获取
      /*使用GlobalKey获取SnackBar的方法有两步：
      一是给目标StatefulWidget添加GlobalKey
      二是通过GlobalKey来获取State对象*/
      body: Column(
          mainAxisAlignment:MainAxisAlignment.start,//Column靠左
          children: <Widget>[
          SizedBox(height: 40.0),//开头空行
          Text("从你那er，开始！\n东京佛，佛立第一中学："),//开关提示信息
          Switch(
            value: _switchSelected,//开关默认值
            onChanged: (value){
              setState(() {
                _switchSelected=value;//更改开关默认值
                if(value==true) {//开关打开条件
                  _globalKey.currentState.showSnackBar(//获取SnacBar
                      SnackBar(//弹出SnackBar
                        content: Text("true，天山新泰罗！"),
                      ));
                }
                if(value==false){
                    _globalKey.currentState.showSnackBar(
                        SnackBar(
                          content: Text("false，根本听不见！"),
                        ));
                  }
              });
            },
          ),
          Text("严守县县令："),
          Checkbox(
            value: _checkboxSelected,
            activeColor: Colors.red,
            onChanged: (value){
              setState(() {
                _checkboxSelected=value;//复选框默认值
                if(value==true) {
                  _globalKey.currentState.showSnackBar(
                      SnackBar(
                        content: Text("true，挺甜一郎！"),
                      ));
                }
                if(value==false){
                  _globalKey.currentState.showSnackBar(
                      SnackBar(
                        content: Text("false，这么小声也想开军舰？"),
                      ));
                }
              });
            },
          )
        ],
      ),
    );

  }
}