starwork_flutter/lib/views/team/createTeam/create_team_view.dart

282 lines
11 KiB
Dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:starwork_flutter/common/constant/app_colors.dart';
import 'package:starwork_flutter/extension/function_extension.dart';
import 'package:starwork_flutter/views/team/createTeam/create_team_controller.dart';
class CreateTeamView extends GetView<CreateTeamController> {
const CreateTeamView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
// 触摸空白处,关闭键盘
FocusScope.of(context).requestFocus(FocusNode());
},
child: Scaffold(
backgroundColor: AppColors.scaffoldBackgroundColor,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
surfaceTintColor: Colors.transparent,
shadowColor: Colors.transparent,
scrolledUnderElevation: 0,
leading: IconButton(
icon: const Icon(Icons.arrow_back_ios_new_rounded), // 替换为任意图标,如关闭、菜单等
onPressed: () {
// 自定义逻辑,例如:关闭页面、退出流程等
Navigator.of(context).pop();
},
),
title: Text(
'创建新团队'.tr,
style: TextStyle(
fontSize: 18.sp,
fontWeight: FontWeight.w500,
color: Colors.black87,
),
),
),
body: Padding(
padding: EdgeInsets.symmetric(
horizontal: 10.w,
vertical: 10.h,
),
child: Column(
children: [
Container(
height: 38.h,
padding: EdgeInsets.symmetric(
horizontal: 10.w,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.r),
),
child: Row(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'*',
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w500,
color: Colors.red,
),
),
Text(
'团队名称',
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w500,
),
),
],
),
Expanded(
// 使用Expanded来确保TextField可以正确填充剩余空间
child: TextField(
controller: controller.teamNameInputController,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
textAlign: TextAlign.end,
decoration: InputDecoration(
hintText: '请输入团队/家庭名称'.tr,
// 设置无边框
border: InputBorder.none,
// 获取焦点时的边框
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
),
),
),
],
),
),
SizedBox(height: 10.h),
GestureDetector(
onTap: () {
_showBottomSheet(context);
},
child: Container(
height: 38.h,
padding: EdgeInsets.symmetric(
horizontal: 10.w,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.r),
),
child: Row(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'*',
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w500,
color: Colors.red,
),
),
Text(
'使用场景',
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w500,
),
),
],
),
Expanded(
// 使用Expanded来确保TextField可以正确填充剩余空间
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Obx(
() => Text(
controller.selectedUseCase.value?.name ?? '',
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w500,
color: Colors.grey,
),
),
),
Icon(
Icons.arrow_forward_ios_rounded,
size: 16.sp,
color: Colors.grey,
)
],
),
),
],
),
),
),
SizedBox(height: 10.h),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
if (controller.teamNameInputController.text.isEmpty) {
controller.showToast('请先输入团队名称'.tr);
return;
}
if (controller.selectedUseCase.value == null) {
controller.showToast('请先选择使用场景'.tr);
return;
}
controller.requestCreateTeam();
}.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,
),
),
),
),
),
),
SizedBox(height: 10.h),
],
),
),
),
);
}
void _showBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
),
builder: (context) {
return Container(
height: 448.h,
padding: EdgeInsets.symmetric(
horizontal: 10.w,
vertical: 10.h,
),
child: Column(
children: [
Text(
'请选择使用场景',
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w400,
),
),
SizedBox(height: 10.h),
Expanded(
child: Obx(
() => GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3,
crossAxisSpacing: 10.h,
mainAxisSpacing: 10.w,
),
itemCount: controller.useCases.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
controller.selectedUseCase.value = controller.useCases[index];
Navigator.pop(context);
},
child: Container(
decoration: BoxDecoration(
color: controller.selectedUseCase.value == controller.useCases[index]
? Colors.blue.withOpacity(0.2)
: Colors.grey[200],
borderRadius: BorderRadius.circular(8.r),
border: controller.selectedUseCase.value == controller.useCases[index]
? Border.all(color: Colors.blue, width: 1.5)
: null,
),
alignment: Alignment.center,
child: Text(
controller.useCases[index].name ?? '',
style: TextStyle(
color: controller.selectedUseCase.value == controller.useCases[index]
? Colors.blue
: Colors.grey[700],
fontSize: 14.sp,
),
),
),
);
},
),
),
),
],
),
);
},
);
}
}