FlatButton

作者 | 弗拉德 来源 | 弗拉德（公众号：fulade_me) Material 风格中常用的按钮有三种 RaiseButton 、 FlatButton 、 OutlineButton 。 这三种按钮都是继承了 MaterialButton ，而 MaterialButton 又继承自 StatelessWidget 。 RaiseButton： 带有阴影效果的按钮，默认带有灰色背景，点击下去会有点击效果和阴影。 FlatButton: 扁平风格按钮，点击下去会有背景颜色。 OutlineButton: 带有边框的按钮，且边框会在点击时改变颜色。 1. RaisedButton 我们先来看 RaisedButton 的构造方法 const RaisedButton({ Key key, /// 点击后的回调方法 @required VoidCallback onPressed, /// 长按后的回调方法 VoidCallback onLongPress, /// 高亮时候的回调方法 ValueChanged<bool> onHighlightChanged, /// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端) MouseCursor mouseCursor, /// 文本的主题，这个跟MaterialApp的属性theme有关 ButtonTextTheme

路由:核心是 路由映射表 . 如：名字 detail 映射到 DetailPage 页面等 在Flutter中，路由管理主要有两个类：Route和Navigator. Route 一个页面要想被路由统一管理，必须包装为一个Route Navigator 管理所有的Route的Widget，通过一个Stack来进行管理. MaterialApp、CupertinoApp、WidgetsApp它们默认是有插入Navigator的,在需要的时候，只需要直接使用即可. Navigator.of(context) Navigator常用方法: // 路由跳转：传入一个路由对象 Future<T> push<T extendsObject>(Route<T> route) // 路由跳转：传入一个名称（命名路由） Future<T> pushNamed<T extendsObject>( String routeName, { Object arguments, }) // 路由返回：可以传入一个参数 bool pop<T extendsObject>([ T result ]) 命名路由 命名路由是将名字和路由的映射关系，在一个地方进行统一的管理 有了命名路由，就可以通过 Navigator.pushNamed() 方法来跳转到新的页面 命名路由的位置 放在MaterialApp的

原作者：唯鹿 来源：掘金 1.前言 flutter_deer这个项目开源也近一年了，目前收获了3100+的star，这无疑是对这个项目的最大认可。虽然从功能和UI看来和一年前的没什么区别。不过这期间我不断在优化它，希望它的性能和体验越来越好。这篇集中整理了deer在UI流畅上的优化细节，以实践为主，源码为辅。分享出来，希望对你有所启发和帮助。 既然要优化，那么首先就要掌握定位问题、分析性能问题的方法，这样才可以对比优化前后的效果。具体方法这里我就不详细介绍了，可以参考官方文档，或是看这个视频：Flutter 的性能测试和理论。 在官方文档中，性能分析需要确保 使用真机并在profile模式下运行 。不过我们可以使用debug模式来寻找卡顿，因为我觉得它可以放大你的“问题”。 下面正式进入正题。（为了显得口语化一点，我会将Flutter的构建（build）用“刷新”表示。本篇源码基于Flutter SDK版本 1.17.0） 2.控制刷新范围 我们使用setState方法就可以轻松刷新页面，但是要尽力控制刷新范围。我举一个例子： 在注册账户时，通常需要获取验证码。这时会有一个倒计时功能，那么我们就需要每隔一秒刷新一下这个倒计时数字并显示出来。 如果这个倒计时的逻辑处理你放在了注册页面，那么每当setState时都是一整个页面的刷新。而这整页刷新显然是不必要的。而它并不会让你感知到卡顿

注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 当应用程序进行重要操作时经常需要用户进行2次确认，以避免用户的误操作，比如删除文件时，一般会弹出提示“是否要删除当前文件”，用户点击确认后才会进行删除操作，这时我们可以使用提示框（AlertDialog或者CupertinoAlertDialog）。 根据设计的不同，我们可以选择Material风格的AlertDialog或者Cupertino（ios）风格的CupertinoAlertDialog， Material风格基础用法如下： RaisedButton( child: Text('切换'), onPressed: () { showDialog( context: context, builder: (context) { return AlertDialog( title: Text('提示'), content: Text('确认删除吗？'), actions: <Widget>[ FlatButton(child: Text('取消'),onPressed: (){},), FlatButton(child: Text('确认'),onPressed: (){},), ], ); }); }, ) Material风格效果：