YYHome/packages/cs_widgets/lib/my_appbar.dart

import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:cs_resources/theme/theme_config.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:cs_resources/constants/color_constants.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'my_load_image.dart';
import 'search_app_bar.dart';

class MyAppBar {
  ///封装的默认的AppBar，Light默认模式下，黑色图标+黑色文本，Dark模式下，白色图标+白色文本
  static AppBar appBar(BuildContext context, String title,
      {void Function()? backCallback,
      Key? key,
      String? backIconPath = Assets.baseLibNavbarBackIcon,
      double? backIconWidth = 44,
      double? backIconHeight = 44,
      String? subTitle,
      Color backgroundColor = Colors.transparent,
      Color? titleColor,
      Color? titleDarkColor,
      SystemUiOverlayStyle? systemUiOverlayStyle,
      bool showBottomDivider = false,
      bool showBackButton = true, //是否展示返回按钮
      List<Widget>? actions}) {
    // 检查当前主题是亮色还是暗色
    final bool isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return AppBar(
      key: key,
      backgroundColor: backgroundColor,
      surfaceTintColor: backgroundColor,
      systemOverlayStyle: systemUiOverlayStyle ?? ThemeConfig.getSystemUiOverlayStyleByTheme(context),
      // 根据 showBackButton 参数决定是否显示返回按钮
      leading: showBackButton
          ? (backIconPath != null
              ? IconButton(
                  icon: MyAssetImage(
                    backIconPath,
                    width: backIconWidth ?? 11,
                    height: backIconHeight ?? 18,
                  ),
                  onPressed: (){
                    if (backCallback != null) {
                      backCallback();
                    } else {
                      appRouter.maybePop();
                    }
                  },
                )
              : null) // 使用系统默认返回按钮
          : const SizedBox.shrink(),
      iconTheme: IconThemeData(color: isDarkMode ? Colors.white : Theme.of(context).colorScheme.primary),
      centerTitle: true,
      title: subTitle == null
          ? Text(
              title,
              style: TextStyle(color: isDarkMode ? titleDarkColor?? Colors.white : titleColor ?? Colors.black, fontSize: 17, fontWeight: FontWeight.w500),
            )
          : Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  title,
                  style: TextStyle(color: isDarkMode ? Colors.white : Colors.black, fontSize: 17, fontWeight: FontWeight.w500),
                ),
                Text(
                  subTitle,
                  style: TextStyle(color: isDarkMode ? Colors.white : Colors.black, fontSize: 15, fontWeight: FontWeight.w400),
                )
              ],
            ),
      actions: actions,
      elevation: 0.0,
      bottom: showBottomDivider
          ?  PreferredSize(
              preferredSize: const Size.fromHeight(0.5),
              child: Divider(
                height: 0.5,
                indent: 0.0,
                color: context.appColors.dividerDefault,
              ))
          : null,
    );
  }

  /// 带搜索的AppBar
  static AppBar searchAppBar(BuildContext context,
      {void Function()? backCallback,
      String? value,
      String? hintText,
      String? backIconPath = Assets.baseLibNavbarBackIcon,
      double? backIconWidth = 44,
      double? backIconHeight = 44,
      Color textColor = Colors.black,
      Color backgroundColor = Colors.transparent,
      ValueChanged<String>? onSearch,
      ValueChanged<String>? onChanged,
      SystemUiOverlayStyle? systemUiOverlayStyle,
      TextEditingController? controller,
      bool showBottomDivider = false,
      List<Widget>? actions}) {
    // 检查当前主题是亮色还是暗色
    final bool isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return AppBar(
      backgroundColor: backgroundColor,
      surfaceTintColor: backgroundColor,
      systemOverlayStyle: systemUiOverlayStyle ?? ThemeConfig.getSystemUiOverlayStyleByTheme(context),
      // 标题与其他控件的间隔
      titleSpacing: 0,
      // 如果没有自带的返回按钮，直接使用系统自带的返回图标
      leading: backIconPath != null
          ? IconButton(
              icon: MyAssetImage(
                backIconPath,
                width: backIconWidth ?? 11,
                height: backIconHeight ?? 18,
              ),
              onPressed: (){
                if (backCallback != null) {
                  backCallback();
                } else {
                  appRouter.maybePop();
                }
              },
            )
          : null,
      iconTheme: IconThemeData(color: isDarkMode ? Colors.white : Theme.of(context).colorScheme.primary),
      centerTitle: true,
      title: SearchAppBar(
        onSearch: onSearch,
        onChanged: onChanged,
        value: value,
        hintText: hintText,
        controller: controller,
      ),
      actions: actions,
      elevation: 0.0,
      bottom: showBottomDivider // 根据变量控制 bottom 的显示
          ? const PreferredSize(
              preferredSize: Size.fromHeight(0.5),
              child: Divider(
                height: 0.5,
                indent: 0.0,
                color: ColorConstants.dividerBar,
              ))
          : null,
    );
  }

  /// 当前App中的自定义TitleBar用于沉浸式处理，不是用在 Scaffold 下面的，直接放在 Column 下面即可
  static Widget titleBar(
    BuildContext context,
    String title, {
    void Function()? backCallback,
    String? backIconPath = Assets.baseLibNavbarBackIcon,
    double? backIconWidth = 44,
    double? backIconHeight = 44,
    String? subTitle,
    Color backgroundColor = Colors.transparent,
    bool showBottomDivider = false,
    List<Widget>? actions,
  }) {
    // 计算左侧和右侧固定容器的宽度
    double sideWidth = 55;
    // 检查当前主题是亮色还是暗色
    final bool isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Column(
      children: [
        Container(
          height: kToolbarHeight,
          color: backgroundColor,
          child: Stack(
            children: [
              // 返回图标在左侧
              Positioned(
                left: 0,
                top: 0,
                bottom: 0,
                child: Container(
                  width: sideWidth,
                  alignment: Alignment.center,
                  child: backIconPath != null
                      ? IconButton(
                          icon: MyAssetImage(
                            backIconPath,
                            width: backIconWidth ?? 11,
                            height: backIconHeight ?? 18,
                          ),
                          onPressed: () {
                            if (backCallback != null) {
                              backCallback();
                            } else {
                              appRouter.maybePop();
                            }
                          },
                        )
                      : BackButton(
                          color: isDarkMode ? Colors.white : Theme.of(context).colorScheme.primary,
                          onPressed: () {
                            if (backCallback != null) {
                              backCallback();
                            } else {
                              appRouter.maybePop();
                            }
                          },
                        ),
                ),
              ),
              // 标题在中间
              Positioned.fill(
                child: Center(
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      maxWidth: MediaQuery.of(context).size.width - 2 * sideWidth,
                    ),
                    child: subTitle == null
                        ? Text(
                            title,
                            style: TextStyle(color: isDarkMode ? Colors.white : Colors.black, fontSize: 17, fontWeight: FontWeight.w500),
                            overflow: TextOverflow.ellipsis,
                          )
                        : Column(
                            mainAxisSize: MainAxisSize.min,
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text(
                                title,
                                style: TextStyle(color: isDarkMode ? Colors.white : Colors.black, fontSize: 17, fontWeight: FontWeight.w500),
                                overflow: TextOverflow.ellipsis,
                              ),
                              Text(
                                subTitle,
                                style: TextStyle(color: isDarkMode ? Colors.white : Colors.black, fontSize: 15, fontWeight: FontWeight.w400),
                              ),
                            ],
                          ),
                  ),
                ),
              ),
              // 右侧的操作按钮
              Positioned(
                right: 0,
                top: 0,
                bottom: 0,
                child: Container(
                  alignment: Alignment.centerRight,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: actions ?? [SizedBox(width: sideWidth)],
                  ),
                ),
              ),
            ],
          ),
        ),
        // 底部的分割线
        if (showBottomDivider)
          const Divider(
            height: 0.5,
            color: ColorConstants.dividerBar,
          ),
      ],
    );
  }

  /// 当前App中的自定义TitleBar用于沉浸式处理，不是用在 Scaffold 下面的，直接放在 Column 下面即可
  static Widget searchTitleBar(
    BuildContext context, {
    void Function()? backCallback,
    String? value,
    String? hintText,
    String? backIconPath = Assets.baseLibNavbarBackIcon,
    double? backIconWidth = 44,
    double? backIconHeight = 44,
    Color backgroundColor = Colors.transparent,
    ValueChanged<String>? onSearch,
    ValueChanged<String>? onChanged,
    TextEditingController? controller,
    bool showBottomDivider = false,
    List<Widget>? actions,
  }) {
    // 检查当前主题是亮色还是暗色
    final bool isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Column(
      children: [
        Container(
          height: kToolbarHeight,
          color: backgroundColor,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 返回图标
              Container(
                width: 55,
                alignment: Alignment.center,
                child: backIconPath != null
                    ? IconButton(
                        icon: MyAssetImage(
                          backIconPath,
                          width: backIconWidth ?? 11,
                          height: backIconHeight ?? 18,
                        ),
                        onPressed: () {
                          if (backCallback != null) {
                            backCallback();
                          } else {
                            appRouter.maybePop();
                          }
                        },
                      )
                    : BackButton(
                        color: isDarkMode ? Colors.white : Theme.of(context).colorScheme.primary,
                        onPressed: () {
                          if (backCallback != null) {
                            backCallback();
                          } else {
                            appRouter.maybePop();
                          }
                        },
                      ),
              ),
              // 搜索栏
              Expanded(
                child: SearchAppBar(
                  onSearch: onSearch,
                  onChanged: onChanged,
                  value: value,
                  hintText: hintText,
                  controller: controller,
                ),
              ),
              // 右侧操作按钮
              Container(
                alignment: Alignment.centerRight,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: actions ?? [],
                ),
              ),
            ],
          ),
        ),
        // 底部的分割线
        if (showBottomDivider)
          const Divider(
            height: 0.5,
            indent: 0.0,
            color: ColorConstants.dividerBar,
          ),
      ],
    );
  }
}