9.2 搜索栏

Ramsayi2022-10-312024-01-16

9.2 搜索栏

实现步骤：

第 1 步：搜索栏编写

lib/pages/goods/home/controller.dart

1 2	// 导航点击事件 void onAppBarTap() {}

lib/pages/goods/home/view.dart

// 导航栏
AppBar _buildAppBar() {
  return AppBar(
    // 背景透明
    backgroundColor: Colors.transparent,
    // 取消阴影
    elevation: 0,
    // 标题栏左侧间距
    titleSpacing: AppSpace.listItem,
    // 搜索栏
    title: InputWidget.search(
      // 提示文字，多语言
      hintText: LocaleKeys.gHomeNewProduct.tr,
      // 点击事件
      onTap: controller.onAppBarTap,
      // 只读
      readOnly: true,
    ),
    // 右侧的按钮区
    actions: [
      // 图标
      IconWidget.svg(
        AssetsSvgs.pNotificationsSvg,
        size: 20,
        isDot: true, // 未读消息 小圆点
      )
          .unconstrained() // 去掉约束, appBar 会有个约束下来
          .padding(
            left: AppSpace.listItem,
            right: AppSpace.page,
          ),
    ],
  );
}

unconstrained 去掉约束
isDot 未读消息小圆点，下面说
backgroundColor 背景透明
elevation 取消阴影
titleSpacing 标题栏左侧间距
actions 右侧的按钮区

第 2 步：图标加小圆点

lib/common/widgets/icon.dart

/// 图标组件
class IconWidget extends StatelessWidget {
  ...
  /// 是否小圆点
  final bool? isDot;

@override
Widget build(BuildContext context) {
  ...

  // 圆点
  if (isDot == true) {
    return Badge(
      position: BadgePosition.bottomEnd(bottom: 0, end: -2),
      elevation: 0,
      badgeColor: AppColors.primary,
      padding: const EdgeInsets.all(4.0),
      child: icon,
    );
  }