Flutter 三级联动

---

1 (2).png

组件

import 'package:bandexapp/src/pages/common/bottom_container_widget.dart';
import 'package:bandexapp/src/utils/log_utils.dart';
import 'package:flutter/material.dart';

/// 设备选择组件
/// [child] 组件样式
/// [deviceListData] 设备数据
/// [onTap] 回调
/// [singleChoice] 单选、多选
class DeviceSelectWidget extends StatefulWidget {
  final Widget child;
  final List deviceListData;
  final Function onTap;
  final bool singleChoice;

  DeviceSelectWidget(
      {@required this.child,
      @required this.deviceListData,
      @required this.onTap,
      this.singleChoice = false});

  @override
  _DeviceSelectWidgetState createState() => _DeviceSelectWidgetState();
}

class _DeviceSelectWidgetState extends State<DeviceSelectWidget> {
  // 设备选择组
  List _companyGroup = [];

  // 当前选中公司
  int _nowClickCompany;

  // 设备型号选择组
  List _typeGroup = [];

  // 设备名称选择组
  List _nameGroup = [];

  // 当前选择公司组的数据
  List _nowChooseGroup = [];

  bool _isFirst = true;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: widget.child,
      onTap: () async {
        LogUtils.e("选择设备。。。");
        if (_isFirst) {
          initData();
          _isFirst = false;
        }
        List chooseDevice = await showModalBottomSheet(
          context: context,
          builder: (BuildContext context) {
            return StatefulBuilder(
              builder: (BuildContext context, StateSetter modalSetState) {
                return Container(
                  child: Column(
                    children: <Widget>[
                      Expanded(
                        child: buildDeviceContainer(modalSetState),
                      ),
                      Expanded(
                        flex: 0,
                        child: buildBottomButton(modalSetState),
                      ),
                    ],
                  ),
                );
              },
            );
          },
        );
        LogUtils.e("chooseDevice $chooseDevice");
        widget.onTap(chooseDevice);
      },
    );
  }

  // 初始化数据
  void initData() {
    _companyGroup = [];
    whileCompany(widget.deviceListData);
    LogUtils.e("_companyGroup $_companyGroup");
    setState(() {});
  }

  // 格式化设备组
  void whileCompany(data) {
    for (int i = 0; i < data.length; i++) {
      if (null != data[i] && data[i]['MEMO'] != '-1') {
        _companyGroup
            .add({'name': data[i]['GP_NAME'], 'value': data[i]['NODES']});
      }
      if (null != data[i] &&
          null != data[i]['NODES'] &&
          data[i]['NODES'].length > 0) {
        whileCompany(data[i]['NODES']);
      }
    }
  }

  // 选择设备区域
  buildDeviceContainer(StateSetter modalSetState) {
    return Row(
      children: <Widget>[
        Expanded(
          child: selectCompanyItem(modalSetState),
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              Expanded(
                flex: 0,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: FlatButton(
                        child: Text('全选'),
                        onPressed: () {
                          for (int i = 0; i < _typeGroup.length; i++) {
                            _typeGroup[i]['check'] = true;
                          }
                          whileName();
                          modalSetState(() {});
                        },
                      ),
                    ),
                    Expanded(
                      child: FlatButton(
                        child: Text('取消'),
                        onPressed: () {
                          for (int i = 0; i < _typeGroup.length; i++) {
                            _typeGroup[i]['check'] = false;
                          }
                          whileName();
                          modalSetState(() {});
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: selectTypeItem(modalSetState),
              ),
            ],
          ),
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              widget.singleChoice
                  ? Container()
                  : Expanded(
                flex: 0,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: FlatButton(
                        child: Text('全选'),
                        onPressed: () {
                          for (int i = 0; i < _nameGroup.length; i++) {
                            _nameGroup[i]['check'] = true;
                          }
                          modalSetState(() {});
                        },
                      ),
                    ),
                    Expanded(
                      child: FlatButton(
                        child: Text('取消'),
                        onPressed: () {
                          for (int i = 0; i < _nameGroup.length; i++) {
                            _nameGroup[i]['check'] = false;
                          }
                          modalSetState(() {});
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: selectNameItem(modalSetState),
              ),
            ],
          ),
        ),
      ],
    );
  }

  // 底部操作按钮
  buildBottomButton(StateSetter modalSetState) {
    return BottomContainerWidget(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(
            child: Text('重置'),
            onPressed: () {
              modalSetState(() {
                _nowClickCompany = null;
                _typeGroup = [];
                _nameGroup = [];
                _nowChooseGroup = [];
              });
            },
          ),
          RaisedButton(
            child: Text('确定'),
            onPressed: () {
              List devices = [];
              for (int i = 0; i < _nameGroup.length; i++) {
                if (_nameGroup[i]['check']) {
                  devices.add(_nameGroup[i]);
                }
              }
              Navigator.pop(context, devices);
            },
          ),
        ],
      ),
    );
  }

  // 公司列表
  selectCompanyItem(StateSetter modalSetState) {
    return ListView.separated(
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Colors.grey[300],
          child: GestureDetector(
            child: ListTile(
              title: Text(
                  _companyGroup.length > 0
                      ? _companyGroup[index]['name'] ?? ' '
                      : '　',
                  style: _nowClickCompany == index
                      ? TextStyle(color: Colors.blue)
                      : TextStyle()),
            ),
            onTap: () {
              if (_nowClickCompany != index) {
                _typeGroup = [];
                _nameGroup = [];
                _nowClickCompany = index;
                _nowChooseGroup = _companyGroup[index]['value'];
                whileType(_companyGroup[index]['value']);
                modalSetState(() {});
              }
            },
          ),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return Divider(
          height: 0.0,
        );
      },
      itemCount: _companyGroup.length,
    );
  }

  // 型号列表
  selectTypeItem(StateSetter modalSetState) {
    return ListView.separated(
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Colors.grey[200],
          child: GestureDetector(
            child: ListTile(
              title: Text(
                  _typeGroup.length > 0 ? _typeGroup[index]['name'] ?? ' ' : '　',
                  style: _typeGroup[index]['check']
                      ? TextStyle(color: Colors.blue)
                      : TextStyle()),
            ),
            onTap: () {
              _typeGroup[index]['check'] = !_typeGroup[index]['check'];
              whileName();
              modalSetState(() {});
            },
          ),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return Divider(
          height: 0.0,
        );
      },
      itemCount: _typeGroup.length,
    );
  }

  // 名称列表
  selectNameItem(StateSetter modalSetState) {
    return ListView.separated(
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Colors.grey[300],
          child: GestureDetector(
            child: ListTile(
              title: Text(
                _nameGroup.length > 0 ? _nameGroup[index]['name'] ?? ' ' : '　',
                style: _nameGroup[index]['check']
                    ? TextStyle(color: Colors.blue)
                    : TextStyle(),
              ),
            ),
            onTap: () {
              if (!widget.singleChoice) {
                _nameGroup[index]['check'] = !_nameGroup[index]['check'];
              } else {
                for (int i = 0; i < _nameGroup.length; i++) {
                  _nameGroup[i]['check'] = false;
                }
                _nameGroup[index]['check'] = true;
              }
              modalSetState(() {});
            },
          ),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return Divider(
          height: 0.0,
        );
      },
      itemCount: _nameGroup.length,
    );
  }

  // 获取设备型号
  whileType(data) {
    for (int i = 0; i < data.length; i++) {
      if (null != data[i]['MACHINE_FEILD']) {
        if (!_typeGroup.any(
            (val) => val['name'] == data[i]['MACHINE_FEILD']['MAC_NAME'])) {
          _typeGroup.add(
              {'name': data[i]['MACHINE_FEILD']['MAC_NAME'], 'check': false});
        }
      }
    }
  }

  // 获取设备名称
  whileName() {
    _nameGroup = [];
    for (int i = 0; i < _nowChooseGroup.length; i++) {
      if (null != _nowChooseGroup[i]['MACHINE_FEILD']) {
        for (int k = 0; k < _typeGroup.length; k++) {
          if (_typeGroup[k]['check'] &&
              _typeGroup[k]['name'] ==
                  _nowChooseGroup[i]['MACHINE_FEILD']['MAC_NAME']) {
            _nameGroup.add({
              'name': _nowChooseGroup[i]['MACHINE_FEILD']['MAC_NO'],
              'value': _nowChooseGroup[i]['MACHINE_FEILD']['MAC_NBR'],
              'check': false
            });
          }
        }
      }
    }
  }
}

使用

DeviceSelectWidget(
 child: Text("选择设备", style: TextStyle(color: Colors.blue)),
 deviceListData: [],
 singleChoice: true,
 onTap: (value) {},
)