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, ), ); } }