在之前的一篇文章中讲过 Element 和 Widget 对应的关系，不太清楚的可以看一下 Element 是 Widget 树中特定位置所对应的实例，Widget 的状态都会保存在 Element...markNeedsBuild(); } 复制代码 我们在写代码的过程中还会发现一个问题，就是要更新的状态不是必须要写在 setState 里面，只要写在 setState 上面 即可，这样也没有问题，...上面这些方法在源码中还是有一些使用的栗子的，例如： Scaffold.of(context).showSnackBar() 在 Scaffold 的底部显示一个 SnackBar static ScaffoldState...(context).openDrawer(); }), ); } } 复制代码 运行代码，就会发现报错：Scaffold.of() called with a context that...) { return FloatingActionButton(onPressed: () { Scaffold.of(context).openDrawer(); });
，右侧垂直两张小图，水平方向 1:1 均分，和尚用 Expanded 配合 flex 在嵌套权重时遇到如下问题，于是重新研究一下权重的使用; ?...： 根据上一步尝试，和尚理解 Container 高度为 0，需要手动设置高度，但是设置在 Row 层还是 Column 层或子 Container 层是不同的； 和尚理解不显示的原因是高度未匹配...尝试四： 如果最外层不设置高度时，则考虑根据需求使用带有宽高的 Widget，和尚需要展示图片，故直接用图片占位； 和尚主要想实现图片高度自适应，而宽度随屏幕比例占有，右侧两图正常为左图占位一半...扩展： Flexible 的 FlexFit 分两种，在嵌套权重时只可以用默认的 loose，在其他情况下，和尚测试差别不大；但和尚理解的官方说明：tight 模式是强制填补剩余空间，而 loose...问题二：SnackBar 找不到 Context 和尚在尝试 SnackBar 时总是找不到上下文环境而打不开； ?
, ), ); } } 复制代码 平移 Transform.translate 接受一个 offset 参数，可以在绘制时沿 x，y 轴对子组件平移指定的距离 //平移 Widget...，而并不是在 layout 阶段，所以无论对 子组件做何种变化，其占用的空间的大小和在屏幕上的位置都是不变的，因为这些都是在布局阶段就确定的，例如： Widget getTest() { return...Text 被放大后，占用的空间依然是红色的部分，所以第二个 Text 就会挨着红色的部分，最终就会出现重合 由于矩阵变换只会作用在绘制阶段，所以在某些场景下，在 UI 需要变化是，可以通过矩阵变换来达到视觉上的...UI 变化，而不是重新 build 流程，这样会节省 layout 的开销，所以性能会比较好，例如 Flow 组件，内部就是使用矩阵变换来更新 UI ，除此之外，Flutter 的动画组件中也大量的使用了...(context).openDrawer()}, ); }), ........... ) 复制代码 可以看到左侧的菜单已经替换成功 打开抽屉的方法在 ScaffoldState
中使用SnackBar组件，用法如下： Scaffold.of(context).showSnackBar(SnackBar( content: Text('老孟，一枚有态度的程序员'),...)); 注意并不是在build方法中直接使用SnackBar组件，而是调用Scaffold.of(context).showSnackBar方法，消息会在底部弹出并显示一段时间，默认显示4秒...=,size_16,color_FFFFFF,t_70] SnackBar的有2种弹出形式，默认是fixed，直接在底部弹出，另一种是floating,悬浮在底部，用法如下： Scaffold.of(context...}); }, ) 默认情况下每个显示4秒，如果有10个，那么40秒内会一直弹消息，体验明显不友好，我们希望的效果是如果有新的消息时，旧的都消息立刻消失，显示新的消息...,只需在弹出新的SnackBar时移除现在的SnackBar， Scaffold.of(context).removeCurrentSnackBar(); Scaffold.of(context).showSnackBar
_tabController, children: [ _buildTabView1(), _buildTabView2(), ], ) 此时切换tab时，页面会重建...数据呢： 在_TestState也定义同样的参数，此方式比较麻烦，不推荐。...： Color(0xb74093) 因为Color的构造函数是ARGB，所以需要加上透明度，正确用法： Color(0xFFb74093) 如何给TextField设置初始值 class _FooState...a context that does not contain a Scaffold Scaffold.of()中的context没有包含在Scaffold中，如下代码就会报此异常： class HomePage...} 注意此时的context是HomePage的，HomePage并没有包含在Scaffold中，所以并不是调用在Scaffold中就可以，而是看context，修改如下： _scaffoldKey.currentState.showSnackBar
在这里，我们需要简单介绍下SnackBar 使用 Scaffold.of(context).showSnackBar()即可显示SnackBar，大家在这里不需要了解太多，以后会具体介绍的。...代码很简单，不再做具体介绍了 Radio 没错Radio就是我们常用的单选框的意思，通常Radio都是成组出现的，在一组Radio中，只能有一个选中的。...this.inactiveThumbColor, this.inactiveTrackColor, this.activeThumbImage, this.inactiveThumbImage }) 已经很简单，只不过多了几个参数用来控制打开和关闭时的颜色或者图片...66,每当用户滑动滑块时根据用户的滑动改变滑块的位置。...更多相关Widget 在上面我们分别介绍了，CheckBox、Radio、Switch、的用法，但是这些组件一般不是单独使用的，一般会和Text、Icon或者其他的Widget结合使用。
因为State在每次重建时都没有抛弃，所以可以维护它并且不必每次重建某些东西时都要进行昂贵的计算以获得状态属性。 此外，这是允许Flutter动画存在的原因。...方法时，已经分配拿到了父组件的BuildContext.接下来的直接使用context，也都是同一个。...通过上面的测试，我们知道这里的context,确实不是Scaffold。那我们要如何在这里拿到Scaffold的context呢？ 2....总之，这里我们可以知道key能够提高性能，所以每个Widget都会构建方法都会有一个key的参数可选，贯穿着整个框架。 通常情况下，我们不需要去传递这个Key。...Key虽然不是Index,但是对于每一个元素来说，是独一无二的。 - 使用GlobalKey 使用GlobalKey的场景是,从父控件和跨子Widget来传递状态时。
，可以在绘制时沿x、y轴对子组件平移指定的距离。...，而并不是应用在布局(layout)阶段，所以无论对子组件应用何种变化，其占用空间的大小和在屏幕上的位置都是固定不变的，因为这些是在布局阶段就确定的。...3.6 RotatedBox RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小...margin的留白是在容器外部，而padding的留白是在容器内部，读者需要记住这个差异。...ScaffoldState中，通过Scaffold.of(context)可以获取父级最近的Scaffold 组件的State对象。
我们举个例子，首先是在Scaffold中直接包含一个包括TextButton的Center widget，如下所示：Widget build(BuildContext context) { return...'), ), ); }, ), );}如上，我们可以在builder中，调用Scaffold.of(context)方法来获取对应的Scaffold对象...如果我们创建的widget是一个StatefulWidget的话，那么就可以尝试使用StatefulBuilder来代替： Widget build(BuildContext context) {...return Center( child: Builder( builder: (BuildContext context) { int clicked = 0...这在某些情况下是非常有用的。总结本文介绍了三个常用的Builder，大家可以仔细体会。
一般情况下，我们会很少直接使用此组件，但在”去除”多重限制的时候也许会有帮助，我们看下下面的代码： ConstrainedBox( constraints: BoxConstraints(minWidth...foreground：在子组件之上绘制，即前景。 BoxDecoration 我们通常会直接使用BoxDecoration类，它是一个Decoration的子类，实现了常用的装饰元素的绘制。..., ), ), ); 平移 Transform.translate接收一个offset参数，可以在绘制时沿x、y轴对子组件平移指定的距离。...，MediaQuery.removePadding可以移除Drawer默认的一些留白（比如Drawer默认顶部会留和手机状态栏等高的留白），读者可以尝试传递不同的参数来看看实际效果。...Button，通常悬浮在页面的某一个位置作为某种常用动作的快捷入口 SafeArea 使用 SafeArea 可以让 child widget 在顶部和底部腾出足够的空间方便处理 iPhoneX 这类的手机
处理点击 我们不仅希望向用户展示信息，还希望我们的用户与我们的应用进行互动！ 那么，我们如何回应基本操作，如点击和拖动？ 我们将使用GestureDetector部件！...添加材质涟漪效果 在设计应遵循材质设计指南的应用程序时，我们希望在点击时将涟漪动画添加到部件。 Flutter提供InkWell部件来达到这个效果。...有关如何创建列表的更多详细说明，请按照使用长列表配方进行操作。 创建一个数据源 在我们的例子中，我们需要20个样品条目。 为了简单起见，我们将生成一个字符串列表。...在我们的例子中，我们将更新我们的itemBuilder函数以返回一个Dismissible部件。...为了提供我们正在移除项目的提示，我们将在屏幕上滑动该项目时显示“划动消除”指示符。 在这种情况下，红色背景！ 为此，我们将为Dismissible提供background参数。
，如果本地没有保存数据，则需要通过网络获取数据，在返回数据之前，用户看到的是空白页面，而如果本地保存了部分新闻，则显示这部分数据，等待最新的数据返回时在刷新即可，对用户体验来说，明显第二种体验更佳。...添加依赖 SQLite 并不是 Flutter 系统自带的，而是一个第三方插件，在项目的 pubspec.yaml 文件中添加依赖： dependencies: sqflite: ^1.3.1...path_provider: ^1.6.11 执行命令： flutter pub get 使用 SQLite 创建数据库的时候需要本地路径做为参数，所以添加path_provider 插件获取本地路径...单例模式创建 SQLite 访问 使用 SQLite 并不是一定要使用单例模式，单例模式是为了保证整个应用程序仅有一个数据库实例和全局访问。...SQLite 创建成功后会在本地创建一个 db_name.db 的文件，文件的目录就是初始化数据库时设置的目录。
概述 路由跳转的几种方式； 路由常用API； 路由的发送和接收数据的使用； 路由使用中可能遇到的问题与解决方案； 路由跳转的方式 单一页面跳转（A页面 --- B页面） 多个页面路由管理 （A页面...value位置是一个形参，名字可以随便起，这个形参位置就是返回的数据 pushData(context).then((value){ //注意这里要把...【小结一下刚刚的跳转并传输数据的方式】 上面的方式是 —— 在跳转目的页中， 准备一个构造函数和一个全局变量，用于接收数据， 跳转到目的页时，创建一个目的页实例，并把数据传给其构造函数，完成传递；...可以写main函数，也可以不写； 建议只在首页写main，其他页面不要写，便于查找和维护； 命名路由 路径名称的 正确性（定义与使用要相符合）、 传参（参数类型）的一致性的问题； 1....// 利用Future变量类型的 then方法，拿到返回的数据 // value位置是一个形参，名字可以随便起，这个形参位置就是返回的数据 //
只能是1到2之间的值。任何其他值都将导致引发错误的请求错误。默认为2。 prefix_length：前缀匹配的时候，必须满足的最少字符。...max_term_freq：最大的词频，通过设置 max_term_freq 参数，可以控制建议结果中词项的重复出现程度，以避免过多重复的词项。...Phrase Suggester 将在 title 字段中查找与短语相关的建议结果。 生成短语时，使用的 gram 大小为 2，表示使用两个连续的词项进行组合。...该参数指定了词语在索引中被认为是拼写错误的概率。较低的值将使得更多在索引中出现的词语被视为拼写错误，即使它们实际上是正确的。 max_errors：最大容忍错误百分比。...默认值为 1，表示最多允许 1% 的错误。当建议短语与输入短语匹配时，如果超过该百分比的术语被认为是错误的，则该建议会被排除。 confidence：默认值为 1.0，取值范围为 [0, 1]。
InkResponse 和 InkWell 内部使用了Ink； 可以包裹 不具备事件处理的组件，实现水波纹等点击事件的效果； InkWell 水波纹限制在文本组件之内； InkResponse 水波纹没有限制...// 利用Future变量类型的 then方法，拿到返回的数据 // value位置是一个形参，名字可以随便起，这个形参位置就是返回的数据 //...// 这样results刷新时，相关UI才会跟着刷新！！！..., // //左侧图标 // secondary: new Icon(Icons.account_circle), // //文字过多时，是否三行显示...是BuildContext // Scaffold.of(context).showBottomSheet( // (BuildContext context
是BuildContext Scaffold.of(context).showBottomSheet( (BuildContext context...// 点击时的水波纹颜色 默认：如果为null，使用FloatingActionButtonThemeData.splashColor // 如果FloatingActionButtonThemeData.splashColor...默认：ThemeData.hoverColor hoverColor: Colors.white, // 点击时的水波纹颜色 默认：如果为null，使用FloatingActionButtonThemeData.splashColor...默认：ThemeData.hoverColor hoverColor: Colors.white, // 点击时的水波纹颜色 默认：如果为null，使用FloatingActionButtonThemeData.splashColor..., // // 点击时的水波纹颜色 默认：如果为null，使用FloatingActionButtonThemeData.splashColor // // 如果FloatingActionButtonThemeData.splashColor
这是因为同一个 Widget 可以被添加到 UI 树的不同部分，而真正渲染时，UI 树的每一个 Element 都会对应一个 Widget 对象 。...Echo Widget widget 的构造函数参数应使用命名参数，命名参数中的必要参数要添加 @required 标注，这样有利于静态代码分析器进行检查。...另外，在继承 widget 时，第一个参数通常 key ，另外，如果 Widget 需要接收自 Widget，那么 child 或者 children 参数通常应该放在参数列表的最后。...实际上，context 是当前 widget 在 widget 树中位置中执行 “相关操作”的一个句柄，比如它提供了从当前 widget 开始向上遍历widget树，以及查找父类 widget 方法 class...在一些场景下，Flutter framework 会将 State 对象重新插入到树中，如果包含次 State 对象的子树在树的一个位置移动到另一个位置时(可以通过 GlobalKey 来实现)。
当然在我们知道每个组件尺寸或者屏幕尺寸固定的情况下我们可以很好地来布局我们的组件来达到最合适的显示效果。 但是如果我们的组件的尺寸是不固定的呢？...如: 当我们想要在一行显示多个Button时就会出现如图的问题，超出屏幕的Widget并不会显示。 ? 但是，我们其实想要的是这样的效果 ?...接下来我，我们尝试修改alignment属性来看下效果 ? ? ? ? ? ?...当然，我们现在的效果还不是很好看，我们可以根据以前讲到的知识来给优化下啊。...小结 使用Wrap可以很轻松的实现流式布局效果 Wrap支持设置流式布局是纵向显示或者是横向显示 可以使用alignment属性来控制widgets的布局方式 试一试 ?
你可以理解为在Flutter中一切都可以通过组合的方式实现，对于我们开发者，只需声明，或者说告诉框架这个组件是什么，它要怎么显示，携带了哪些参数，而Widget 就是用来帮你承载配置的东西。...setState会导致整个widget全部重建，所以在使用时，我们应该尽量把 子widget 抽离出去，采用局部刷新的方式优化，当然这个技巧具体可以百度或者参阅我之前的代码，并不是什么骚操作，基本入门技巧吧...Context StatelessWidget build 方法有一个 context参数，它是 BuildContext 类的一个实例，表示当前 widget 在 widget中的上下文，每一个 widget...实际上， context 是当前widget在widget树中任意位置中执行相关操作的一个句柄。...在一些场景下，Flutter framework 会将State 对象重新插入到树中，如包含此 State 对象的子树在树的一个位置移动到了另一个位置时。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
