Flutter中的操作提示

Posted 2021-04-29 flutter开发者

在前面的文章中我们学习了Flutter中输入以及选择控件的用法，借助于这些组件大家可以完成很多常用的功能，但是他不能及时在用户操作后完成相应的界面提示，所以今天我们就会来看下Flutter中的操作提示。

但是在开始今天的内容之前，我们还是需要把昨天留下的问题解决下。

在上篇文章中我们介绍了CheckBoxListTitle的用法，关于RadioListTitle和SwitchListTitle的用法法并没有介绍，因为真的很简单，所以还是直接看下下面的代码吧。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  var _isChecked = true;

  onCheckChange(bool isChecked) {
    setState(() {
      _isChecked = isChecked;
    });
  }

  int radioValue = 0;

  void onRadioValueChanged(int value) {
    setState(() {
      radioValue = value;
    });
  }

  var isSwitch = true;

  onSwitchChange(bool isChecked) {
    setState(() {
      isSwitch = isChecked;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Test")),
      body: new Column(
        children: <Widget>[
          new CheckboxListTile(
            value: _isChecked,
            onChanged: onCheckChange,
            secondary: new Icon(
              Icons.update,
              color: Colors.blueAccent,
            ),
            title: new Text("新版本自动下载"),
            subtitle: new Text("仅在WiFi环境下生效"),
          ),
          new Divider(
            height: 1.0,
            color: Colors.grey,
          ),
          new RadioListTile(
            value: 0,
            groupValue: radioValue,
            controlAffinity: ListTileControlAffinity.trailing,
            onChanged: onRadioValueChanged,
            title: new Text("定时提醒间隔"),
            subtitle: new Text("10分钟"),
            secondary: new Icon(
              Icons.timer,
              color: Colors.blueAccent,
            ),
          ),
          new RadioListTile(
            value: 1,
            groupValue: radioValue,
            controlAffinity: ListTileControlAffinity.trailing,
            onChanged: onRadioValueChanged,
            title: new Text("定时提醒间隔"),
            subtitle: new Text("30分钟"),
            secondary: new Icon(
              Icons.timer,
              color: Colors.blueAccent,
            ),
          ),
          new RadioListTile(
            value: 2,
            groupValue: radioValue,
            controlAffinity: ListTileControlAffinity.trailing,
            onChanged: onRadioValueChanged,
            title: new Text("定时提醒间隔"),
            subtitle: new Text("1个小时"),
            secondary: new Icon(
              Icons.timer,
              color: Colors.blueAccent,
            ),
          ),
          new Divider(
            height: 1.0,
            color: Colors.grey,
          ),
          new SwitchListTile(
            value: isSwitch,
            onChanged: onSwitchChange,
            title: new Text("新消息提醒"),
            secondary: new Icon(
              Icons.message,
              color: Colors.blueAccent,
            ),
          )
        ],
      ),
    );
  }
}

在文章中我们提到了Divider这个Widget，看名字就知道是分割线的意思，构造方法也仅有两个参数，一个是分割线你的高度，一个是分割线的颜色。

在原生客户端有着几种常用的用户提醒方式，如Dialog、Snackbar、BottomSheet等，今天我们就来介绍下Flutter中几种常用的提醒方式。

Snackbar

---

底部快捷提示和android中的可以说是相似度很高的，用法也很简单。

构造方法：

const SnackBar({
Key key,
@required this.content,//内容
this.backgroundColor,//背景
this.action,//其他操作
this.duration: _kSnackBarDisplayDuration,//显示时长
this.animation,//进出动画
})

够造方法很简单，只不过action参数需要说明下，action就是可以在SnackBar的右侧显示的Widget(按钮、文字等)，点击这个Widget可以触发相应的操作，如常见的 撤回 操作。

虽然构造方法很简单，但是我们并不能直接显示SnackBar，我们可以借助于

Scaffold.of(context).showSnackBar（）来显示一个SnackBar，值得注意的是这个context必须不能是Scaffold节点下的context,因为Scaffold.of（）方法需要从Widget树中去找到Scaffold的Context，所以如果直接在Scaffold中使用showSnackBar，需要在外城包括上Builder Widget，这个Builder不做任何的其他操作，只不过把Widget树往下移了一层而已。

下面还是来看下代码吧：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      home: new MaterialApp(
        home: new MyApp(),
      )));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("SnackBar"),
        ),
        body: new Center(
          child: new Builder(builder: (BuildContext context) {
            return new RaisedButton(
              onPressed: () {
                Scaffold.of(context).showSnackBar(new SnackBar(
                  content: new Text("Snackbar"),
                  action: new SnackBarAction(
                    label: "撤回",
                    onPressed: () {},
                  ),
                ));
              },
              child: new Text("点我啊"),
              color: Colors.blue,
              highlightColor: Colors.lightBlueAccent,
              disabledColor: Colors.lightBlueAccent,
            );
          }),
        ));
  }
}

我们在屏幕的正中央定义了一个RaisedButton，没当我们点击RaisedButton就会触发onPress的的回调，弹出SnackBar。
action参数中我们传入了一个SnackBarAction对象，lable我们设置为“撤回”，点击事件我们先不做处理。

Dialog

---

对话框在ios和Android客户端中都很常见，在Flutter中常用的AlertDialog、SimpleDialog和AboutDialog。

今天我们就来介绍下这几种Dialog的用法 。
在Flutter中你可以使用ShowDialog方法来显示这些Dialog。
showDialog方法需要传入一个上下文对象和一个Widget对象

SimpleDialog

就是最简单的对话框，当然也是最灵活的对话框，对话框显示区域完全由你自己自定义，你可以根据自己的需要绘制自己想要的界面。

还是来看下构造方法：

const SimpleDialog({
Key key,
this.title,//标题
this.titlePadding,标题padding
this.children,//内容
this.contentPadding,内容padding
})

好吧，构造方法一如既往的简单，我们只需要传入title和内容就可以完成一个最简单的Dialog，好吧还是来试一下吧。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Dialog"),
        ),
        body: new Center(
          child: new Builder(builder: (BuildContext context) {
            return new RaisedButton(
                onPressed: () {
                  showDialog(
                      context: context,
                      child: new SimpleDialog(
                        contentPadding: const EdgeInsets.all(10.0),
                        title: new Text("我是标题"),
                        children: <Widget>[
                          new Text("我是内容区域，
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈")
                        ],
                      ));
                },
                child: new Text("Dialog出来"),
                color: Colors.blue,
                highlightColor: Colors.lightBlueAccent,
                disabledColor: Colors.lightBlueAccent);
          }),
        ));
  }
}

这样一来我们就把这个DIalog给显示出来了，在构造方法中我们可以看出需要传入的是children对象，也就是你可以根据自己的需要传入多个Widget对象。

好吧我们改变下 的内容：

children: <Widget>[
new ListTile(
leading: new Icon(Icons.apps),
title: new Text("apps"),),

new ListTile(
leading: new Icon(Icons.android),
title: new Text("andrpid"),),

new ListTile(
leading: new Icon(Icons.cake),
title: new Text("cake"),),

new ListTile(
leading: new Icon(Icons.local_cafe),
title: new Text("cofe"),),
]

再来看下效果：

好了，其他的效果还是需要大家自己去实现的。

AlertDialog

AlertDialog其实就是simpleDialog的封装，更加方便开发者使用，只不过在simpeDialog的基础上新增了action操作而已

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Dialog"),
        ),
        body: new Center(
          child: new Builder(builder: (BuildContext context) {
            return new RaisedButton(
                onPressed: () {
                  showDialog(
                      context: context,
                      child: new AlertDialog(
                        content: new Text("我是AlertDialog"),
                        actions: <Widget>[
                          new FlatButton(
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              child: new Text('确定'))
                        ],
                      ));
                },
                child: new Text("Dialog出来"),
                color: Colors.blue,
                highlightColor: Colors.lightBlueAccent,
                disabledColor: Colors.lightBlueAccent);
          }),
        ));
  }
}

这样就直接可以显示一个最简单的AlertDialog，每当点击确认按钮既可以完成相应的操作，这里我们仅仅是关闭掉了Dialog而已。

AboutDialog

AboutDialog也是在SimpleDialog基础上的封装，可以很方便的显示关于应用的Dialog。由于跟上面的用法类似，这里就不在介绍它的够造方法了。

在上面代码的基础上，我们把上述代码中onPressed方法里的内容替换为

onPressed: () {
showDialog(
context: context,
child: new AboutDialog(
applicationName: "最佳助手：",
applicationVersion: "V1.0",
applicationIcon: new Icon(Icons.android,color: Colors.blueAccent,),
children: <Widget>[new Text("更新摘要\n新增飞天遁地功能\n优化用户体验")],
));
}

每当我们点击屏幕中心按钮则会弹出如下AboutDialog，点击viewLicenes即可进入到查看License界面。

好吧，也很简单，我们接下来看下BottomSheet

BottomSheet

也被称为底部菜单，通常情况下分享操作界面使用的比较多。

如果要显示BottomSheet我们可以调用，showBottomSheet（）或者showModalBottomSheet（）方法。这两种方法都可以显示BottomSheet，只不过第一个是从新打开了一个界面来显示，第二个方法是直接在当前界面的下面来显示。

两个方法都需要传入一个Context和一个WidgetBuilder

我们还是来看下代码：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("BottomSheet"),
        ),
        body: new Center(
          child: new Builder(builder: (BuildContext context) {
            return new RaisedButton(
                onPressed: () {

                  showBottomSheet(
                      context: context,
                      builder: (BuildContext context) {
                        return new Container(
                            child: new Padding(
                                padding: const EdgeInsets.all(10.0),
                                child: new Column(
                                  children: <Widget>[
                                    new ListTile(
                                      leading: new Icon(Icons.chat),
                                      title: new Text("开始会话"),
                                    ),
                                    new ListTile(
                                      leading: new Icon(Icons.help),
                                      title: new Text("操作说明"),
                                    ),
                                    new ListTile(
                                      leading: new Icon(Icons.settings),
                                      title: new Text("系统设置"),
                                    ),
                                    new ListTile(
                                      leading: new Icon(Icons.more),
                                      title: new Text("更多设置"),
                                    ),
                                  ],
                                ))
                        );
                      });
                },
                child: new Text("Dialog出来"),
                color: Colors.blue,
                highlightColor: Colors.lightBlueAccent,
                disabledColor: Colors.lightBlueAccent);
          }),
        ));
  }
}

现在我们仅仅把方法名改为showModalBottomSheet再来看下

当然，大家可以根据自己的需要设置相应的内容和点击事件来满足相应的需求。

小结

---

• SnackBar可以快捷的在底部显示提示Tips

• 使用showAlert方法可以显示SimpleDialog、AlertDialog和AboutDialog

• 使用BottomSheet可以实现底部抽屉的效果