一、轻量级提示组件

即提示很短一段时间后就会消失

1、Tooltip

class HaPi extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tooltips'),
          leading: Icon(Icons.arrow_back),
        ),
        body: Center(
          child: Tooltip(
            message: "点我干啥子",
            height: 60.0,
            verticalOffset: 5.0,
            preferBelow: false,
            padding: EdgeInsets.all(20.0),
            child: Icon(
              Icons.person,
              size: 50.0,
              color: Colors.lightBlue,
            ),
          ),
        ),
      ),
    );
  }
}

2、SnackBar

 

需要注意的一件事！！

传入的context绝对不能是Scaffold节点下的的context，因为

Scaffold的.of()方法是从Widget树中去找到Scaffold的context

所以如果直接在Scaffold中使用showSnackBar的时候，需要外层套一层builder，只是为了把Widget树下移了一层而已，

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

class HaPi extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar的使用'),
          leading: Icon(Icons.directions_bike),
        ),
        body: Center(
          child: new Builder(builder: (BuildContext context){//外层套一层builder就是为了把Widget树下移一层
            return RaisedButton(
              onPressed: (){
                Scaffold.of(context).showSnackBar(//不能直接在Scaffold里使用
                  SnackBar(
                    content: Text('已收藏到收藏夹'),
                    action: SnackBarAction(
                      label: "关闭",
                      onPressed: (){
                        print('撤回');
                      },
                    ),
                  )
                );
              },
              child: Text('收藏此网页'),
              color: Colors.cyan,
              highlightColor: Colors.lightBlueAccent,
              disabledColor: Colors.lightBlueAccent,
            );
          },
        ),
        ),
      ),
    );
  }
}

二、非轻量级提示组件

与轻量级提示组件相反，

这种组件会打断用户当前正在进行的操作，强制用户处理完对话框上的内容逻辑之后才能进行下一步操作，

常见的有AlertDialog，BottomSheetDialog等。

dialog的显示是通过showDialog(context, child)来实现的，注意到要传两个参数，一个context上下文，另一个为child,是显示的对话框类型。

 

我想吐槽一下这个坑点！！！

对话框的那些代码不能直接写在MaterialApp里边！！

找了好久的bug，心累

1、SimpleDialog

很简单很简单的一个对话框组件

import 'package:flutter/material.dart';

class YouDu extends StatefulWidget {
  @override
  _YouDuState createState() => _YouDuState();
}

class _YouDuState extends State<YouDu> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Niu(),
    );
  }
}
class Niu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dialog的实现'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: (){
            showDialog(
              context: context,
              child: SimpleDialog(
                title: Text('一个对话'),
                contentPadding: EdgeInsets.all(20.0),
                children: <Widget>[
                  Text('来了老弟'),
                  Text('嗯'),
                ],
              )
            );
          },
          child: Text('SimpleDialog'),
          color: Colors.blue,
          highlightColor: Colors.lightBlue,
          disabledColor: Colors.lightBlue,
        ),
      ),
    );
  }
}

或者是有选项的对话框

import 'package:flutter/material.dart';

class YouDu extends StatefulWidget {
  @override
  _YouDuState createState() => _YouDuState();
}

class _YouDuState extends State<YouDu> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Niu(),
    );
  }
}
class Niu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dialog的实现'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: (){
            showDialog(
              context: context,
              child: SimpleDialog(
                title: Text('emmmm'),
                contentPadding: EdgeInsets.all(20.0),
                children: <Widget>[
                  SimpleDialogOption(
                    child: Text('我是男生'),
                    onPressed: (){
                      Navigator.of(context).pop('1');
                    },
                  ),
                  SimpleDialogOption(
                    child: Text('我是女生'),
                    onPressed: (){
                      Navigator.of(context).pop('2');
                    },
                  ),
                  SimpleDialogOption(
                    child: Text('我是鬼'),
                    onPressed: (){
                      Navigator.of(context).pop('3');
                    },
                  ),
                ],
              )
            );
          },
          child: Text('SimpleDialog'),
          color: Colors.blue,
          highlightColor: Colors.lightBlue,
          disabledColor: Colors.lightBlue,
        ),
      ),
    );
  }
}

2、AlertDialog

import 'package:flutter/material.dart';

class YouDu extends StatefulWidget {
  @override
  _YouDuState createState() => _YouDuState();
}

class _YouDuState extends State<YouDu> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Niu(),
    );
  }
}
class Niu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dialog的实现'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: (){
            showDialog(
              context: context,
              child:AlertDialog(
                title: Text('标题'),
                content: Text('内容'),
                actions: <Widget>[
                  FlatButton(
                    onPressed: (){
                      Navigator.of(context).pop();
                    },
                    child: Text('确定'),
                  ),
                  FlatButton(
                    onPressed: (){
                      Navigator.of(context).pop();
                    },
                    child: Text('取消'),
                  ),
                ],
              ),
            );
          },
          child: Text('AlertDialog'),
          color: Colors.cyan,
          highlightColor: Colors.lightBlue,
          disabledColor: Colors.cyanAccent,
        ),
      ),
    );
  }
}

好了今天学了两类提示组件，还不错