xxxx

**结论：**

1. CommonTitle
2. CommonFormItem
3. CommonRadioFormItem
4. CommonSelectFormItem
5. CommonPicker
6. CommonImagePicker
7. CommonCheckButton
8. RoomAppliance

4.44 发布房源页-主体结构

效果：

步骤：

1. 创建文件 pages/room_add/index.dart
2. 添加 material 依赖，添加有状态组件
3. 使用 Scaffold 完成页面主体结构
4. 添加 提交按钮
5. 在路由中注册该页面

4.45 发布房源页-CommonTitle

效果：

步骤：

1. 创建文件 widgets/common_title.dart
2. 添加 material 依赖，添加无状态组件，添加 title 参数
3. 完成组件主体内容
4. 使用组件
5. 完善组件

4.46 发布房源页-CommonFormItem-分析

结构分析：

结论：

• CommonFormItem
  • label
  • Content
    • 文本框
      • hintText
      • onChanged
      • controller
    • 尾缀
      • suffix
      • suffixText

组件参数：

  final String label;
  final Widget Function(BuildContext context) contentBuilder;

  final Widget suffix;
  final String suffixText;

  final String hintText;
  final ValueChanged onChanged;
  final TextEditingController controller;

使用：

    CommonFormItem(
            label: '租金',
            hintText: '请输入租金',
            suffixText: '元/月',
            controller: TextEditingController(),
          ),

4.47 发布房源页-CommonFormItem-实现

效果：

实现：

1. 准备 2. 创建文件 widgets/common_form_item.dart 3. 添加依赖，编写无状态组件，添加并初始化参数 4. 使用组件
2. 核心代码
   1. 主体结构 实现
   2. 底线 实现
   3. label 实现
   4. 文本框实现
   5. 尾缀实现
3. 测试

4.48 发布房源页-CommonFormItem-实现小区选择

效果：

步骤：

1. 添加 CommonFormItem
2. 完善 contentBuilder
3. 完善 点击事件处理
4. 测试
5. 优化 CommonFormItem，调整Expanded 位置

4.49 发布房源页-CommonRadioFormItem

效果：

分析：

//参数
  final String label;
  final List<String> options;
  final int value;
  final ValueChanged<int> onChange;

//使用
          CommonRadioFormItem(
              label: '租赁方式',
              options: ['合租', '整租'],
              value: 0,
              onChange: (index) {}),
          CommonRadioFormItem(
              label: '装修',
              options: ['精装', '简装'],
              value: 0,
              onChange: (index) { }),

步骤：

1. 准备

   1. 新建文件 widgets/common_radio_form_item.dart
   2. 添加 material 依赖，添加无状态组件，添加并初始化参数

2. 核心代码

   1. 使用 CommonFormItem 完成基本结构 label 和 contentBuilder 属性
   2. 在 roomAdd 页面使用 CommonRadioFormItem
   3. 完善 contentBuilder
   4. 处理选项及点击事件 使用 Radio
   5. 完善细节

3. 测试

   1. 让按钮可点击

4.50 发布房源页-CommonSelectFormItem

效果：

分析：

//参数
  final String label;
  final int value;
  final List<String> options;
  final Function(int) onChange;

//用法
CommonSelectFormItem(
            label: '户型',
            value: 0,
            onChange: (val) {},
            options: ['一室','二室','三室','四室',],
          ),
CommonSelectFormItem(
            label: '楼层',
            value: 0,
            onChange: (val) {},
            options: ['高楼层','中楼层','低楼层',],
          ),
CommonSelectFormItem(
            label: '朝向',
            value: 0,
            onChange: (val) {},
            options: ['东','南','西','北京',],
          ),

步骤：

1. 准备
   1. 新建文件 widgets/common_select_form_item.dart
   2. 添加 material 依赖，添加无状态组件，添加并初始化参数
2. 核心代码
   1. 使用 CommonSelectFormItem 完成基本结构
   2. 在 roomAdd 页面使用 CommonSelectFormItem
   3. 完善细节
3. 测试

4.51 发布房源页-CommonPicker-分析

结构分析：

结论：

CommonPicker.showPicker 是一个 class 的静态方法

半屏弹窗— showCupertinoModalPopup

选择区域— CupertinoPicker

使用：

//参数
BuildContext context,
List<String> options,
int value,

//返回值
Future<int> result；
  
  
//使用
     var result = CommonPicker.showPicker(
                context: context, options: options, value: value);

            result.then((selectedValue) {
              if (value != selectedValue &&
                  selectedValue != null &&
                  onChange != null) {
                onChange(selectedValue);
              }
            });

4.52 发布房源页-CommonPicker-主体结构

效果：

步骤：

1. 准备
   1. 新建文件 utils/common_picker/index.dart
   2. 引入 material 和 cupertino 依赖
   3. 完善类及静态方法的主体结构
   4. 在 CommonSelectFormItem 中使用 CommonPicker
2. 核心编码
   1. 使用 showCupertinoModalPopup 返回 Future
   2. 完善内容区 header 部分
   3. 使用 CupertinoPicker 完善内容区 body 部分
3. 测试及完善
   1. 使用 CommonPicker
   2. 完善细节

4.53 发布房源页-CommonPicker-细节和事件

目的：

细节：半屏高度

事件： roomAdd — CommonSelectFormItem — CommonPicker 关联

步骤：

1. 细节
   1. 半屏高度
2. 事件
   1. 在 roomAdd 页面添加状态
   2. 添加事件处理函数
   3. 完善 CommonSelectFormItem 的事件处理部分
   4. 完善 CommonPicker 的事件处理部分
3. 测试

4.54 发布房源页-房屋图像-主体结构

效果：

分析：

2. common_image_picker 使用

   //1. 参数
   final ValueChanged<List<File>> onChange;
   
   //2.用法
   CommonImagePicker(
     onChange: (List<File> files) {},
   )
   

3. 测试图片数据

   const List<String> defautImages = [
     'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tdgve1j30ku0bsn75.jpg',
     'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2whp87sj30ku0bstec.jpg',
     'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tl1v3bj30ku0bs77z.jpg',
   ];
   // 图片宽750px，高424px；
   var imageWidth=750.0;
   var imageHeight=424.0;
   var imageWidthHeightRatio = imageWidth / imageHeight;
   
   

步骤：

1. 准备
   1. 添加文件 widgets/common_image_picker.dart
   2. 添加 material 依赖，
   3. 准备测试图片数据
   4. 创建有状态组件
   5. 在 roomAdd 页面使用 CommonImagePicker
2. 核心编码
   1. 准备图片宽高
   2. 准备添加图片按钮
   3. 准备图片 wrapper 函数
   4. 展示图片及添加按钮
3. 测试

4.55 发布房源页-房屋图像-添加删除

效果：

分析：

1. 添加— 使用第三方组件 image_picker 读取本地图片

   //1.安装依赖
     image_picker: ^0.6.1+4
       
   //2. iOS 配置 <project root>/ios/Runner/Info.plist:
     <key>NSCameraUsageDescription</key>
   	<string>Use to get room image </string>
   	<key>NSMicrophoneUsageDescription</key>
   	<string>Use to capture audio for room</string>
   	<key>NSPhotoLibraryUsageDescription</key>
   	<string>Use to get room image</string>
       
   //3. 引入依赖
   import 'package:image_picker/image_picker.dart';
   
   //4. 使用
     _pickImage() async {
       var image = await ImagePicker.pickImage(source: ImageSource.gallery);
     }
   

2. 删除 — 图标叠加 使用 Stack

步骤：

1. 准备
   1. 安装 image_picker 依赖
   2. 引入 image_picker 依赖
2. 核心代码
   1. 实现添加图片逻辑
      1. 添加状态 files
      2. 图片数据使用 files
      3. 添加方法 pickImage
      4. addButton 添加事件
      5. 测试
   2. 实现图片删除逻辑
      1. 添加删除图标
      2. 实现删除事件
      3. 测试

4.56 发布房源页-房屋标题描述

效果：

步骤：

1. 添加房屋标题
   1. 提示文案：请输入标题（例如：整组，小区名 2室 2000元）
2. 添加房屋描述
   1. 提示文案： 请输入房屋描述信息
3. 添加 controller
4. 测试及细节完善

4.57 发布房源页-房屋配置-分析

设计图分析：

结论：

1. 结构 Wrap

2. 图标，使用字体文件

   1. 静态文件 /static/fonts/iconfont.ttf

   2. 配置文件

        fonts:
          - family: CommonIcon
            fonts:
            - asset: static/fonts/iconfont.ttf
      

   3. 字体使用

      //字体的使用
      Icon(
        IconData(
          item.iconPoint,
          fontFamily: Config.CommonIcon,
        ),
      )
        
      //config.dart
      class Config {
        static const CommonIcon = 'CommonIcon';
      }
      

3. 数据

   class RoomApplianceItem {
     final String title;
     final int iconPoint;
     final bool isChecked;
   
     const RoomApplianceItem(this.title, this.iconPoint, this.isChecked);
   }
   
   const List<RoomApplianceItem> _dataList = [
     RoomApplianceItem('衣柜', 0xe918, false),
     RoomApplianceItem('洗衣机', 0xe917, false),
     RoomApplianceItem('空调', 0xe90d, false),
     RoomApplianceItem('天然气', 0xe90f, false),
     RoomApplianceItem('冰箱', 0xe907, false),
     RoomApplianceItem('暖气', 0xe910, false),
     RoomApplianceItem('电视', 0xe908, false),
     RoomApplianceItem('热水器', 0xe912, false),
     RoomApplianceItem('宽带', 0xe90e, false),
     RoomApplianceItem('沙发', 0xe913, false),
   ];
   
   //组件参数 
   final ValueChanged<List<RoomApplianceItem>> onChange;
   

4. CommonCheckButton 的实现

   import 'package:flutter/material.dart';
   
   class CommonCheckButton extends StatelessWidget {
     final bool isChecked;
   
     const CommonCheckButton(
       this.isChecked, {
       Key key,
     }) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return isChecked
           ? Icon(
               Icons.check_circle,
               color: Colors.green,
             )
           : Icon(
               Icons.radio_button_unchecked,
               color: Colors.green,
             );
     }
   }
   

操作：

1. 准备图标
2. 创建文件 widgets/room_appliance.dart
3. 准备数据
4. 准备config 文件
5. CommonCheckButton 实现

4.58 发布房源页-房屋配置-实现

效果：

步骤：

1. 准备
   1. 添加 material 依赖
   2. 添加有状态组件
   3. 添加并初始化参数
2. 核心编码
   1. 完成主体结构
   2. 使用 RoomApplicance
   3. 添加点击事件
3. 测试&完善

4.59 房屋详情页-分析

设计图分析：

结论：

1. 页面结构

   1. 主体结构— Scaffold
      1. 顶部部分 — appBar
      2. 内容部分— Stack
         1. ListView
            1. 房屋图片
               1. Swiper
            2. 房屋基本信息
               1. 标题
               2. 价格
               3. 标签
            3. 房屋详细信息
               1. 面积
               2. 楼层
               3. 房型
               4. 装修
            4. 房屋配置
            5. 房屋概况
            6. 猜你喜欢
         2. 浮动操作区
            1. 收藏
            2. 联系房东按钮
            3. 预约看房按钮

2. 房屋数据结构

   class RoomDetailData {
     String id;
     String title;
     String community;
     String subTitle;
     int size;
     String floor;
     int price;
     String roomType;
     List<String> houseImgs;
     List<String> tags;
     List<String> oriented;
     List<String> applicances;
   
     RoomDetailData({
       this.id,
       this.title,
       this.community,
       this.subTitle,
       this.size,
       this.roomType,
       this.houseImgs,
       this.tags,
       this.price,
       this.floor,
       this.oriented,
       this.applicances,
     });
   
   }
   
   
   var defaultData=RoomDetailData(id:'1111',title: '整租 中山路 历史最低价',community: '中山花园',subTitle: '近地铁，附近有商场！',size: 100,floor: '高楼层',price: 3000,oriented: ['南'],roomType: '三室',applicances:['衣柜','洗衣机'],tags:["近地铁", "集中供暖", "新上", "随时看房"],houseImgs: [
     'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tdgve1j30ku0bsn75.jpg',
     'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2whp87sj30ku0bstec.jpg',
     'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tl1v3bj30ku0bs77z.jpg',
   ]);
   

3. 分享按钮 share

   //1. 安装依赖
     share: ^0.6.3+1
       
   //2. 引入依赖
       import 'package:share/share.dart';
   
   //3. 使用
       Share.share('check out my website https://example.com');
   
   

4.60 房屋详情页面-主体结构

效果：

步骤：

1. 准备
   1. 将RoomDetailPage 转成 有状态组件
   2. 安装 share 依赖
   3. 添加 data.dart,并粘贴之前准备的代码
2. 核心编码
   1. 完善 appBar 部分主体结构
   2. 添加分享按钮
   3. 使用 Stack 完善body的主体结构
   4. 完善 底部按钮区域
3. 测试&完善细节
   1. 修改 widgets/room_list_item_widget.dart 添加点击事件
   2. 修改 pages/home/tab_search/dataList.dart 修改id
   3. 测试

4.61房屋详情页面-底部按钮

效果：

步骤：

1. 添加收藏按钮
2. 添加‘联系房东’ 按钮
3. 添加’预约看房’按钮
4. 添加收藏事件及展示
5. 测试

4.62 房屋详情页面-房屋图片&房屋基本信息

效果：

步骤：

1. 添加 图片
2. 添加 价格
3. 添加 标签
4. 添加 分割线
5. 测试

4.63 房屋详情页面-房屋详细信息

效果：

步骤：

1. 添加 Container Wrap 结构
2. 实现【面积】部分
3. 重构组件
4. 实现 【楼层】【房型】【装修】
5. 测试

4.64 房屋详情页面-房屋配置

效果：

步骤：

1. 打开文件 /widgets/room_appliance.dart
2. 创建 无状态组件 RoomApplianceList
3. 添加并初始化参数 final List list;
4. 完善内容部分
5. 在 /pages/room_detail/index.dart 使用 RoomApplianceList
6. 完善细节
7. 测试

4.65 房屋详情页面-房屋概况&猜你喜欢

效果：

步骤：

1. 添加 container 和 container.padding,Column
2. 添加 Text 用于显示 房屋概况
3. 添加按钮区域（收起/举报）
4. 添加状态 showAllText=false 和 showTextTool 变量。
5. 根据 showAllText 和 showTextTool 显示相应内容
6. 添加事件控制 showAllText；
7. 添加 Info()

4.66 filterBar-分析

结构分析：

结论：

1. 结构

   • filterBar— Row
     • 区域--Item
     • 方式--item
     • 租金--item
     • 筛选--item
   • Picker选择器 — CommonPicker
   • 筛选选择器 — Drawer

2. 组件参数

   ValueChanged<FilterBarResult> onChange
   

数据及结构：

// pages/home/tab_search/filter_bar/data.dart
//结果数据类型
class  FilterBarResult {
  final String areaId ;
  final String priceId ;
  final String rentTypeId;
  final List<String> moreIds;

  FilterBarResult({this.areaId, this.priceId, this.rentTypeId, this.moreIds});
  
}

//通用类型
class GeneralType{
  final String name;
  final String id;

  GeneralType(this.name, this.id);
}

List<GeneralType> areaList = [
  GeneralType('区域1', '11'),
  GeneralType('区域2', '22'),
];
List<GeneralType> priceList = [
  GeneralType('价格1', '11'),
  GeneralType('价格2', '22'),
];
List<GeneralType> rentTypeList = [
  GeneralType('出租类型1', '11'),
  GeneralType('出租类型2', '22'),
];
List<GeneralType> roomTypeList = [
  GeneralType('房屋类型1', '11'),
  GeneralType('房屋类型2', '22'),
];
List<GeneralType> orientedList = [
  GeneralType('方向1', '11'),
  GeneralType('方向2', '22'),
];
List<GeneralType> floorList = [
  GeneralType('楼层1', '11'),
  GeneralType('楼层2', '22'),
];

4.67 filterBar-展示区域

效果：

步骤：

1. 准备
   1. 新建文件 pages/home/tab_search/filter_bar/data.dart，填充数据
   2. 新建文件 pages/home/tab_search/filter_bar/index.dart
   3. 引入 material 依赖， 创建有状态组件，添加并初始化参数
2. 核心编码
   1. 编写基本结构，解决外边框样式问题
   2. 在 tabSearch页面中使用 Filter_bar
   3. 编写 filterBar 的 item 组件
   4. 使用 item 组件

4.68 filterBar-picker 部分

效果：

步骤：

1. 添加 4 个按钮的激活状态
2. 添加 4 个结果值
3. 添加 4 响应事件
4. 添加 _onChange 方法用于通知 FilterBar 的父组件
5. 完成【区域】选择的 picker 部分
6. 参照【区域】完成 【方式】和【租金】的 picker 部分
7. 【筛选】先使用空白函数

4.69 filterBar-drawer 部分-展示部分

效果：

步骤：

1. 准备
   1. 创建文件 filter_bar/filter_drawer.dart
   2. 添加 material 依赖 添加无状态组件
2. 核心编码
   1. 实现页面基本结构
   2. 在 tabSearch页面使用 FiterDrawer
   3. 实现选项按钮
   4. 将选项按钮提取成组件 FilterDrawerItem
3. 完善细节
   1. 隐藏 Drawer 按钮
   2. 打开 Drawer

4.70 filterBar-drawer 部分-数据分析

问题：

如何将 Drawer 的数据传递到 FilterBar中来?

分析：

结论：

使用全局状态，基于 scoped_model 实现

细节：

//1. 安装依赖
 scoped_model: ^1.0.1
//2. 引入依赖
import 'package:scoped_model/scoped_model.dart';
//3.使用

//3.1 创建 model
class CounterModel extends Model {
  int _counter = 0;
  int get counter => _counter;
  void increment() {
    _counter++;
    notifyListeners();
  }
}
//3.2 在根组件外使用 model
class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   
    return new ScopedModel<CounterModel>(
      model: new CounterModel(),
      child: new Column(children: [
        Widget(
        //...
        ),
        Widget(),
      ])
    );
  }
}
//3.3 在子组件中获取 model 中的数据/方法
  var counter =
      ScopedModel.of<CounterModel>(context, rebuildOnChange: true).counter;
  ScopedModel.of<CounterModel>(context, rebuildOnChange: true).increment();

4.71 filterBar-drawer 部分-ScopedModel-model

分析：

1. 数据分析

   List<GeneralType> _roomTypeList = [];
   List<GeneralType> _orientedList = [];
   List<GeneralType> _floorList = [];
   Set<String> _selectedList = new Set<String>();
   

2. 使用分析

• FilterBar 使用
  • 添加可选数据列表 set dataList(Map<String, List> data)
  • 获取选中数据列表 Set get selectedList
• FilterDrawer 使用
  • 获取可选数据列表 Map<String, List> get dataList
  • 添加/删除选中数据列表 selectedListToggleItem(GeneralType data)

实现：

1. 创建文件 scoped_model/room_filter.dart
2. 添加 scoped_model 依赖
3. 编写 model 基本结构
4. 实现 model 数据结构
5. 实现 model 方法

4.72 filterBar-drawer 部分-ScopedModelHelper

问题：

操作 model 首先得获取 model，官方提供获取的方法需要注意 rebuildOnChange: true 参数！

能够封装一下？

解决：

能，自己编写一个 getModel 方法

//官方 
ScopedModel.of<T>(context, rebuildOnChange: true)
  
////////vs/////////
  
//自己封装
getModel<T>(context)

实现：

1. 添加文件 utils/scopoed_model_helper.dart
2. 添加 scopedModel 和 material 依赖
3. 实现 类的基本结构
4. 实现静态方法 getModel

4.73 filterBar-drawer 部分-ScopedModel-使用

效果：

知识回顾：

1. 有状态组件生命周期 initState— 只执行一次，没有context,或者 context 不完整

2. 有状态组件生命周期 didChangeDependencies 依赖变更后就会执行，有context，会执行多次

3. 一次执行，并且需要 context

    @override
     void initState() {
       Timer.run(_getData);
       super.initState();
     }
   

步骤：

1. application 中添加 Model
2. 在 FilterBar 的 initState 生命周期 set dataList(Map<String, List> data)
3. 在 FilterBar 的 didChangeDependencies 生命周期 Set get selectedList
4. 在 FilterDrawer 的 build 函数中 Map<String, List> get dataList
5. 在 FilterDrawer 的 Item 点击事件中 selectedListToggleItem(String data)
6. 测试
7. 优化

5 前后端联调

5.1 介绍 Dio

问题：

flutter 中如何发送网络请求？

分析：

// 通过 httpClient 发送请求 
get() async {
  var httpClient = new HttpClient();
  var uri = new Uri.https(
      'itcast.cn', '/path1/path2', {'param1': '42', 'param2': 'foo'});
  var request = await httpClient.getUrl(uri);
  var response = await request.close();
  var responseBody = await response.transform(UTF8.decoder).join();
  return responseBody;
}

////////////////////vs/////////////////////
//通过 dio
get() async {
    Response response = await Dio().get(
      "https://itcast.cn/path1/path2？param1=42&param2=foo");
  
  return response;
}

结论：

使用 dio 作为 app 的网络请求工具。

Dio 对 HttpClient 的封装，增加了一些功能如 拦截器，全局配置，请求取消等。

使用：

// 安装依赖
  dio: ^2.1.6
    
// 引入依赖
import "package:dio/dio.dart";

//使用
Dio().get("https://itcast.cn/test");

//其他用法
BaseOptions options = new BaseOptions(
          baseUrl: "https://itcast.cn",
          connectTimeout: 1000 * 10,
          receiveTimeout: 3000,
          extra: {'context': context});
Dio dio = new Dio(options);
dio.get('/test');

5.2 封装 DioHttp

问题：

dio 的 api 变了，我们需要修改的代码较多；或者后续使用其他组件替代 dio？

解决：

封装 DioHttp

详细分析：

1. 内部状态

   • Dio _client;
   • BuildContext context;

2. 初始化

   • static DioHttp of(BuildContext context)

3. 方法

   • get

     Future<Response<Map<String, dynamic>>> get(String path,
         [Map<String, dynamic> params, String token]) async {}
     
     

   • post

     Future<Response<Map<String, dynamic>>> post(String path,
           [Map<String, dynamic> params, String token]) async {}
     

   • postData

     Future<Response<Map<String, dynamic>>> postFormData(String path,
           [Map<String, dynamic> params, String token]) async {}
     

编码：

1. 创建文件 utils/dio_http.dart
2. 添加 dio，material 依赖
3. 完成 DioHttp 的基本结构
4. 完成 初始化部分
5. 完成 get 方法
6. 完成 post 方法
7. 完成 postData 方法

5.3 注册页联调

效果：

步骤：

1. 接口文档分析
2. 打开页面 pages/register.dart
3. 在 _RegisterPageState 添加 3 个 TextEditingController，并赋给 3个 TextField
4. 添加处理函数 _registerHandle() async {},并在注册按钮事件中调用
5. 处理注册逻辑
   1. 获取 TextFeild 值
   2. 处理 输入异常
   3. 发送网络请求
   4. 处理异常返回
   5. 跳转到 登陆页面
6. 测试

5.4 登陆页联调--分析

问题：

1. 登陆状态怎么和其他页面同步？
2. 再次打开 app ，是否需要二次登陆？
3. 登陆过期如何处理？

分析：

1. 使用 ScopedModel 同步登陆信息（token）。
2. 登陆成功后，将 token 写入本地存储；添加一个app 启动页，app启动的时候，加载token！
3. 在 DioHttp 中添加 Dio 拦截器，当登陆过期是，打开登陆页。

添加和使用本地缓存：

shared_preferences文档

//安装依赖
shared_preferences: ^0.5.4+3
//引入依赖
import 'package:shared_preferences/shared_preferences.dart';
//使用
_incrementCounter() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int counter = (prefs.getInt('counter') ?? 0) + 1;
  print('Pressed $counter times.');
  await prefs.setInt('counter', counter);
}

5.5 封装 Store

问题：

本地缓存 shared_preferences 的api 可能会变？

结论：

将 shared_preferences 封装成 store

详细分析：

1. 内部数据 final SharedPreferences storage;
2. 方法
   1. getString(StoreKeys key) async{}
   2. setString(StoreKeys key,String value) async{}
   3. getStringList(StoreKeys key) async{}
   4. setStringList(StoreKeys key,List value) async{}

实现步骤：

2. 新建文件 /utils/store.dart
3. 添加 shared_preferences 依赖
4. 编写类的基本结构
5. 实现初始化方法
6. 实现 getString setString getStringList setStringList
7. 添加 storeKeys

5.6 实现 AuthModel

分析：

1. 内部数据 token
2. 方法
   1. String get token
   2. bool get isLogin
   3. void initApp(BuildContext context) async {}
   4. void login(String token,BuildContext context) {}
   5. void logout()

步骤：

1. 新建文件 scoped_model/auth.dart
2. 定义 内部数据 _token
3. 实现分析的5个方法/属性
4. 在 Application 中使用 AuthModel

5.7 登陆页联调

效果：

步骤：

1. 打开页面 pages/login.dart
2. 在 _LoginPageState 添加 2 个 TextEditingController，并赋给 2 个 TextField
3. 添加处理函数 _loginHandle() async {},并在登陆按钮事件中调用
4. 处理登陆逻辑
   1. 获取 TextFeild 值
   2. 处理 输入异常
   3. 发送网络请求
   4. 处理异常返回
   5. 回到上一个路由
5. 测试

5.8 使用 AuthModel 及退出登陆

效果：

步骤：

1. 首页-tabProfile-header 部分使用登陆态
2. 首页-tabProfile-房屋管理部分使用登陆态
3. 退出登陆逻辑实现
4. 测试

5.9 完善个人信息

效果：

分析：

可以在登陆成功后，发送网络请求，获取登陆用户的个人信息！

将登陆用户的个人信息保存到 AuthModel 中，在 App 内共享。

获取个人信息，参考接口文档。

Get /user 需要token

步骤：

1. 添加 UserInfo

   1. 添加 models/user_info.dart

   2. 完善 UserInfo 属性

        final String avatar;
        final String gender;
        final String nickname;
        final String phone;
        final int id;
      

   3. 添加工厂构造函数 factory UserInfo.fromJson(Map<String, dynamic> json)

2. 在 AuthModel 添加 以下属性/方法

   1. UserInfo _userInfo;
   2. UserInfo get userInfo => _userInfo;
   3. _getUserInfo(BuildContext context) async {}
   4. 在 login/logout 方法中 维护 userInfo

3. 在 pages/home/tab_profile/header.dart 中使用 UserInfo

4. 测试

5.10 model 生成半自动化

问题：

工厂构造函数代码能否自动生成？

方案：

使用 json_serializable

详细用法：

//1.安装依赖
dependencies: 
  json_annotation: ^3.0.0

dev_dependencies:
  build_runner: ^1.6.7
  json_serializable: ^3.2.2
    
//2. 引入依赖
    import 'package:json_annotation/json_annotation.dart';

//3. 代码准备
import 'package:json_annotation/json_annotation.dart';

part 'user_info.g.dart';

@JsonSerializable()
class UserInfo {
  final String avatar;
  final String gender;
  final String nickname;
  final String phone;
  final int id;

  UserInfo(this.avatar, this.gender, this.nickname, this.phone, this.id);

  factory UserInfo.fromJson(Map<String, dynamic> json) =>
      _$UserInfoFromJson(json);

  Map<String, dynamic> toJson() => _$UserInfoToJson(this);
}

//4. 执行命令
flutter packages pub run build_runner build

操作：

1. 安装依赖
2. 修改 userInfo 代码
3. 执行命令
4. 测试 @JsonKey(name: 'value')

5.11 优化model

问题：

优化现有 model，方便后面的开发。

分析：

GeneralType 的使用场景，

从接口文档中看 GeneralType 对应真实的字段。

操作：

1. 优化 GeneralType

2. 优化 RoomDetailData

   import 'package:json_annotation/json_annotation.dart';
   
   part 'room_detail_data.g.dart';
   
   @JsonSerializable()
   class RoomDetailData {
     @JsonKey(name: 'houseCode')
     String id;
   
     String title;
     String community;
   
     @JsonKey(name: 'description')
     String subTitle;
     int size;
     String floor;
     int price;
     String roomType;
   
     @JsonKey(name: 'houseImg')
     List<String> houseImgs;
     List<String> tags;
     List<String> oriented;
   
     @JsonKey(name: 'supporting')
     List<String> applicances;
   
     RoomDetailData({
       this.id,
       this.title,
       this.community,
       this.subTitle,
       this.size,
       this.roomType,
       this.houseImgs,
       this.tags,
       this.price,
       this.floor,
       this.oriented,
       this.applicances,
     });
   
     factory RoomDetailData.fromJson(Map<String, dynamic> json) =>
         _$RoomDetailDataFromJson(json);
   
     Map<String, dynamic> toJson() => _$RoomDetailDataToJson(this);
   }
   

3. 优化 RoomListItemData

   import 'package:json_annotation/json_annotation.dart';
   
   part 'room_list_item_data.g.dart';
   
   @JsonSerializable()
   class RoomListItemData {
     @JsonKey(name: 'houseCode')
     final String id;
   
     final String title;
   
     @JsonKey(name: 'desc')
     final String subTitle;
   
     @JsonKey(name: 'houseImg')
     final String imageUri;
   
     final List<String> tags;
   
     final int price;
   
     const RoomListItemData(
         {this.title,
         this.subTitle,
         this.imageUri,
         this.tags,
         this.price,
         this.id});
   
     factory RoomListItemData.fromJson(Map<String, dynamic> json) =>
         _$RoomListItemDataFromJson(json);
   
     Map<String, dynamic> toJson() => _$RoomListItemDataToJson(this);
   }
   
   

4. 修改引用

5.12 城市选择器-分析

效果：

分析：

1. 城市选择使用 city_pickers
2. 需要在本地缓存中 存储 city，需要使用 Store
3. 目前仅部分城市可用，在config 中添加可用城市列表
4. 多个页面共享当前 city 状态，需要使用 ScopedModel

代码准备：

1. 使用 city_pickers

   //1. 安装依赖
   city_pickers: ^0.1.28
     
   //2. 引入依赖
     import 'package:city_pickers/city_pickers.dart';
   
   //3. 使用
       var result = await CityPickers.showCitiesSelector(
         context: context,
         theme: new ThemeData(
           primaryColor: Colors.green,
         ),
       );
   
    String cityName = result?.cityName;
   

2. 配置可用 city

   // config.dart
    static List<GeneralType> availableCitys = [
       GeneralType('北京', 'AREA|88cff55c-aaa4-e2e0'),
       GeneralType('上海', 'AREA|dbf46d32-7e76-1196'),
       GeneralType('深圳', 'AREA|a6649a11-be98-b150'),
       GeneralType('广州', 'AREA|e4940177-c04c-383d'),
     ];
   

3. 编写 CityModel

   //scoped_model/city.dart
   
   import 'package:hook_up_rent/models/general_type.dart';
   import 'package:scoped_model/scoped_model.dart';
   
   class CityModel extends Model {
     GeneralType _city ;
    
   
     set city(GeneralType data) {
       _city=data;
       notifyListeners();
     }
   
     GeneralType get city {
       return _city;
     } 
   }
   
   

4. 在 application 中使用 CityModel

5. Store.StoreKeys 添加 city

6. 在 scoped_model_helper.dart 中 添加 getAreaId 方法

    static String getAreaId(context){
       return ScopedModelHelper.getModel<CityModel>(context).city?.id??Config.AvailableCitys.first.id;
     }
   

5.13 城市选择器-实现

效果：

分析：

1. 点击按钮
2. 弹出城市选择器
3. 选择城市
4. 保存城市
   1. 判断城市合法
   2. 城市保存到 ScopedModel
   3. 城市保存到 Store
5. 打开app，获取城市
   1. 先从 ScopedModel 获取
   2. 如果前者为空，使用默认值的第一个 ；并从 Store 获取（异步）

步骤：

1. 打开 widgets/search_bar/index.dart
2. 实现修改城市逻辑
   1. 使用 _changeLocation
   2. 实现 _changeLocation
   3. 实现 _saveCity
3. 实现获取城市逻辑
   1. 使用 _getLocation
   2. 实现 _getLocation
   3. 使用 city.name
4. 测试

5.14 联调 FilterBar

效果：

分析：

其实就是获取条件数据。

接口，参考接口文档。

final url = '/houses/condition?id=$areaId';

List<GeneralType> areaList = List<GeneralType>.from(data['area']['children']
    .map((item) => GeneralType.fromJson(item))
    .toList());
List<GeneralType> priceList = List<GeneralType>.from(
    data['price'].map((item) => GeneralType.fromJson(item)).toList());
List<GeneralType> rentTypeList = List<GeneralType>.from(
    data['rentType'].map((item) => GeneralType.fromJson(item)).toList());
List<GeneralType> roomTypeList = List<GeneralType>.from(
    data['roomType'].map((item) => GeneralType.fromJson(item)).toList());
List<GeneralType> orientedList = List<GeneralType>.from(
    data['oriented'].map((item) => GeneralType.fromJson(item)).toList());
List<GeneralType> floorList = List<GeneralType>.from(
    data['floor'].map((item) => GeneralType.fromJson(item)).toList());

​

步骤：

1. 打开文件 pages/home/tab_search/filter_bar/index.dart
2. 核心编码
   1. 将filter_bar/data.dart 的数据剪切到 index.dart 作为 6 个 List 状态默认值为[];
   2. 在 _getData 中获取网上数据并 setState
3. 测试及优化
   1. 测试
   2. 解决数据返回时，组件已卸载掉问题
   3. 解决城市变更的问题

5.15 联调找房页

效果：

分析：

1. 需要一个数据列表的状态 List dataList;

2. 实现 FIlterBar.onChange 的处理逻辑

3. 房屋列表查询接口

   //1. url
   String url = '/houses?cityId=' +
       '$cityId&area=$area&mode=$mode&price=$price&more=$more&start=1&end=20';
   //2. 返回数据
   resMap['body']['list'];
   

步骤：

1. 打开文件 pages/home/tab_search/index.dart
2. 核心代码
   1. 添加状态 List dataList;
   2. 展示数据使用 dataList；
   3. 完善 RoomListItemWidget ， 图片地址需要添加 baseUri
   4. 给 FIlterBar 添加 onChange 参数 _onFilterBarChange(FilterBarResult data) async {}
   5. 实现 _onFilterBarChange 方法
3. 测试

5.16 房屋详情页

效果：

分析：

进页面就获取数据

接口详情：

// url
final url = '/houses/$roomId';

// 数据
resMap['body']

步骤：

1. 打开文件 pages/room_detail/index.dart
2. 在列表中使用 data；
3. 借助 initState 生命周期 执行 _getData
4. 实现 _getData() async {} 方法，注意解决图片相对路径问题
5. 测试

5.17 房屋管理页

效果：

分析：

进页面就获取数据

接口详情：

// url
    String url = '/user/houses';

//数据
   resMap['body'];

步骤：

1. 打开文件 pages/room_manage/index.dart
2. 将无状态组件转成有状态组件
3. 添加状态List availableDataList
4. 借助 initState 生命周期 执行 _getData，注意使用延迟执行 _getData
5. 实现 _getData() async {} 方法，注意接口需要 token
6. 测试

5.18 房源发布-分析

结构分析：

功能拆分：

• 基础数据准备阶段
  • 户型列表
  • 楼层列表
  • 朝向列表
• 输入信息阶段
  • 选择小区
• 数据提交阶段
  • 校验数据
  • 上传图片
  • 提交数据

步骤：

1. 条件数据准备
2. 选择小区逻辑
3. 图片上传逻辑
4. 数据验证及提交
5. 优化

5.19 房源发布-条件数据

效果：

分析：

接口及返回数据

    //url
    String url = '/houses/params';

    //返回处理
    var res = await DioHttp.of(context).get(url);
    var data = json.decode(res.toString())['body'];
    List<GeneralType> floorList = List<GeneralType>.from(
        data['floor'].map((item) => GeneralType.fromJson(item)).toList());
    List<GeneralType> orientedList = List<GeneralType>.from(
        data['oriented'].map((item) => GeneralType.fromJson(item)).toList());
    List<GeneralType> roomTypeList = List<GeneralType>.from(
        data['roomType'].map((item) => GeneralType.fromJson(item)).toList());

步骤：

1. 打开页面 page/room_add/index.dart

2. 添加 3 个状态

     List<GeneralType> floorList = [];
     List<GeneralType> orientedList = [];
     List<GeneralType> roomTypeList = [];
   

3. 使用 3 个状态的数据

4. 借助 initState 生命周期，延迟调用 _getParams

5. 实现 _getParams() async {}

6. 测试

5.20 房源发布-小区选择-主流程

效果：

分析：

1. 页面基本结构

   • Scaffold
     • AppBar
     • ListView

   ​

2. 准备 Community Model

   import 'package:json_annotation/json_annotation.dart';
   part 'community.g.dart';
   
   @JsonSerializable()
   class Community{
     @JsonKey(name: 'community')
     final String id;
   
     @JsonKey(name: 'communityName')
     final String name;
   
     Community(this.id, this.name);
     factory Community.fromJson(Map<String,dynamic> json)=>_$CommunityFromJson(json);
     Map<String,dynamic> toJson()=>_$CommunityToJson(this);
   }
   
   List<Community> list=[
     Community('11','小区1'),
     Community('22','小区2'),
     Community('33','小区3'),
   ];
   

步骤：

1. 准备

   1. 新建文件 models/community.dart
   2. 使用数据并执行构建命令
   3. 新建文件 pages/community_picker.dart
   4. 添加依赖及有状态组件 CommunityPickerPage

2. 核心编码

   1. 完成页面基本结构

   2. 路由注册

   3. 在 room_add 页面调用CommunityPickerPage并使用返回值

   4. 完善页面 Body 部分

5.21 房源发布-小区选择-细节完善及联调

效果：

分析：

1. 添加 searchBar

2. 小区选择页接口联调

   //接口说明
   final url = '/area/community?name=$value&id=$areaId';
   var res = await DioHttp.of(context).get(url);
   var data = json.decode(res.toString())['body'];
   List<Community> dataList = List<Community>.from(
       data.map((item) => Community.fromJson(item)).toList());
   

步骤：

1. 打开文件 pages/community_picker.dart

2. 添加列表状态 List dataList = []; 并使用

3. 添加 searchBar

4. appBar 背景色及隐藏回退按钮

5. 添加并现 SearchBar.onSearchSubmit 方法

6. 测试

5.22 房源发布-图片上传

效果：

点击提交，上传图片，上传成功后，把图片通过toast 展示到页面上。

分析：

1. 图片上传函数

​ 输入： List

​ 输出： String imageString ，多张图片地址以 ｜ 隔开

​ 函数签名 ：Future uploadImages(List files, BuildContext context) async {}

2. 图片上传接口

//准备 formData 
var fromData = FormData();
  fromData.add("file",
      files.map((file) => UploadFileInfo(file, 'picture.jpg')).toList());

//准备url
  String url = '/houses/image';

//发送请求，处理返回
  var res = await DioHttp.of(context).postFormData(url, fromData, token);
  var data = json.decode(res.toString())['body'];
  String images = List<String>.from(data).join('|');

步骤：

1. 实现图片上传函数
   1. 添加文件 utils/upload_images.dart
   2. 编写函数的主体结构
   3. 实现函数体
2. 使用图片上传函数
   1. 打开 room_add/index.dart
   2. 添加状态 List images = [];
   3. 在 CommonImagePicker.onChange 中 setState
   4. 添加并使用 _submit() async {} 方法
   5. 实现 _submit
3. 测试

5.23 房源发布-数据校验及提交

效果：