专栏首页flutter开发者Flutter中的操作提示

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可以实现底部抽屉的效果

我怀疑这个是个坏掉的二维码,分享到朋友圈试试?

本文分享自微信公众号 - flutter开发者(Flutter_Developers),作者:flyou

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ListView&GirdView

    在前面的的文章中我们了解了Flutter中操作提示的用法,包括SnackBar、Dialog、以及BottomSheet,通过这些Widget我们可以很方便的...

    flyou
  • 输入和选择

    在前面的文章中我们学习了Flutter中事件的处理,包括组件的单击、双击、长按、滑动等。想必大家多其已经有了一定的认识。

    flyou
  • Flutter中的路由与跳转

    在前一篇的文章我们学习了ListView和GridView的用法,我们可以使用new 方式和ListView.builder()、ListView.custom...

    flyou
  • Flutter 简易新闻项目目标效果对比简介代码代码地址

    使用flutter快速开发 Android 和 iOS 的简易的新闻客户端 API使用的是 showapi(易源数据) 加载热门微信文章

    gwk_iOS
  • DartVM服务器开发(第十七天)--Jaguar_websocket结合Flutter搭建简单聊天室

    我们这里定义了一个ChatMessageData,如果你想需要更多字段,可以再添加

    rhyme_lph
  • ListView&GirdView

    在前面的的文章中我们了解了Flutter中操作提示的用法,包括SnackBar、Dialog、以及BottomSheet,通过这些Widget我们可以很方便的...

    flyou
  • [Flutter]使用顶部切换导航TabBar

    目前移动开发tab切换是一个很通用的功能,Flutter 通过Material 库提供了很方便的API来使用tab切换。

    吴老师
  • 【Flutter 专题】08 小小优化【登录】页面

    和尚前两天花了很久才搭建了一个最简单的【登录】页面,但依然还有很多需要优化的地方,和尚又花了很久的时间尝试做了一点点的优化,仅针对优化的部分简单整理...

    阿策
  • 【Flutter 专题】07 您搭好【登录】页面了么?

    和尚最近在利用业余时间学习 Flutter,还真的是值得研究。和尚觉得学习一门技术最好的方式就是动手,在实践过程中结合官网文档才能更快的学习和理解。...

    阿策
  • AkShare-股票数据-板块行情

    新增板块行情的数据接口,主要可以查询当前的热点板块,该接口可以查询实时的板块行情数据。

    AkShare

扫码关注云+社区

领取腾讯云代金券