14.3 过滤面板 - 显示

14.3 过滤面板 - 显示

img

实现步骤：

第 1 步：控制器

lib/pages/search/search_filter/controller.dart

1
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
1
2
3
4
// 筛选 打开
void onFilterOpenTap() {
  scaffoldKey.currentState?.openEndDrawer();
}
1
2
3
4
// 筛选 关闭
void onFilterCloseTap() {
  Get.back();
}

第 2 步：FilterView 视图

lib/pages/search/search_filter/widgets/filter_view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class FilterView extends GetView<SearchFilterController> {
  const FilterView({Key? key}) : super(key: key);

  Widget _buildView() {
    return <Widget>[
      // 顶部
      _buildTopBar(),
    ]
        .toColumn(
          crossAxisAlignment: CrossAxisAlignment.start,
        )
        .paddingHorizontal(AppSpace.page);
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SearchFilterController>(
      id: "filter_view",
      builder: (_) {
        return _buildView();
      },
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 顶部 关闭
Widget _buildTopBar() {
  return <Widget>[
    // 文字
    TextWidget.title3(LocaleKeys.searchFilter.tr),

    // 关闭按钮
    ButtonWidget.icon(
      IconWidget.icon(
        Icons.close,
        size: 15,
        color: AppColors.secondary,
      ),
      onTap: controller.onFilterCloseTap,
    )
  ]
      .toRow(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
      )
      .paddingBottom(AppSpace.listRow);
}

第 3 步：视图

lib/pages/search/search_filter/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 搜索过滤栏
Widget _buildFilterBar() {
  return <Widget>[
    // 排序 Best Match
    ...

    // 筛选 Filter
    ButtonWidget.dropdown(
      LocaleKeys.searchFilter.tr,
      IconWidget.icon(
        Icons.expand_more,
        color: AppColors.primary,
      ),
      onTap: controller.onFilterOpenTap,
      textSize: 15,
      textColor: AppColors.secondary,
      textWeight: FontWeight.w400,
      borderColor: AppColors.surfaceVariant,
      height: 40.h,
    ).expanded(),
  ].toRow();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@override
Widget build(BuildContext context) {
  return GetBuilder<SearchFilterController>(
    init: SearchFilterController(),
    id: "search_filter",
    builder: (_) {
      return Scaffold(
        // key
        key: controller.scaffoldKey,

        // 导航
        ...

        // 内容
        ...

        // 右侧弹出 Drawer
        endDrawer: const Drawer(
          child: SafeArea(child: FilterView()),
        ),
      );
    },
  );
}

提交代码到 git