文章 2022-07-21 来自:开发者社区

Flutter 图文并茂列表实现

列表在 App 中是最常见的形式了,在 Flutter 中提供了 ListView 这个组件来实现列表,本篇将通过 ListView 实现一个图文并茂的列表。界面布局分析本篇要实现的列表如上图所示。我们拿到界面设计稿之后,在 UI 开发工作第一件事就是考虑界面的元素和布局。以上面的界面为例,实际的界面元素包括了列表和列表元素,而列表元素是关键,列表元素包括了左边的一张图片,图片右侧的标题和查看次....

Flutter 图文并茂列表实现
文章 2022-07-17 来自:开发者社区

Flutter 使用自定义fluro 路由实现访问权限控制

之前几篇介绍了 fluro 的路由管理和转场动画,本篇介绍如何完成路由拦截,进而实现权限管理。“此路是我开,此树是我栽。若是没权限,403到来!”fluro 路由拦截思路fluro 本身并没有提供类似 Flutter 自带的 onGenerateRoute方法来在每次跳转时进行路由拦截响应。我们可以通过两种方式实现路由拦截,一是在定义路由的时候,对于未授权的路由地址跳转到403未授权页面;二是继....

Flutter 使用自定义fluro 路由实现访问权限控制
文章 2022-07-11 来自:开发者社区

Flutter App页面路由及路由拦截实现

为什么要使用路由在之前我们的代码中,页面跳转使用的代码如下所示: Navigator.of(context).push( MaterialPageRoute(builder: (context) => LoginPage()), );在开发过程中,随着页面的增加,如果继续使用这种方式会有如下缺陷:代码耦合严重:涉及到页面跳转的地方就需要插入页面的构造函数,意味着需要知道其他页面的构建方...

Flutter App页面路由及路由拦截实现
文章 2022-07-09 来自:开发者社区

Flutter 实现多选底部弹窗

在Flutter 底部弹窗ModelBottomSheet详解一篇中介绍了底部弹窗的实现。发出后有在琢磨如何实现多选,这也是很常用的一个功能。本篇介绍实现多选的思路和实现方式。多选和单选的不同之处单选的时候,选中一个就可以直接把结果返回,因此本身底部弹窗无需状态管理。但到多选的时候,需要知道当前选中的选项,有选项被点击的时候需要存储下来,当再次被点击的时候要清空这个选项,同时界面还需要同步更新,....

Flutter 实现多选底部弹窗
文章 2022-06-26 来自:开发者社区

Flutter实现国际化

一. 国际化的认识开发一个App,如果我们的App需要面向不同的语种(比如中文、英文、繁体等),那么我们需要对齐进行国际化开发。国际化的英文称呼:internationalization(简称为i18n,取前后两个字母,18表示中间省略字母的个数)App国际化开发主要包括:文本国际化(包括文本的顺序),Widget显示的国际化:比如我们下面开发的这个App某些文本在英文环境下应该显示为英文;某些....

Flutter实现国际化
文章 2022-06-26 来自:开发者社区

Flutter实现动画

一. 动画API认识动画其实是我们通过某些方式(比如对象,Animation对象)给Flutter引擎提供不同的值,而Flutter可以根据我们提供的值,给对应的Widget添加顺滑的动画效果。针对动画这个章节,我打算先理清楚他们的API关系和作用,再来讲解如何利用这些API来实现不同的动画效果。1.1. Animation在Flutter中,实现动画的核心类是Animation,Widget可....

Flutter实现动画
文章 2022-06-13 来自:开发者社区

Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换

效果图:https://ucc.alicdn.com/images/user-upload-01/20190506121127408.gifBottomNavigationBar:class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePag...

文章 2022-05-14 来自:开发者社区

Flutter:实现红包晃动效果

很多app打开会有红包悬浮在某个角落,然后为了吸引注意力,会将红包晃动起来,这个效果非常简单,代码如下:class RedPackageSmall extends StatefulWidget{ @override State<StatefulWidget> createState() { return _RedPackageSmall(); } } class ...

问答 2022-05-12 来自:开发者社区

为实现对接,Flutter如何处理Framework 和 Engine ?

为实现对接,Flutter如何处理Framework 和 Engine ?

文章 2022-04-25 来自:开发者社区

在Flutter里实现一个开心农场地块布局!Web前端工程师也可以看看,作为Flutter入门。

绘制方案选型用什么来画呢?我给小兄弟的例子是用custompainter绘制的,但本文里我会用Widget来实现,原因是地块不多的话,用Widget也感受不到什么性能差距。自己用custompainter实现的话,会麻烦一些比如显示一张图片...用WidgetImage.asset("图片路径");在Custompainter里ImageStream stream = AssetImage("图....

在Flutter里实现一个开心农场地块布局!Web前端工程师也可以看看,作为Flutter入门。

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注