fx_ddfilter_view 0.0.1
fx_ddfilter_view: ^0.0.1

Flutter Android iOS web

A new Flutter package project.

fx_ddfilter_view #

A new Flutter package project.

1:fx_ddfilter_view.dart 布局文件说明 #

1.1:FxDDFilterView

FxDDFilterView一般作为一个界面的主体,包含一个封装好的筛选布局,以及一个需要传入的子widget。 包含属性如下:

  /// [border] 边框
  /// [divider] 传入分割线,默认没有分割线
  /// [filterHeight] 下拉筛选框 单个条件的高度
  /// [textStyle] 文字显示样式,有默认类型 fontSize: 14, color: Color(0xFF333333)
  /// [filterTextStyle] 下拉筛选框 内容文字样式,默认 fontSize: 16, color: Color(0xFF333333)
  /// [cancelBtnTextStyle] 二级联动筛选取消按钮样式
  /// [sureBtnTextStyle] 二级联动筛选确认按钮样式
  /// [child] 因为筛选弹框一般覆盖在上层,需要使用 Stack 布局
  /// [height] 控件的高度
  /// [controller] FxDDFilterController 数据源控制器
  FxDDFilterView({
    Key key,
    this.border,
    this.divider = _FxDDFilterHeaderDivider,
    this.filterHeight = 50,
    this.textStyle = _FxDDFilterHeaderTextStyle,
    this.filterTextStyle = _FxDDFilterFooterTextStyle,
    this.cancelBtnTextStyle = _FxDDFilterFooterCancelTextStyle,
    this.sureBtnTextStyle = _FxDDFilterFooterSureTextStyle,
    @required this.child,
    @required this.height,
    @required this.controller,
  }) : super(key: key);
1.2:_FxDDFilterLayout

_FxDDFilterLayout是一个私有的类,FxDDFilterView中的筛选布局都在_FxDDFilterLayout中实现 定义的属性如下:

  /// [headerDivider] 筛选显示栏的分割线
  /// [headerTextStyle] 筛选显示栏的文本样式
  /// [headerImage] 筛选显示栏的箭头图标,自动旋转90度
  /// [footerItemHeight] 弹出筛选条件内容的单行高度
  /// [footerTextStyle] 弹出筛选条件内容的文本样式
  /// [cancelBtnTextStyle] 如果是二级联动筛选样式的取消按钮样式
  /// [sureBtnTextStyle] 如果是二级联动筛选样式的确定按钮样式
  _FxDDFilterLayout({
    this.headerDivider,
    this.headerTextStyle,
    this.headerImage,
    this.footerItemHeight,
    this.footerTextStyle,
    this.cancelBtnTextStyle,
    this.sureBtnTextStyle
  });

如果弹出的筛选内容只是单一列表样式,则布局都在_FxDDFilterLayout中完成,如果是二级联动的筛选内容样式,则需要借助_FxDDFilerPickerView实现

1.2:_FxDDFilerPickerView

_FxDDFilerPickerView 包含两个CupertinoPicker来实现二级联动的筛选内容框,一般可以实现左侧为省,右侧为市的选项。 定义属性如下:

  /// [rowHeight] 单个row的高度
  /// [textStyle] 内容文本样式
  /// [cancelBtnTextStyle] 如果是二级联动筛选样式的取消按钮样式
  /// [sureBtnTextStyle] 如果是二级联动筛选样式的确定按钮样式
  /// [data] FxDDFilterInfo 整个筛选的添加内容数据源
  /// [handle] 确认和取消的回调
  _FxDDFilerPickerView({
    Key key,
    this.rowHeight = 50,
    this.textStyle,
    this.cancelBtnTextStyle,
    this.sureBtnTextStyle,
    @required this.data,
    @required this.handle
  }) : super(key: key);

2:fx_ddfilter_controller.dart 数据源文件说明 #

2.1:FxDDFilterController

FxDDFilterController控制数据源和接收筛选条件的回调,支持动态修改数据源刷新界面布局。 属性介绍如下:

/// 数据源控制类
/// [selectedCallBack] 外部传入 - 选择筛选条件的回调,返回一个String,用来筛选栏显示文字
/// [_dataSource] 外部传入 - List<FxDDFilterInfo> 筛选界面所有的数据源,由外部传入,可动态修改
/// [titleList] 非外部传入 - 当前筛选栏显示的文字 由 selectedCallBack回调返回的字符串指定
/// [notifiReloadData] 非外部传入 - 动态修改数据源后 通知FxDDFilterView刷新界面布局
class FxDDFilterController {
  final FxDDFilterControllerSelectedCallBack selectedCallBack;
  List<FxDDFilterInfo> _dataSource = [];
  List<String> titleList = [];
  void Function(List<String>) notifiReloadData;
  
  FxDDFilterController({
    this.selectedCallBack
  });
  • 注意1:非外部传入的属性不需要外部定义,防止出现错乱
  • 注意2:动态设置 dataSource 之后,需调用 reloadData 方法布局才会更新
2.2:FxDDFilterInfo

FxDDFilterInfo<T> 为数据源类型,为了后期扩展支持泛型,目前建议TFxDDFilterItemInfo或者FxDDFilterItemSecLinkInfo类型。

FxDDFilterItemInfo:为单一筛选条件列表需要的数据类型 FxDDFilterItemSecLinkInfo:为二级联动筛选条件列表需要的数据类型

3:使用方式 #

布局方式:

FxDDFilterView(
      divider: VerticalDivider(
        color: Color(0xFFCECECE),
        indent: 8,
        endIndent: 10,
      ), 
      controller: fxDDFilterController,
      height: 50,
      arrowImage: Image.asset('assets/images/icon/details-arrow-down.png'),
      border: Border.symmetric(
        horizontal: BorderSide(
          color: Colors.green,
          width: 1
        )
      ),
      child: ListView.builder(
        itemBuilder: (context, index) {
          return RaisedButton(
            child: Text('点击'),
            onPressed: () => {
              // print('xxxxxxxxx')
              updateData()
            },
          );
        },
        itemCount: 20,
      ),
    );

根据FxDDFilterController传入的数据源类型,可自动区分筛选条件样式类型

 void initState() {
    // TODO: implement initState
    super.initState();
    fxDDFilterController = FxDDFilterController(selectedCallBack: (id, ids, names) {
      if (names.length > 1) {
        return '多条件';
        // return names.toString();
      }
      if (names.first.contains('-')) {
        return names.first.split('-').last;
      }
      return names.first;
    });
    fxDDFilterController.dataSource = [
      FxDDFilterInfo<FxDDFilterItemSecLinkInfo>('1', data: [FxDDFilterItemSecLinkInfo(id: '11', name: '安徽省', subItems: [FxDDFilterItemInfo(id: '11', name: '合肥市'), FxDDFilterItemInfo(id: '12', name: '芜湖市')]),
                                                            FxDDFilterItemSecLinkInfo(id: '22', name: '江苏省', subItems: [FxDDFilterItemInfo(id: '11', name: '南京市'), FxDDFilterItemInfo(id: '12', name: '苏州市')]),
                                                            FxDDFilterItemSecLinkInfo(id: '33', name: '浙江省', subItems: [FxDDFilterItemInfo(id: '11', name: '杭州市'), FxDDFilterItemInfo(id: '12', name: '宁波市')]), 
                                                            FxDDFilterItemSecLinkInfo(id: '44', name: '广东省', subItems: [FxDDFilterItemInfo(id: '11', name: '广州市'), FxDDFilterItemInfo(id: '12', name: '深圳市')]),
                                                            FxDDFilterItemSecLinkInfo(id: '55', name: '福建省', subItems: [FxDDFilterItemInfo(id: '11', name: '福州市'), FxDDFilterItemInfo(id: '12', name: '厦门市'), FxDDFilterItemInfo(id: '13', name: '武夷山市')]),
                                                            FxDDFilterItemSecLinkInfo(id: '66', name: '云南省', subItems: [FxDDFilterItemInfo(id: '11', name: '昆明市'), FxDDFilterItemInfo(id: '12', name: '大理石'), FxDDFilterItemInfo(id: '13', name: '丽江市'), FxDDFilterItemInfo(id: '14', name: '攀枝花市')])
                                                            ]),
      FxDDFilterInfo<FxDDFilterItemInfo>('2', data: [FxDDFilterItemInfo(id: '21', name: '条件221'), FxDDFilterItemInfo(id: '22', name: '条件222')], maxSelectedCount: 2),
      FxDDFilterInfo<FxDDFilterItemInfo>('3', data: [FxDDFilterItemInfo(id: '31', name: '条件331'), FxDDFilterItemInfo(id: '32', name: '条件332')])
    ];
  }

动态修改数据源:

void updateData() {
      fxDDFilterController.dataSource = [
        FxDDFilterInfo<FxDDFilterItemInfo>('1', data: [FxDDFilterItemInfo(id: '11', name: '条件111'), FxDDFilterItemInfo(id: '12', name: '条件112')], maxSelectedCount: 2),
        FxDDFilterInfo<FxDDFilterItemInfo>('2', data: [FxDDFilterItemInfo(id: '21', name: '条件221'), FxDDFilterItemInfo(id: '22', name: '条件222')]),
        FxDDFilterInfo<FxDDFilterItemInfo>('3', data: [FxDDFilterItemInfo(id: '31', name: '条件331'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332'), 
                                                      FxDDFilterItemInfo(id: '32', name: '条件332')])
    ];
    fxDDFilterController.reloadData();
  }