专栏首页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 条评论
登录 后参与评论

相关文章

  • Flutter中自定义提示框

    越陌度阡
  • Flutter中实现延时操作

    本文是异步编程的延时策略篇章,在Flutter中实现延时操作有两种方式,一种是通过Future,另一种是通过Timer。

    nuts
  • Python实现的特征提取操作示例

    更多关于Python相关内容感兴趣的读者可查看本站专题:《Python数据结构与算法教程》、《Python编码操作技巧总结》、《Python函数使用技巧总结》、...

    砸漏
  • JavaEE中为删除数据操作与退出操作添加确认提示框

    时间静止不是简史
  • DDL操作提示了一个DML操作才会抛的ORA错误?

    某张表,有个字段,存在默认值,并且设置了NOT NULL约束,例如,NEED_PO VARCHAR2(1) default 'N' not n...

    bisal
  • flutter常见问题【5】:as中对flutter的一些快捷键操作

    如果只是通过看代码,来看widget之间的嵌套情况,可能需要不断滚动代码,并且也很难理解代码的结构。这个时候,我们需要使用到Flutter Outline。

    sinnoo
  • PHP操作XML中XPath的应用示例

    本文实例讲述了PHP操作XML中XPath的应用。分享给大家供大家参考,具体如下:

    砸漏
  • flutter中key的作用

    当需要在一个StatefulWidget集合中进行添加、删除、重排序等操作时,才是key登场的时候。

    nuts
  • mac在matplotlib中显示中文的操作方法

    Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形 。 通过 Matplotlib,开发...

    砸漏
  • JQuery中DOM操作示例代码

    Jquery的DOM操作 1、插入节点代码示例: <p title=”选择你喜欢的水果”>你最喜欢的水果是?</p> <ul> <li title=”苹果”>苹...

    苦咖啡
  • Flutter实现搜索框中文占位提示文字

    Flutter出来这么久了,网上居然很难搜到实现搜索框中文占位提示符(placeholder/hintText)的文章,难得找到的都是类似操作:

    IT晴天
  • Flutter中ListView 的使用示例

    这个小例子使用的是豆瓣 API 中 正在上映的电影 的开放接口,要实现的主要效果如下:

    砸漏
  • Hive中常用的一些配置操作(日志,显示等操作)

    4.在HIve的 cli命令行上显示当前数据库,以及查询表的行头信息,在hive-site.xml文件下增加如下参数:

    z小赵
  • Flutter—开始与环境搭建

    进入flutter sdk 目录,然后找到bin/cache/lockfile文件,删除,然后在重新建, ok!

    Light413
  • 不得不看的Flutter与Android混合开发

    记得在flutter刚出来时,笔者就开始学习flutter。但由于当时嫌弃flutter复杂的层级组合且未推出稳定版,所以当时就放弃了深入学习,现如今随着flu...

    Android技术干货分享
  • 如何使用 Flutter 创建桌面应用程序[Flutter专题7]

    开发人员可以选择编写多种类型的应用程序:控制台应用程序、移动应用程序、Web 应用程序和桌面应用程序。

    nuts
  • Flutter 即学即用系列博客——01 环境搭建

    https://flutter.io/docs/get-started/install

    AndroidTraveler
  • 在 Flutter 中创建可拖动的浮动操作按钮[Flutter专题15]

    Flutter 允许您使用FloatingActionButton小部件添加浮动操作按钮。但是,它不允许您拖动按钮。如果你想让它可拖动怎么办。本教程有一个示例,...

    nuts
  • 两分钟带你快速搭建Flutter开发环境(Windows)

    在这篇文章中,将带着大家一起在Windows平台上快速搭建Flutter的开发环境,同时会将搭建Flutter开发环境中的一些技巧和经验分享给大家。

    CrazyCodeBoy

扫码关注云+社区

领取腾讯云代金券