Skip to content
On this page

Cascader 级联选择

代码演示

基本用法

dart
Cascader(
  options: [
    NamedValueOption("浙江省", "Zhejiang", [
      NamedValueOption("杭州市", "Hangzhou", [
        NamedValueOption("上城区", "Shangcheng"),
        NamedValueOption("下城区", "Xiacheng"),
      ]),
      NamedValueOption("宁波市", "Ningbo", [
        NamedValueOption("海曙区", "Haishu"),
        NamedValueOption("江北区", "Jiangbei"),
      ]),
    ]),
  ],
  values: const ["Zhejiang"],
  onChange: (values) => {/* 每次点选触发 */},
  onCascadeEnd: (values) => {/* 选择完毕触发 */},
),

异步加载

dart
Cascader(
  options: [
    NamedValueOption("浙江省", "Zhejiang", [
      // 空数组,异步填充
    ]),
  ],
  onOptionChange: (values, selected) {
    if (selected.children == null) return;
    if (selected.children!.isEmpty) {
      if (selected.value == 'Zhejiang') {
        Timer(const Duration(seconds: 1), () {
          selected.children = [
            NamedValueOption("杭州市", "Hangzhou"),
            NamedValueOption("宁波市", "Ningbo"),
          ];
        });
      }
    }
  },
),

API

Props类型描述
titleString标题
onCloseFunction()关闭回调