Flutter 正则匹配实战:视图篇 - 移动端界面实现

最新推荐文章于 2023-06-14 21:50:09 发布
最新推荐文章于 2023-06-14 21:50:09 发布
阅读量96 收藏
点赞数
文章标签： flutter 正则表达式 正则匹配 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52343631/article/details/131216297
版权

目录

一、移动端的底部导航栏

1. 移动应用界面效果

2. 主页面代码实现

3. 底部栏组件的实现

二、匹配页的界面实现

1. 主界面构建结构

2.菜单按钮

三、记录数据管理

1. 侧滑条目的展开与闭合

2. 侧滑条目的开闭的实现细节

3. 动画的处理

一、移动端的底部导航栏

移动端由于是竖屏，并不适合桌面端的左右导航面板。绝大多数移动应用都采用如下所示的底部导航栏，点击底部按钮切换页面显示。如下掘金 app:

1. 移动应用界面效果

下面是随底部导航栏切换的四个界面效果，最重要的是下面两个 匹配页 和 记录管理页 :

匹配页 记录管理页 匹配页 - 暗

了解本专栏 订阅专栏 解锁全文 超级会员免费看
个人笔记(bug，思路，总结)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Flutter 正则匹配实战:正则篇 - 聊聊匹配的纵横捭阖
m0_52343631的博客
06-13 315
内心独白：写完这段文字，内心真的非常激动，这是我未曾预想的，这是行走于文字之上的是灵感，迸发于笔尖。也就是说两个部分，如果前者匹配了，后面的就被忽略，继续后续字符的匹配。规则单体的堆砌，很像排兵布阵，每种阵法应用于不同的战场。只能匹配到一个字符，如下所示，匹配到的结果是一个个孤立的数字。，才算匹配成功，匹配成功的部位被着色。，团结志趣相投的人士，条件越多，留存的人越少，其提供的信息也就越有价值。，另外数字开头可以有符号，也可以没有，所以出现 0 或 1 次。设计一个正则规则，首先要认清匹配的条件。
Flutter 正则匹配实战:正则篇 - 代码高亮组件的实现
最新发布
m0_52343631的博客
06-14 364
按照上一章的思路，其实高亮代码也就是定义不同高亮类型，维护正则表达式而已。那还有什么好说的呢，为什么还有新开一篇文章，来水文吗？其实上一篇只是简单介绍一下流程，属于能用，但不好用。对高亮匹配需求来说，是有很多变化的：如何照顾到各种语言、是否启用某些规则。这要求的是一种拓展性，可以灵活装配，自由拓展，能对需求的变动有一定的预见性，并拥抱变化。
Flutter 正则匹配实战:正则篇 - 从文字高亮开始说起
m0_52343631的博客
06-13 427
说起正则，对于很多人来说，可能脑海里就是一堆意义不明的字符规则。也就只有在邮箱手机号等字符串验证时搜一下用用，很少正儿八经地用它做出个什么东西。所以很多人即使系统地学过正则规则的含义，但没有什么应用场景，很快也就淡忘了，用进废退就是这个道理。我并不喜欢在一开始就教人怎么用某个技能工具, 其实更重要的是意识到为什么要用；它有什么得天独厚的能力，使得它在某些场景中是唯一的王。只有认识到工具的价值，才有让人使用的欲望。
Flutter 正则匹配实战:正则篇 - 聊聊匹配的定位之术
m0_52343631的博客
06-13 219
如果你已经深谙的纵横捭阖之术，就觉得天下无敌，那就太年轻了。在内容匹配之外，还有另一个维度:，其特点是：匹配的内容为空字符。
Flutter 正则匹配实战:正则篇 - 探索多正则高亮样式
m0_52343631的博客
06-14 272
前面的正则匹配中，我们只能为一种正则表达式进行高亮匹配。但很多场景下，我们需要为满足不同的规则的文字进行不同着色。比如下面的代码高亮的展示组件：这是如何实现的呢，接下来的两章，将进一步认识正则在Flutter中的使用。看一下如何使用实现多正则的匹配效果。
用Flutter构建漂亮的UI界面-基础组件篇
02-24
Flutter作为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差异优势，早已引起大批技术爱好者的关注，甚至一些闲鱼，美团，腾讯等大公司均已开始使用...这是我写的Flutter系列文章：用Flutter构建漂亮的UI界面-
Flutter入门：教程2-StateFulWidget
04-11
在`Flutter-Getting-Started-Tutorial-2-StateFulWidget.pdf`教程中，你可能学习了如何创建一个简单的`StatefulWidget`，比如一个计数器应用。这个应用通常包含一个按钮和一个显示计数值的文本。每当按钮被点击，计...
EPITECH-Flutter-I:Flutter I-Epitech项目
04-16
【EPITECH-Flutter-I:Flutter I-Epitech项目】是一个专为EPITECH（École Pour l'Informatique et les Techniques Avancées）学生设计的课程项目，旨在教授和实践使用Flutter框架进行移动应用开发。这个项目的核心...
双厨狂喜 | Flutter & 正则匹配 - 小册上架
张风捷特烈的博客
01-16 183
theme: cyanosis highlight: mono-blue 张风捷特烈 的第一本 Flutter 应用层的小册现在上架了，快来看看吧。 《Flutter 实战：正则匹配应用》 , 以正则匹配为核心需求，基于 Flutter 框架构建全平台应用。 1. RegExpo 项目的由来 当 Flutter 遇到正则表达式会发生什么样的故事？在去年过年期间，到现在正好一年...
Flutter 正则匹配实战:开篇 - 本册目标与应用介绍
m0_52343631的博客
06-13 115
所以跨平台对应用需求的规划也是一个挑战，可能有些桌面端可以处理，但移动端无法胜任的需求，需要做出妥协。但各平台间的使用习惯上的差异是很难统一的，一统各平台交互还是求同存异，也是个挑战。目前来说，Flutter 的桌面端、Web 的交互，并非正统，而是移动应用化的；首先就是界面的适应性，由于桌面端和移动端尺寸上存在很大的差异性，如果不做任何适配，虽然在桌面端也能完成需求，但视觉体验上并不是很好。在独立发展的几十年间，各平台间都使用不同语言进行开发，对于平台特有功能的处理，是比较麻烦的。
Flutter 正则匹配实战:视图篇 - 构建可交互的正则应用
m0_52343631的博客
06-13 102
如果说正则是魔法，那就只能用魔法打败魔法。本章，我们将在桌面平台，搭建如下的正则匹配应用。在输入正则表达式时，中间部分的文字会随之高亮。这里使用macos平台进行演示说明，其他平台表现一致。
Flutter Dart 正则RegExp [.....]和[^.....]（一）
热门推荐
我很好
09-06 2万+
卧龙、凤雏二者得一可安天下。——水镜先生 DartPad 线上工具 正则表达式 - 语法 [...] 匹配中括号内所有字符 1、匹配所有字符ABC（字符串中是否包含ABC所有字符中任意一个字符） 至少包含一个字符为true，否则为false void main() { isABC('A1234656B123456C'); } void isABC(String input) { RegExp mobile = new RegExp(r'[ABC]'); boo..
flutter版match-parent
Genius_sasuke的博客
04-14 1788
在安卓开发中我们都知道，在需要子view充满父viewgroup的时候可以使用match-parent，就可以实现子view的高度随着父viewgroup的高度而变化，但是在flutter中应该怎么办呢？ 这几天，在研究verticalDivider的时候终于被我找到了，虽然应用场景不多，但是终于是解决了一大难题 一般的，在flutter中，比如在Row中，我们希望左边是一个icon，然后右边...
Flutter 正则匹配实战:数据篇 - 数据操作相关功能实现
m0_52343631的博客
06-13 151
比如有网时候的微信桌面端，会从网络加载数据，展示出加载中的指示器。如果未对异常进行处理，那么会导致异步任务无法完成，从而一直处于任务中的状态，按钮一直处于 loading 状态是很不友好的。到这里，对一张表的增删改查就就基本上差不多了，这相当于一个最基本的业务单元，当需要增加其他数据表表，依葫芦画瓢就行了。因为网络请求容易出现各种各样的错误，不同的错误场景下，给用户不同的反馈是有必要的。如果更细致一点，可以考虑一下异常状态的展示，或者不同状态切换时给点过渡动画，这些细节，大家可以自己根据需求来处理。
Flutter 布局相关知识
hnnd123的博客
09-17 585
约束类型 在Flutter中，widget是由其底层的RenderBox渲染，渲染边界的约束（Constraints）由父级给出，widget在这些约束下调整自身尺寸。约束包括最小最大宽高，尺寸则是具体的宽高。 在Android中，布局的宽高限定有三种，match_parent、wrap_content以及具体尺寸。在Flutter中，也有这三种约束。 尽可能大的约束，例如Center、Lis...
正则表达式
火星男孩的分享空间
09-12 407
它是一个用来规范字符串格式的表达式语言。^ []{} $^：表示开始$：表示结束()：表示一个整体[]：表示范围方括号表示某些字符允许在一个字符串中的某一特定位置出现：“[ab]”：表示一个字符串有一个”a”或”b” “^[a-zA-Z]”：表示一个以字母开头的字符串； “[0-9]%”：表示一个百分号前有一位的数字； “,[a-zA-Z0-9]$”：表示一个字符串以一个逗号后面跟着一个字母或
Flutter 正则匹配实战:数据篇 - 数据库集成与记录操作
m0_52343631的博客
06-13 235
由于不同用户的数据库版本各不一致，比如张三是 4 版本，李四是 10 版本，赵五是 7 版本，最新版数据库是 12 版本。另外在创建时，可以通过升级补丁的方式来不断修改数据库达到最新版本，这样可以统一操做，不然每次更新还要额外写最新版数据库的创建逻辑。在程序进行更新迭代的过程中，对数据库的更新在所难免，比如新增表，或者增加某些字段。到这里，关于数据库的使用基本上就没有什么问题了，不过关于复杂 sql 的语句书写，这是编程开发者的基本功。如下所示，是对四个操作的实现，对于简单的增删改查，使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

个人笔记(bug，思路，总结)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值