YYHome/packages/cpt_auth/lib/modules/select_unit/select_unit_page.dart

import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_field.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

import '../../router/page/auth_page_router.dart';
import 'select_unit_state.dart';
import 'select_unit_view_model.dart';

@RoutePage()
class SelectUnitPage extends HookConsumerWidget {
  SelectUnitPage({Key? key}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(SelectUnitPageRoute());
    } else {
      appRouter.push(SelectUnitPageRoute());
    }
  }

  // 为需要测量的控件创建 GlobalKey
  final GlobalKey _appbarKey = GlobalKey();
  final GlobalKey _topImageKey = GlobalKey();
  final GlobalKey _inputKey = GlobalKey();
  final GlobalKey _description1Key = GlobalKey();
  final GlobalKey _description2Key = GlobalKey();
  final GlobalKey _description3Key = GlobalKey();
  final GlobalKey _buttonKey = GlobalKey();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(selectUnitViewModelProvider.notifier);
    final state = ref.watch(selectUnitViewModelProvider);

    // 获取屏幕高度
    final screenHeight = MediaQuery.of(context).size.height;
    final statusBarHeight = MediaQuery.of(context).padding.top;
    final navigationBarHeight = MediaQuery.of(context).padding.bottom;

    useEffect(() {
      double usedHeight = 0;
      // 组件挂载时执行,获取控件高度
      WidgetsBinding.instance.addPostFrameCallback((_) {
        // 获取各个控件的高度
        usedHeight += _appbarKey.currentContext?.size?.height ?? 0;
        usedHeight += _topImageKey.currentContext?.size?.height ?? 0;
        usedHeight += _inputKey.currentContext?.size?.height ?? 0;
        usedHeight += _description1Key.currentContext?.size?.height ?? 0;
        usedHeight += _description2Key.currentContext?.size?.height ?? 0;
        usedHeight += _description3Key.currentContext?.size?.height ?? 0;
        usedHeight += _buttonKey.currentContext?.size?.height ?? 0;

        // 计算剩余空间
        double remainingSpace = screenHeight - statusBarHeight - navigationBarHeight - usedHeight - 28 - 18 - 25 - 20 - 20;

        Log.d("计算剩余空间:$remainingSpace");

        if (remainingSpace > 0) {
          // 设置一个状态来存储剩余空间的高度
          viewModel.setRemainingSpace(remainingSpace);
        }
      });
      return () {
        // 组件卸载时执行
      };
    }, []);

    return Scaffold(
      appBar: MyAppBar.appBar(context, S.current.yy_home_accounts, key: _appbarKey),
      backgroundColor: context.appColors.backgroundDefault,
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          width: double.infinity,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              //顶部图片
              MyAssetImage(
                key: _topImageKey,
                Assets.authSignUpUnitImg,
                width: 266.5,
                height: 162,
              ).marginOnly(top: 28, bottom: 18),

              Row(
                key: _inputKey,
                mainAxisSize: MainAxisSize.min,
                children: [
                  //街区
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      MyTextView(
                        S.current.block,
                        marginBottom: 9,
                        textColor: context.appColors.textBlack,
                        fontSize: 16,
                        isFontMedium: true,
                      ),

                      // 表单 - 街区
                      _buildInputLayout(
                        context,
                        state,
                        "block",
                        textInputAction: TextInputAction.next,
                        onSubmit: (formKey, value) {
                          state.formData[formKey]!['focusNode'].unfocus();
                          FocusScope.of(context).requestFocus(state.formData['unit']!['focusNode']);
                        },
                      ).constrained(width: 88),
                    ],
                  ),

                  MyTextView(
                    "#",
                    marginTop: 20,
                    marginLeft: 8.5,
                    marginRight: 8.5,
                    textColor: context.appColors.textBlack,
                    fontSize: 16,
                    isFontMedium: true,
                  ),

                  //单元
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      MyTextView(
                        S.current.unit_number,
                        marginBottom: 9,
                        textColor: context.appColors.textBlack,
                        fontSize: 16,
                        isFontMedium: true,
                      ),
                      Row(
                        children: [
                          // 表单 - 单元
                          _buildInputLayout(
                            context,
                            state,
                            "unit",
                            textInputAction: TextInputAction.next,
                            onSubmit: (formKey, value) {
                              state.formData[formKey]!['focusNode'].unfocus();
                              FocusScope.of(context).requestFocus(state.formData['room']!['focusNode']);
                            },
                          ).constrained(width: 83),

                          MyTextView(
                            "-",
                            textColor: context.appColors.textBlack,
                            marginLeft: 4,
                            marginRight: 4,
                            isFontMedium: true,
                          ),

                          // 表单 - 房号
                          _buildInputLayout(
                            context,
                            state,
                            "room",
                            textInputAction: TextInputAction.done,
                            onSubmit: (formKey, value) {
                              state.formData[formKey]!['focusNode'].unfocus();
                            },
                          ).constrained(width: 83),
                        ],
                      ),
                    ],
                  ),
                ],
              ),

              MyTextView(
                key: _description1Key,
                S.current.block_desc,
                fontSize: 15,
                marginTop: 25,
                textAlign: TextAlign.center,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),

              MyTextView(
                key: _description2Key,
                S.current.block_example,
                fontSize: 15,
                marginTop: 20,
                textAlign: TextAlign.center,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),

              MyTextView(
                key: _description3Key,
                S.current.block_example_desc,
                fontSize: 15,
                marginTop: 20,
                textAlign: TextAlign.center,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),

              SizedBox(
                height: state.remainingSpace, // 使用剩余空间的值
              ),

              MyButton(
                key: _buttonKey,
                onPressed: viewModel.submitUnit,
                text: S.current.next,
                textColor: Colors.white,
                backgroundColor: context.appColors.btnBgDefault,
                fontWeight: FontWeight.w500,
                type: ClickType.throttle,
                fontSize: 16,
                minHeight: 50,
                radius: 5,
              ).marginOnly(top: 40, bottom: 30, left: 18, right: 18),
            ],
          ),
        ),
      ),
    );
  }

  /// 输入框
  Widget _buildInputLayout(
    BuildContext context,
    SelectUnitState state,
    String key, {
    double marginTop = 0,
    bool? showRightIcon = false, //是否展示右侧的布局
    Widget? rightWidget, //右侧的布局
    TextInputType textInputType = TextInputType.number,
    String? errorText,
    bool obscureText = false,
    TextInputAction textInputAction = TextInputAction.done,
    Function? onSubmit,
  }) {
    return IgnoreKeyboardDismiss(
      child: MyTextField(
        key,
        fillBackgroundColor: context.appColors.authFiledBG,
        state.formData[key]!['value'],
        hintText: state.formData[key]!['hintText'],
        hintStyle: TextStyle(
          color: context.appColors.authFiledHint,
          fontSize: 16.0,
          fontWeight: FontWeight.w500,
        ),
        controller: state.formData[key]!['controller'],
        focusNode: state.formData[key]!['focusNode'],
        margin: EdgeInsets.only(top: marginTop),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3),
        showDivider: false,
        height: 44,
        style: TextStyle(
          color: context.appColors.authFiledText,
          fontSize: 16.0,
          fontWeight: FontWeight.w500,
        ),
        inputType: textInputType,
        textInputAction: textInputAction,
        onSubmit: onSubmit,
        cursorColor: context.appColors.authFiledText,
        obscureText: obscureText,
        errorText: errorText,
        showLeftIcon: true,
        showRightIcon: showRightIcon,
        rightWidget: rightWidget,
      ),
    );
  }
}