206 lines
8.5 KiB
Dart
206 lines
8.5 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter/src/widgets/framework.dart';
|
||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||
import 'package:get/get.dart';
|
||
import 'package:pinput/pinput.dart';
|
||
import 'package:starwork_flutter/base/app_logger.dart';
|
||
import 'package:starwork_flutter/common/constant/app_colors.dart';
|
||
import 'package:starwork_flutter/common/constant/app_toast_messages.dart';
|
||
import 'package:starwork_flutter/common/widgets/custome_app_bar_wdiget.dart';
|
||
import 'package:starwork_flutter/extension/function_extension.dart';
|
||
import 'package:starwork_flutter/views/team/joinTeam/join_team_controller.dart';
|
||
|
||
class JoinTeamView extends GetView<JoinTeamController> {
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return GestureDetector(
|
||
onTap: () {
|
||
FocusScope.of(context).unfocus();
|
||
},
|
||
child: Scaffold(
|
||
backgroundColor: AppColors.scaffoldBackgroundColor,
|
||
appBar: CustomAppBarWidget(
|
||
title: '加入团队'.tr,
|
||
),
|
||
body: Padding(
|
||
padding: EdgeInsets.symmetric(
|
||
horizontal: 10.w,
|
||
vertical: 10.h,
|
||
),
|
||
child: Column(
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
'输入团队码',
|
||
style: TextStyle(
|
||
fontSize: 16.sp,
|
||
fontWeight: FontWeight.w600,
|
||
),
|
||
),
|
||
SizedBox(height: 4.h),
|
||
Text(
|
||
'团队码是一个由字母组成的8位编码，可通过管理员获取',
|
||
style: TextStyle(
|
||
fontSize: 12.sp,
|
||
fontWeight: FontWeight.w400,
|
||
color: Colors.grey,
|
||
),
|
||
),
|
||
],
|
||
)
|
||
],
|
||
),
|
||
SizedBox(height: 10.h),
|
||
Container(
|
||
padding: EdgeInsets.symmetric(
|
||
horizontal: 10.w,
|
||
vertical: 10.h,
|
||
),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(8.r),
|
||
),
|
||
child: Column(
|
||
children: [
|
||
Pinput(
|
||
length: 8,
|
||
obscureText: false,
|
||
autofocus: false,
|
||
defaultPinTheme: PinTheme(
|
||
width: 50.w,
|
||
height: 34.h,
|
||
textStyle: TextStyle(
|
||
fontSize: 20.sp,
|
||
color: Colors.black,
|
||
),
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey[100],
|
||
borderRadius: BorderRadius.circular(4.r),
|
||
),
|
||
),
|
||
validator: (value) {
|
||
if (value!.isEmpty) return '请输入团队码';
|
||
if (value.length != 8) return '验证码需8位';
|
||
return null;
|
||
},
|
||
onCompleted: (pin) {},
|
||
onChanged: (value) {
|
||
controller.teamCode.value = value;
|
||
},
|
||
),
|
||
SizedBox(height: 10.h),
|
||
TextField(
|
||
controller: controller.nameInputController,
|
||
keyboardType: TextInputType.text,
|
||
textInputAction: TextInputAction.done,
|
||
onChanged: (value) {
|
||
// 触发更新以显示/隐藏清除按钮
|
||
},
|
||
decoration: InputDecoration(
|
||
counterText: '',
|
||
hintText: '请输入您的姓名',
|
||
// 设置无边框
|
||
border: InputBorder.none,
|
||
// 设置背景颜色为灰色，圆角
|
||
filled: true,
|
||
fillColor: Colors.grey[100],
|
||
contentPadding: EdgeInsets.symmetric(
|
||
horizontal: 16.w,
|
||
vertical: 12.h,
|
||
),
|
||
suffixIcon: controller.nameInputController.text.isNotEmpty
|
||
? IconButton(
|
||
icon: const Icon(Icons.clear, color: Colors.grey),
|
||
onPressed: () {
|
||
controller.nameInputController.clear(); // 清空输入
|
||
},
|
||
)
|
||
: null,
|
||
// 如果没有内容，就不显示清除按钮,
|
||
// 获取焦点时的边框
|
||
focusedBorder: OutlineInputBorder(
|
||
borderSide: const BorderSide(
|
||
color: Colors.blue,
|
||
width: 1.5,
|
||
),
|
||
borderRadius: BorderRadius.circular(8.0.r),
|
||
),
|
||
enabledBorder: OutlineInputBorder(
|
||
borderSide: const BorderSide(color: Colors.transparent),
|
||
borderRadius: BorderRadius.circular(8.0.r),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
SizedBox(height: 10.h),
|
||
SizedBox(
|
||
width: double.infinity,
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween, // 添加这行来让按钮分布在两端
|
||
children: [
|
||
// Expanded(
|
||
// // 使用Expanded来让按钮根据内容扩展
|
||
// child: ElevatedButton(
|
||
// onPressed: () {}.debounce(),
|
||
// style: ElevatedButton.styleFrom(
|
||
// backgroundColor: Colors.white,
|
||
// padding: EdgeInsets.symmetric(vertical: 12.h),
|
||
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.r)),
|
||
// ),
|
||
// child: Text(
|
||
// '扫描二维码加入'.tr,
|
||
// style: TextStyle(
|
||
// fontSize: 16.sp,
|
||
// color: Colors.blue,
|
||
// fontWeight: FontWeight.w500,
|
||
// ),
|
||
// ),
|
||
// ),
|
||
// ),
|
||
SizedBox(width: 10.w), // 按钮之间的间距
|
||
Expanded(
|
||
// 使用Expanded来让按钮根据内容扩展
|
||
child: ElevatedButton(
|
||
onPressed: () {
|
||
if (controller.teamCode.value.isEmpty) {
|
||
controller.showToast(AppToastMessages.notInputTeamCode);
|
||
return;
|
||
}
|
||
if (controller.nameInputController.text.isEmpty) {
|
||
controller.showToast(AppToastMessages.notInputName);
|
||
return;
|
||
}
|
||
controller.joinTeam();
|
||
}.debounce(),
|
||
style: ElevatedButton.styleFrom(
|
||
backgroundColor: Colors.blue,
|
||
padding: EdgeInsets.symmetric(vertical: 12.h),
|
||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.r)),
|
||
),
|
||
child: Text(
|
||
'申请加入'.tr,
|
||
style: TextStyle(
|
||
fontSize: 16.sp,
|
||
color: Colors.white,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
),
|
||
)
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|