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 · 85 阅读 · 0 评论 -
flutter问题处理: Unhandled Exception: setState() called after dispose():
1、问题原因数据进行 setState 的时候,页面已经退出了。2、问题处理//增加个 mounted 属性是否存在的判断即可。if (mounted) { setState(() { dataList = dataList; }); }原创 2021-06-02 17:47:41 · 1715 阅读 · 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 · 124 阅读 · 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 · 167 阅读 · 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 · 149 阅读 · 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 · 114 阅读 · 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 · 236 阅读 · 0 评论 -
好租客-01-新建项目与路由处理
1、新建项目 flutter_hook_up_rent vscode查看 => 命令面板 => Flutter:New Application Project2、下载路由管理第三方库 fluro# 找到项目根目录下的 pubspec.yaml, 在 dependencies 下添加 fluro:"^1.5.1"即可。dependencies: flutter: sdk: flutter # 安装第三方的路由管理页面 fluro: "^1.5.1"原创 2021-05-31 16:04:56 · 167 阅读 · 0 评论