14.1 顶部导航

14.1 顶部导航

image-20220801121825245

实现步骤：

第 1 步：i18n

lib/common/i18n/locale_keys.dart

1
2
3
4
5
6
7
8
9
10
11
// 搜索
static const searchPlaceholder = "search_placeholder";
static const searchOrder = "search_order";
static const searchFilter = "search_filter";
static const searchFilterPrice = "search_filter_price";
static const searchFilterSize = "search_filter_size";
static const searchFilterColor = "search_filter_color";
static const searchFilterReview = "search_filter_review";
static const searchFilterBrand = "search_filter_brand";
static const searchFilterGender = "search_filter_gender";
static const searchFilterCondition = "search_filter_condition";

lib/common/i18n/locales/locale_en.dart

1
2
3
4
5
6
7
8
9
10
11
// 搜索
LocaleKeys.searchPlaceholder: 'Search Product',
LocaleKeys.searchOrder: 'Best Match',
LocaleKeys.searchFilter: 'Filter',
LocaleKeys.searchFilterPrice: 'Price',
LocaleKeys.searchFilterSize: 'Size',
LocaleKeys.searchFilterColor: 'Color',
LocaleKeys.searchFilterReview: 'Review',
LocaleKeys.searchFilterBrand: 'Brand',
LocaleKeys.searchFilterGender: 'Gender',
LocaleKeys.searchFilterCondition: 'Condition',

lib/common/i18n/locales/locale_zh.dart

1
2
3
4
5
6
7
8
9
10
11
// 搜索
LocaleKeys.searchPlaceholder: '搜索商品',
LocaleKeys.searchOrder: '最佳匹配',
LocaleKeys.searchFilter: '筛选',
LocaleKeys.searchFilterPrice: '价格',
LocaleKeys.searchFilterSize: '尺寸',
LocaleKeys.searchFilterColor: '颜色',
LocaleKeys.searchFilterReview: '星级',
LocaleKeys.searchFilterBrand: '品牌',
LocaleKeys.searchFilterGender: '性别',
LocaleKeys.searchFilterCondition: '状况',

第 2 步：mainAppBar 主导航栏组件

img

lib/common/components/appbar.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import 'package:flutter/material.dart';

import '../index.dart';

/// 主导航栏
AppBar mainAppBarWidget({
  Key? key,
  Function()? onTap, // 点击事件
  Widget? leading, // 左侧按钮
  String? hintText, // 输入框默认提示文字
  String? titleString, // 标题
  double? titleSpace, // 标题间距
  double? iconSize, // 图标大小
}) {
  return AppBar(
    // 最左侧按钮
    leading: leading,
    // 按钮和标题组件间距
    titleSpacing: titleSpace ?? AppSpace.listItem,
    // 标题组件
    title: hintText != null
        ? InputWidget.textBorder(
            hintText: hintText,
            readOnly: true,
            onTap: onTap,
          )
        : Text(titleString ?? ""),
    // 右侧按钮组
    actions: [
      // 搜索
      IconWidget.svg(
        AssetsSvgs.iSearchSvg,
        size: iconSize ?? 20,
      ).paddingRight(AppSpace.listItem),

      // 消息
      IconWidget.svg(
        AssetsSvgs.iNotificationsSvg,
        size: iconSize ?? 20,
        isDot: true,
      ).unconstrained().paddingRight(AppSpace.listItem),

      // 更多
      IconWidget.svg(
        AssetsSvgs.iIndicatorsSvg,
        size: iconSize ?? 20,
      ).paddingRight(AppSpace.page),
    ],
  );
}

第 3 步：视图

lib/pages/search/search_filter/view.dart

1
2
3
4
// 搜索过滤栏
Widget _buildFilterBar() {
  return Text("搜索过滤栏");
}
1
2
3
4
// 数据列表
Widget _buildListView() {
  return Text("数据列表");
}
1
2
3
4
5
6
7
8
9
// 主视图
Widget _buildView() {
  return <Widget>[
    // 筛选栏
    _buildFilterBar(),
    // 数据列表
    _buildListView(),
  ].toColumn();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@override
Widget build(BuildContext context) {
  return GetBuilder<SearchFilterController>(
    init: SearchFilterController(),
    id: "search_filter",
    builder: (_) {
      return Scaffold(
        // 导航
        appBar: mainAppBarWidget(
          // 返回按钮
          leading: ButtonWidget.icon(
            IconWidget.icon(
              Icons.arrow_back,
              color: AppColors.primary,
            ),
            onTap: () => Get.back(),
          ),
          // 输入文字
          hintText: LocaleKeys.searchPlaceholder.tr,
          // 点击事件
          onTap: () => Get.back(),
        ),

        // 内容
        body: _buildView(),
      );
    },
  );
}

第 4 步：搜索结果进入筛选页面

lib/pages/search/search_index/controller.dart

1
2
3
4
5
6
7
8
9
10
// 列表项点击事件
void onListItemTap(TagsModel model) {
  // 跳转到商品详情页
  Get.toNamed(
    RouteNames.searchSearchFilter,
    arguments: {
      "tagId": model.id,
    },
  );
}

提交代码到 git