![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
flutter项目实战
flutter项目实战
望月寄明
学习是件快乐的事情
展开
-
好租客-07-首页搜索栏实现
ui效果 注意点 textfield中内容与 prefixIcon, suffixIcon 的内容无法对齐。 所以使用 prefixIcon, suffixIcon 采用自定义实现。 实现代码 import 'package:flutter/material.dart'; class SearchBar extends StatefulWidget { final bool showLocation; final Function goBackCallback; final String i原创 2021-06-03 16:29:10 · 93 阅读 · 0 评论 -
flutter问题处理: Unhandled Exception: setState() called after dispose():
1、问题原因 数据进行 setState 的时候,页面已经退出了。 2、问题处理 //增加个 mounted 属性是否存在的判断即可。 if (mounted) { setState(() { dataList = dataList; }); }原创 2021-06-02 17:47:41 · 1742 阅读 · 0 评论 -
好租客-06 资讯页实现上下拉刷新
1、UI效果: 2、代码实现 1、引入第三方库 dependencies: flutter: sdk: flutter # 安装第三方的路由管理页面 fluro: "^1.5.1" flutter_swiper: ^1.1.4 pull_to_refresh: ^1.5.0 #用于上下拉刷新 # The following adds the Cupertino Icons font to your application. # Use with the Cup原创 2021-06-02 17:31:58 · 142 阅读 · 0 评论 -
好租客-05 首页功能导航,房屋推荐,最新资讯模块实现
UI效果 2、注意点: flutter中的 Text 默认是不支持换行的,而且本身属性的 maxLines 规定了最大行数,但是设置了也不会自动换行。需要借助 Expanded 控件。且 Expanded 的使用方式需要在 包裹 Column,而不是让 Column 包裹,否则换行失效(具体说不清楚,可以看实现代码中的 index-news.dart 文件中的写法)。 3、实现代码 1、index-page.dart 文件内容 import 'package:flutter/material.dart原创 2021-06-02 16:00:50 · 180 阅读 · 0 评论 -
好租客-04 首页轮播图实现
好租客04 首页轮播图实现 1、UI效果: 模拟器上效果显示有点瑕疵。 2、第三方库 flutter_swiper 引入 dependencies: flutter: sdk: flutter # 安装第三方的路由管理页面 fluro: "^1.5.1" # 引入轮播图组件 flutter_swiper: ^1.1.4 3、轮播图使用 (1) 图片数据源 List _imgUrlList = [ 'http://ww3.sinaimg.cn/large/006原创 2021-06-02 09:42:55 · 161 阅读 · 0 评论 -
好租客-03-主页tab实现
1、UI效果: 2、注意点: 1、底部使用 BottomNavigationBar 如果 BottomNavigationBarItem 大于等于四个,type自动改为shifting。 需要手动设置为 “type: BottomNavigationBarType.fixed”。 # initState 函数中实现的部分 barItemList = [ BottomNavigationBarItem(icon: Icon(Icons.home), label: indexTitle),原创 2021-05-31 17:54:34 · 118 阅读 · 0 评论 -
好租客-02-登录注册页面实现
好租客-02-登录注册页面实现 登录页实现 UI效果: 注意点: (1) 使用 SafeView 控件来屏蔽 "刘海屏“”的差异。 (2) 定义成员属性 showPassword 用于控制密码的显示与隐藏的形式。 (3) 使用 TextField 控件来实现输入框,且 decoration 属性实现 提示文字等效果。 (4) 使用 TextField 控件的 obscureText 来实现密码框。 (5) 实现路由跳转效果: Application.router.navigateTo(context,原创 2021-05-31 16:31:06 · 250 阅读 · 0 评论 -
好租客-01-新建项目与路由处理
1、新建项目 flutter_hook_up_rent vscode查看 => 命令面板 => Flutter:New Application Project 2、下载路由管理第三方库 fluro # 找到项目根目录下的 pubspec.yaml, 在 dependencies 下添加 fluro:"^1.5.1"即可。 dependencies: flutter: sdk: flutter # 安装第三方的路由管理页面 fluro: "^1.5.1"原创 2021-05-31 16:04:56 · 185 阅读 · 0 评论