Flutter选择组件插件awesome_select的使用

请参阅以下示例。

默认情况下，SmartSelect将在全屏打开选项模态。可以通过更改以下值来改变它：

// 可用选项
enum S2ModalType {

  // 全屏打开
  fullPage,

  // 弹出对话框打开
  popupDialog,

  // 底部滑动打开
  bottomSheet,

}

// 可用选项配置模态样式
S2ModalStyle({

  // 模态边框形状
  // 用于弹出对话框和底部滑动
  ShapeBorder shape,

  // 模态提升
  // 用于弹出对话框和底部滑动
  double elevation,

  // 模态背景颜色
  Color backgroundColor,

  // 模态剪裁行为
  Clip clipBehavior,

})

// 可用选项配置模态头部样式
S2ModalHeaderStyle({

  // 头部边框形状
  ShapeBorder shape,

  // 头部提升
  double elevation,

  // 头部背景颜色
  Color backgroundColor,

  // 头部亮度
  Brightness brightness,

  // 头部标题是否居中
  bool centerTitle,

  // 头部是否使用automaticallyImplyLeading
  bool useLeading,

  // 头部文本样式
  // 用于标题和搜索字段
  TextStyle textStyle,

  // 头部图标主题
  IconThemeData iconTheme,

  // 头部操作图标主题
  IconThemeData actionsIconTheme,

})

默认情况下，SmartSelect将使用radios进行单选，使用checkboxes进行多选，但可以通过更改以下值来改变：

// 选择项输入类型
enum S2ChoiceType {

  // 使用单选小部件
  // 用于单选
  radios,

  // 使用复选框小部件
  // 用于多选
  checkboxes,

  // 使用开关小部件
  // 用于多选
  switches,

  // 使用芯片小部件
  // 用于单选和多选
  chips,

}

默认情况下，SmartSelect将使用list，但可以通过更改以下值来改变：

// 选择项布局
enum S2ChoiceLayout {

  // 使用列表视图小部件
  list,

  // 使用包裹视图小部件
  wrap,

  // 使用网格视图小部件
  grid,

}

// 可用选项配置选择项样式
S2ChoiceStyle({

  // 在主轴上放置子项之间的空间量。
  // 当使用 [SmartSelectChoiceType.chips] 或 [useWrap] 为 [true] 时
  double spacing,

  // 在交叉轴上放置运行之间的空间量。
  // 当使用 [SmartSelectChoiceType.chips] 或 [useWrap] 为 [true] 时
  double runSpacing,

  // 选择项包装器填充
  EdgeInsetsGeometry wrapperPadding,

  // 选择项填充
  EdgeInsetsGeometry padding,

  // 选择项标题样式
  TextStyle titleStyle,

  // 选择项副标题样式
  TextStyle subtitleStyle,

  // 是否使用芯片检查标记
  bool showCheckmark,

  // 在使用 [ListTile] 定位控件旁边的标签时，控制放置的位置。
  S2ChoiceControl control,

  // 高亮颜色
  Color highlightColor,

  // 选中选择项的主色
  Color activeColor,

  // 未选中选择项的主色
  Color color,

  // 选中选择项的次色
  Color activeAccentColor,

  // 未选中选择项的次色
  Color accentColor,

  // 选中芯片的亮度
  Brightness activeBrightness,

  // 未选中芯片的亮度
  Brightness brightness,

  // 仅在 [activeBrightness] 为 [Brightness.light] 时影响选中芯片边框的不透明度
  double activeBorderOpacity,

  // 仅在 [brightness] 为 [Brightness.light] 时影响未选中芯片边框的不透明度
  double borderOpacity,

  // 形状剪辑行为
  Clip clipBehavior,

})

// 可用选项配置选择项组头样式
S2ChoiceHeaderStyle({

  // 组头背景颜色
  Color backgroundColor,

  // 高亮颜色
  Color highlightColor,

  // 组头文本样式
  TextStyle textStyle,

  // 组头填充
  EdgeInsetsGeometry padding,

  // 组头高度
  double height,

})

// 可用的构建器配置
// 用于单选
SmartSelect<T>.single({

  // 其他配置
  ...,
  ...,

  // 单选构建器集合
  S2SingleBuilder<T> builder,

  // 自定义瓦片小部件构建器
  // 快捷方式 [builder.tile]
  S2WidgetBuilder<S2SingleState<T>> tileBuilder,

  // 自定义模态小部件构建器
  // 快捷方式 [builder.modal]
  S2WidgetBuilder<S2SingleState<T>> modalBuilder,

  // 自定义模态头部小部件构建器
  // 快捷方式 [builder.modalHeader]
  S2WidgetBuilder<S2SingleState<T>> modalHeaderBuilder,

  // 自定义模态操作小部件构建器
  // 快捷方式 [builder.modalActions]
  S2ListWidgetBuilder<S2SingleState<T>> modalActionsBuilder,

  // 自定义模态确认动作小部件构建器
  // 快捷方式 [builder.modalConfirm]
  S2WidgetBuilder<S2SingleState<T>> modalConfirmBuilder,

  // 自定义分隔符小部件构建器
  // 快捷方式 [builder.modalDivider]
  S2WidgetBuilder<S2SingleState<T>> modalDividerBuilder,

  // 自定义底部小部件构建器
  // 快捷方式 [builder.modalFooter]
  S2WidgetBuilder<S2SingleState<T>> modalFooterBuilder,

  // 其他配置
  ...,
  ...,

});

// 可用的构建器配置
// 用于多选
SmartSelect<T>.multiple({

  // 其他配置
  ...,
  ...,

  // 多选构建器集合
  S2MultiBuilder<T> builder,

  // 自定义瓦片小部件构建器
  // 快捷方式 [builder.tile]
  S2WidgetBuilder<S2MultiState<T>> tileBuilder,

  // 自定义模态小部件构建器
  // 快捷方式 [builder.modal]
  S2WidgetBuilder<S2MultiState<T>> modalBuilder,

  // 自定义模态头部小部件构建器
  // 快捷方式 [builder.modalHeader]
  S2WidgetBuilder<S2MultiState<T>> modalHeaderBuilder,

  // 自定义模态操作小部件构建器
  // 快捷方式 [builder.modalActions]
  S2ListWidgetBuilder<S2MultiState<T>> modalActionsBuilder,

  // 自定义模态确认动作小部件构建器
  // 快捷方式 [builder.modalConfirm]
  S2WidgetBuilder<S2MultiState<T>> modalConfirmBuilder,

  // 自定义分隔符小部件构建器
  // 快捷方式 [builder.modalDivider]
  S2WidgetBuilder<S2MultiState<T>> modalDividerBuilder,

  // 自定义底部小部件构建器
  // 快捷方式 [builder.modalFooter]
  S2WidgetBuilder<S2MultiState<T>> modalFooterBuilder,

  // 其他配置
  ...,
  ...,

});

// 其他构建器配置
SmartSelect<T>.[single|multiple]({

  // 其他配置
  ...,
  ...,

  // 模态筛选小部件构建器
  // 快捷方式 [builder.modalFilter]
  S2WidgetBuilder<S2Filter> modalFilterBuilder,

  // 模态筛选切换小部件构建器
  // 快捷方式 [builder.modalFilterToggle]
  S2WidgetBuilder<S2Filter> modalFilterToggleBuilder,

  // 每个自定义选择项小部件构建器
  // 快捷方式 [builder.choice]
  S2ChoiceBuilder<T> choiceBuilder,

  // 每个自定义选择项标题小部件构建器
  // 快捷方式 [builder.choiceTitle]
  S2ChoiceBuilder<T> choiceTitleBuilder,

  // 每个自定义选择项副标题小部件构建器
  // 快捷方式 [builder.choiceSubtitle]
  S2ChoiceBuilder<T> choiceSubtitleBuilder,

  // 每个自定义选择项次级小部件构建器
  // 快捷方式 [builder.choiceSecondary]
  S2ChoiceBuilder<T> choiceSecondaryBuilder,

  /// 自定义选择项分隔符小部件构建器
  // 快捷方式 [builder.choiceDivider]
  IndexedWidgetBuilder choiceDividerBuilder,

  // 自定义空显示构建器
  // 快捷方式 [builder.choiceEmpty]
  S2WidgetBuilder<String> choiceEmptyBuilder,

  // 自定义选择项组构建器
  // 快捷方式 [builder.choiceGroup]
  S2ChoiceGroupBuilder choiceGroupBuilder,

  // 自定义选择项头部构建器
  // 快捷方式 [builder.choiceHeader]
  S2ChoiceHeaderBuilder choiceHeaderBuilder,

  // 其他配置
  ...,
  ...,

});

// 默认瓦片/触发小部件
S2Tile<T>({
  
  // 选中的选项值。
  String value,

  // 列表瓦片的主要内容。
  Widget title,

  // 在标题之前显示的小部件。
  // 通常是一个 [Icon] 或 [CircleAvatar] 小部件。
  Widget leading,

  // 在标题之后显示的小部件。
  // 通常是一个 [Icon] 小部件。
  Widget trailing,

  // 此列表瓦片是否用于显示加载状态。
  bool isLoading,

  // 用于显示加载文本的字符串
  String loadingText,

  // 此列表瓦片是否用于显示两行文本。
  bool isTwoLine,

  // 此列表瓦片是否可交互。
  bool enabled,

  // 如果此瓦片也是 [enabled] 的，则图标和文本将以相同的颜色渲染。
  bool selected,

  // 是否为垂直密集列表的一部分。
  bool dense,

  // 是否显示 [value]
  bool hideValue,

  // 瓦片的内部填充。
  EdgeInsetsGeometry padding,

  // 当用户点击此列表瓦片时调用。
  GestureTapCallback onTap,

  // 显示在瓦片下方的小部件
  // 通常用于显示带有 S2TileChips 的芯片
  Widget body,

})

// 使用示例
SmartSelect<T>.single(
  ...,
  ...,
  tileBuilder: (context, state) {
    return S2Tile<dynamic>(
      title: state.titleWidget,
      value: state.valueDisplay,
      onTap: state.showModal,
      isLoading: true,
    );
  },
);

// 从状态中使用示例
SmartSelect<T>.multiple(
  ...,
  ...,
  tileBuilder: (context, state) {
    return S2Tile.fromState(
      state,
      isLoading: true,
    );
  },
);

// 芯片瓦片/触发小部件
S2TileChips({
  
  // 选中的选项值列表。
  int chipLength,

  // 芯片标签项的小部件构建器
  IndexedWidgetBuilder chipLabelBuilder,

  // 芯片头像项的小部件构建器
  IndexedWidgetBuilder chipAvatarBuilder,

  // 芯片项的小部件构建器
  IndexedWidgetBuilder chipBuilder,

  // 当用户删除芯片项时调用。
  ValueChanged<int> chipOnDelete,

  // 芯片颜色
  Color chipColor,

  // 芯片边框不透明度
  double chipBorderOpacity,

  // 芯片亮度
  Brightness chipBrightness,

  // 芯片删除按钮颜色
  Color chipDeleteColor,

  // 芯片删除按钮图标
  Icon chipDeleteIcon,

  // 芯片间距
  double chipSpacing,

  // 芯片运行间距
  double chipRunSpacing,

  // 芯片形状边框
  ShapeBorder chipShape,

  // [values] 为空时显示的 [Widget]
  Widget placeholder,

  // 芯片列表是否可滚动
  bool scrollable,

  // 芯片列表填充
  EdgeInsetsGeometry padding,

})

/// 使用示例
SmartSelect<String>.multiple(
  ...,
  ...,
  value: users,
  tileBuilder: (context, state) {
    return S2Tile.fromState(
      state,
      hideValue: true,
      body: S2TileChips(
        chipLength: state.valueObject.length,
        chipLabelBuilder: (context, i) {
          return Text(state.valueObject[i].title);
        },
        chipAvatarBuilder: (context, i) {
          return CircleAvatar(
            backgroundImage: NetworkImage(state.valueObject[i].meta['picture']['thumbnail'])
          );
        },
        chipOnDelete: (i) {
          setState(() => users.remove(state.valueObject[i].value));
        },
        chipColor: Colors.blue,
        chipBrightness: Brightness.dark,
        chipBorderOpacity: .5,
      ),
    );
  },
);