首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Smobiler 4.4已正式发布!(Smobiler能让你在Visual Studio上开发APP)

3, 设计器中的控件如果移动到相对布局则重置Location。 4, 侧边栏在用户未设置高度与Flex时Flex默认为1,防止因未设置宽度而不显示的问题。...2, 修复ToolBar中点击事件会触发两次的问题。 3, 修复FontIcon取消选择时默认显示adjust的问题。...4, 修复GridView与ListView中Head、Foot的在没有数据时不显示的问题。...7, 修复设计器撤销控件更改时,控件丢失的问题。 8, 修复iOS版中,滚动panel中TextBox弹出键盘异常的问题。 9,  修复ListView没有行项时使用NewData报错问题。...为了方便开发者在开发应用时直接调用这些组件、控件,最新4.4版本的SmobilerDesigner默认安装所有的插件库及硬件库。

1.9K20

Flutter开发实战分析-animation_demo解析导读

target-20180816161307.gif 同时上下选中的状态同步 可以看到无论是上面的PageView还是下面的PageView需要做到状态同步。...PageView 因为上下都是PageView,当单页内的动画在初始状态和结束状态(中间)中间。是不能切换PageView的。当高度小于时,才能切换。 监听滑动的距离 ?...,我们如何进行自定义外,我们可以有两个基础的概念 Scrollable Scrollable的部件,滚动效果由physic配置,滚动控制由controller配置。...RenderObject 而RenderObject则进行真实的布局和绘制。真实的 布局代码是在它内完成的。...Widget&Element&RenderObject.png 组合型的控件 就是我们最常用的控件。 代理型的控件 这类控件,我们在入门的第二遍文章,就介绍过。用它来保存状态的。

2.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Smobiler 4.4 更新预告 Part 1(Smobiler能让你在Visual Studio上开发APP)

    在4.4版本中,大家对产品优化的一些建议和意见进行了相应的优化和修复,同时,还新增了一些令人激动的功能和插件。...3, 设计器中的控件如果移动到相对布局则重置Location。 4, 侧边栏Flex默认为1,防止未设置宽度不显示的问题。...2, 修复GridView与ListView中Head、Foot的在没有数据不显示的问题。 3, 修复FontIcon取消选择时默认显示adjust的问题。...4, 修复ToolBar中点击事件不会再触发两次的问题。 5, 修复AlbumView控件的ResourcePath与ThumbResourcePath属性无效的问题。...6, 修复Picker中的内容设置为空时会崩溃的问题。 7, 修复设计器撤销控件更改时,控件丢失的问题。 Smobiler 4.4的新功能和插件请期待下一Part的预告。

    59430

    Flutter Widgets 之 PageView

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本:1.12.13+hotfix.5 Dart版本:2.7.0 基础用法 PageView控件可以实现一个“图片轮播”的效果,...onPageChanged属性是页面发生变化时的回调,用法如下: PageView( onPageChanged: (int index){ }, ... ) 无限滚动 PageView...滚动到最后时希望滚动到第一个页面,这样看起来PageView是无限滚动的: List pageList = [PageView1(), PageView2(), PageView3()]...[index % (pageList.length)]; }, ) 巧妙的利用取余(%)重复构建页面实现PageView无限滚动的效果: ?...在滑出的时候当前页面逐渐缩小并居中,通过给PageController添加监听获取当前滑动的进度: _pageController.addListener(() { setState(()

    1.3K20

    Flutter底部tab切换保持页面状态的几种方法

    那么如何让页面保持原来的状态,而不是每次都要重新加载刷新数据呢?有两种方式。...第一种方式:采用IndexdStack IndexdStack和Stack一样,都是层布局控件,可以在一个控件上面放置另一个控件,但唯一不同的是,IndexdStack在同一时刻只能显示子控件中的一个控件...,通过index属性来设置显示的控件。..._pages, ), 这样就能够实现保持页面状态了,效果如下: 我们可以看到,此时,页面的数据只在最开始进来的时候进行加载,然后就保持住这个页面的状态了,并不会每次进来都进行数据的加载刷新了...使用IndexedStack来保持页面状态的优点就是配置简单,但是它也有很大的缺点:IndexedStack中管理的子页面在一开始就全部一次性加载出来了,不管有没有显示出来,然后通过index属性来确定到底显示哪一个页面

    6.2K20

    Flutter完整开发实战详解(二、 快速开发实战篇)

    从代码中我们可以看到: 手动左右滑动 PageView 时,通过 onPageChanged 回调调用 _tabController.animateTo(index); 同步TabBar状态。...而上面代码还缺少了 TabBarItem 的点击,因为这块被放到了外部实现。当然你也可以直接在内部封装好控件,直接传递配置数据显示,这个可以根据个人需要封装。  ...ListView.builder( ///保持ListView任何情况都能滚动,解决在RefreshIndicator的兼容问题。...矢量图标库是引入 ttf 字体库文件实现,在 Flutter 中通过 Icon 控件,加载对应的 IconData 显示即可。  ...而 Map 的 key-value 使用,在开发过程中并不是很方便,所以你需要对Map 再进行一次转化,转为实际的 Model 实体。

    5K30

    Flutter PageView 使用详细概述

    [在这里插入图片描述] PageView可用于Widget的整屏滑动切换,如当代常用的短视频APP中的上下滑动切换的功能,也可用于横向页面的切换,如APP第一次安装时的引导页面,也可用于开发轮播图功能...//为true是保持加载的每个页面的状态 keepPage: true, ); ///PageView设置滑动监听 pageController.addListener...然后在页面的主体我们就是构建了一个PageView,其详细概述如下: @override Widget build(BuildContext context) { return Scaffold...= index; }, //值为flase时 显示第一个页面 然后从左向右开始滑动 //值为true时 显示最后一个页面 然后从右向左开始滑动...关注 你不会迷路 【x3】系列文章 百万 Demo 随时 复制粘贴 使用 【x4】简短的视频不一样的体验

    4.4K00

    Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套

    最近刚好遇到好几个人同时在问:“斜滑 ListView 容易切换到 PageView 滑动” 的问题,如下 GIF 所示,当用户在滑动 ListView 时,滑动角度带上倾斜之后,可能就会导致滑动的是...同方向 PageView 嵌套 ListView介绍完常规使用,接着来点不一样的,在垂直切换的 PageView 里嵌套垂直滚动的 ListView , 你第一感觉是不是觉得不靠谱,为什么会有这样的场景...对于产品来说,他们不会考虑你如何实现的问题,他们只会拍着脑袋说淘宝可以,为什么你不行,所以如果是你,你会怎么做?...details 时,我们主要判断:通过 ScrollController 判断 ListView 是否可见判断触摸位置是否在 ListIView 范围内根据状态判断通过哪个 Controller...Darg 解决各种因为嵌套而导致的手势冲突,相信大家也知道了如何利用 Controller 和 Darg 来快速自定义一些滑动需求,例如 ListView 联动 ListView 的差量滑动效果

    2.1K20

    Flutter完整开发实战详解(二、 快速开发实战篇)

    从代码中我们可以看到: 手动左右滑动 PageView 时,通过 onPageChanged 回调调用 _tabController.animateTo(index); 同步TabBar状态。...而上面代码还缺少了 TabBarItem 的点击,因为这块被放到了外部实现。当然你也可以直接在内部封装好控件,直接传递配置数据显示,这个可以根据个人需要封装。  ...ListView.builder( ///保持ListView任何情况都能滚动,解决在RefreshIndicator的兼容问题。...矢量图标库是引入 ttf 字体库文件实现,在 Flutter 中通过 Icon 控件,加载对应的 IconData 显示即可。  ...而 Map 的 key-value 使用,在开发过程中并不是很方便,所以你需要对Map 再进行一次转化,转为实际的 Model 实体。

    5.2K10

    Flutter 入门指北之快速搭建界面(含Flutter知识体系)

    PageView + TabBar 那么如何通过 TabBar 切换界面呢,这边我们需要用到 PageView 这个部件,当然还有别的部件,例如 IndexStack 等,小伙伴可以自己尝试使用别的,这边通过...的显示 if (_tabController.indexIsChanging) { // PageView 的切换通过 controller 进行滚动 //...duration 表示切换滚动的时长,curve 表示滚动动画的样式, // flutter 已经在 Curves 中定义许多样式,可以自行切换查看效果 _pageController.animateToPage...能够使我们快速去搭建一个界面,但是,并不是所有的界面都需要 AppBar 这个标题,那么我们就不会传入 appBar 的属性,我们注释 _HomePageState 中 Scaffold 的 appBar...,这样显示的内容就会显示在左上角 // _HomePageState // ..

    1.7K20

    【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

    , 同一时间只显示一个 ; 三、BottomNavigationBar 底部导航栏 ---- 通过 Scaffold 组件的 bottomNavigationBar 字段 , 可以设置底部导航栏菜单...onTap 点击事件 , BottomNavigationBar 组件需要设置组件的类型 , 在 BottomNavigationBarType?..., /// 都会根据当前点击的选项而改变 , /// 改变的时候有切换动画 /// 选中的状态下显示底部图标的文本 /// 不选中的状态下隐藏底部的文本内容 shifting...controller, // 滚动控制类 this.physics, // 滚动逻辑 , 不滚动 / 滚动 / 滚动到边缘是否反弹 this.pageSnapping = true,.../// 用于在 TabBarView 中显示的组件 class TabContent extends StatelessWidget { const TabContent({Key key, this.data

    6.2K50

    【Flutter 专题】11 底部状态栏了解下?

    只有底部状态栏是不够的,还需要对应的中间展示内容块,可以跟 Android 的思路一样,添加几个 Page() 页作为 Fragment,和尚因为测试内容相对简单,尝试使用了 PageView,即对应...此时主模块 PageView 可以滑动切换内容,但是对应的底部状态栏不会变化;因为目前没有绑定对应的点击事件等;此时需要添加 PageController 和 状态栏的 onTap 点击事件;如下: int...PageView 会切换内容,但是底部状态栏并没有改变样式,因为目前用的时固定的图标和文字,此时需要处理图标和文字切换时的样式,如下: var _bottomText = ['签到', '我']; var...然而和尚添加了更改状态时的样式,点击底部状态栏时依旧不会变色;和尚查了很久突然发现,和尚的 HomePage() 继承的是 StatelessWidget 无状态样式,此时更换为 StatefulWidget...至此,底部状态栏 BottomNavigationBar 配合滑动 PageView 的基本功能已经完成。

    1.9K41

    用AutoLayout实现分页滚动

    容器视图添加N个页视图,对于水平分页滚动来说容器视图的高度和滚动视图一样,而宽度则是滚动视图的宽度乘以页视图的数量,页视图的尺寸则和滚动视图保持一致,对于垂直分页滚动来说容器视图的宽度和滚动视图一样,而高度则是滚动视图的高度乘以页视图的数量...分页图标效果图 横竖屏切换 对于带有分页功能的滚动视图来说,当需要支持横竖屏时就有可能会出现横竖屏切换时界面停留在两个页面中间而不是按页进行滚动的效果。...其原因是无论是分页滚动还是不分页滚动,在滚动时都是通过调整滚动视图的contentOffset来实现的。...而当滚动视图进行横竖屏切换时不会调整对应的contentOffset值,这样就导致了在屏幕方向切换时的滚动位置出现异常。...解决的办法就是在屏幕滚动时的相应回调处理方法中修正这个contentOffset的值来解决这个问题。

    1.9K40

    《Flutter》-- 6.高级组件

    高级组件 6.1 可滚动组件 对于列表和长布局的显示溢出问题,可以使用Flutter提供的可滚动组件来处理。...,//滚动的方向,默认在垂直方向滚动 this.reverse = false,//控制从头还是从尾开始滚动,默认false,即从头开始滚动 this.padding,//插入子组件时的内边距...bool addAutomaticKeepAlives = true,//是否将列表项包裹在AutomaticKeepAlive组件中,默认值为true,表示列表项滑出视图窗口时不会被垃圾回收,会保存之前的状态...,//处理拖拽开始行为的方式,默认为检测到拖拽手势时开始执行滚动拖拽行为 }) 2)PageView.builder():创建一个滚动列表,适合子组件比较多的场景,需要指定子组件的数量; 3)PageView.custom...可以做以下两点性能优化: 1)尽可能利用好shouldRepaint()的返回值 如果绘制的内容不需要依赖外部状态,返回false即可;如果绘制过程需要依赖外部状态,可以在shouldRepaint()

    10.7K20

    Flutter开发实战分析-animation_demo瞎复写总结

    简单的分析一下 上下滚动,并且自定义动画效果。嗯。上一遍文章的CustomScrollView 左右滚动,切换页面。嗯。PageView。 PageView可以让像是一页一页滑动。...确定中间状态 tColumnToRow 整体的动画,在Flutter中有很方便的lerp函数可以确定中间的状态。只要传入我们进度的百分比就可以。这个百分比可以由滑动的过程中的offset传入。...监听 将NotificationListener包裹在pageView之外,就可以监听PageView的滚动事件了。 //省略代码......当滚动的距离大于一办时,判断对应的滚动反向,来创造对应simulation class _SnappingScrollPhysics extends ClampingScrollPhysics {...controller 我们可以得到滚动的状态,和控制滚动的情况。 physics 滚动的效果。我们可以添加NeverScrollableScrollPhysics。这样就不滚动了。

    2.5K30

    手机APP测试(测试点、测试流程、功能测试)

    大小要合适,控件布局合理;   b,移动窗体.快速或慢速移动窗体,背景及窗体本身刷新必须正确;   c,缩放窗体,窗体上的控件应随窗体的大小变化而变化;   d,显示分辨率.必须在不同的分辨率的情况下测试程序的显示是否正常...;   进行测试时还要注意状态栏是否显示正确;工具栏的图标执行操作是否有效,是否与菜单懒中图标显示一致;错误信息内容是否正确,无错别字,且明确等等; 2.控件 月份和日期对应(比如2月有28天,7月31...3,输入特殊字符集;   4,输入使缓冲区溢出的数据;   5,输入相同的文件名; 4....分别选择了“男”“女”后,保存到数据库的数据应该相应的分别为“男”“女”;   c,一组执行同一功能的单选按钮在初始状态时必须有一个被默认选中,不能同时为空; 5. up-down控件文本框的测试   ...; 9.滚动条控件的测试   要注意一下几点:   a,滚动条的长度根据显示信息的长度或宽度及时变换,这样有利于用户了解显示信息的位置和百分比,如,word中浏览100页文档,浏览到50页时,滚动条位置应处于中间

    9.2K44

    Flutter 可以缩放拖拽的图片

    主要功能: 缩放拖拽 在PageView里面缩放拖拽 支持缩放拖拽 ?...speed 缩放拖拽速度,与用户操作成正比 1.0 inertialSpeed 拖拽惯性速度,与惯性速度成正比 100 cacheGesture 是否缓存手势状态,可用于Pageview中保留状态,使用...demo,将缩放的Scale和Offset转换了为了图片最后显示的区域,具体代码在最后绘制图片的时候,将gestureDetails转换为对应的图片显示区域。...,destinationRect图片显示区域(会根据BoxFit的不同而所不同),通过gestureDetails的calculateFinalDestinationRect方式,计算出最终显示区域。...首先我看了下PageView关于滚动的源码,直接指向最终ScrollableState里面的代码,在setCanDrag方法里面根据是否可以Drag,准备了水平/垂直的手势。

    4.9K00

    Flutter完整开发实战详解(八、 实用技巧与填坑)

    其实大部分时候,这是 Text 内部的 RenderParagraph 在判断 final bool didOverflowWidth = size.width 时...请无视图片 2、获取控件的大小和位置 看过第六篇的同学应该知道, 我们可以用 GlobalKey ,通过 key 去获取到控件对象的 BuildContext,而前面我们也说过 BuildContext...同时你可能会发现,有时候在布局时发现布局位置不正常,居然是从状态栏开始计算,这时候你需要用 SafeArea 嵌套下,至于为什么,看源码你就会发现 MediaQueryData 的存在。...其中 BoxDecoration 一般应用在 DecoratedBox 、 Container 等控件,这种实现一般都是直接 Canvas 绘制时,针对当前控件的进行背景圆角化,并不会影响其 child...8、PageView 如果你在使用 TarBarView ,并且使用了 KeepAlive 的话,那么我推荐你直接使用 PageView 。

    2.5K20
    领券