导航栏代码，配置文件
This commit is contained in:
242
ln_jq_app/lib/pages/login/view.dart
Normal file
242
ln_jq_app/lib/pages/login/view.dart
Normal file
@@ -0,0 +1,242 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:getx_scaffold/getx_scaffold.dart';
|
||||
import 'package:ln_jq_app/common/styles/theme.dart';
|
||||
import 'package:ln_jq_app/pages/b_page/base_widgets/view.dart';
|
||||
import 'package:ln_jq_app/pages/c_page/base_widgets/view.dart';
|
||||
import 'package:ln_jq_app/pages/login/controller.dart';
|
||||
|
||||
class LoginPage extends StatefulWidget {
|
||||
const LoginPage({super.key});
|
||||
|
||||
@override
|
||||
State<LoginPage> createState() => _LoginPageState();
|
||||
}
|
||||
|
||||
class _LoginPageState extends State<LoginPage> with SingleTickerProviderStateMixin {
|
||||
late TabController tabController;
|
||||
|
||||
//默认司机端
|
||||
bool cLogin = true;
|
||||
bool _obscureText = true; // 默认密码为隐藏状态
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// 初始化 TabController，传入 vsync 参数
|
||||
tabController = TabController(length: 2, vsync: this);
|
||||
tabController.addListener(_tabChangeListener);
|
||||
}
|
||||
|
||||
void _tabChangeListener() {
|
||||
// 如果 TabController 不是正在被用户手动滑动（即是初始化或其他操作）
|
||||
if (!tabController.indexIsChanging) {
|
||||
switchTab(tabController.index);
|
||||
}
|
||||
}
|
||||
|
||||
// 切换Tab
|
||||
void switchTab(int index) {
|
||||
setState(() {
|
||||
cLogin = (index == 0);
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
tabController.dispose(); // 销毁 TabController
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
// 主视图
|
||||
Widget _buildView() {
|
||||
// 使用 Get.find 获取控制器
|
||||
final controller = Get.find<LoginController>();
|
||||
|
||||
return Container(
|
||||
color: Color(0xFFEFF4F7),
|
||||
child: <Widget>[
|
||||
Icon(cLogin ? AntdIcon.car : AntdIcon.USB),
|
||||
SizedBox(height: 5.h),
|
||||
TextX.bodyLarge(cLogin ? '司机端' : "加氢站", weight: FontWeight.w700),
|
||||
SizedBox(height: 5.h),
|
||||
TextX.bodyLarge(cLogin ? '安全驾驶·智能服务' : "氢能服务·专业运营"),
|
||||
Card(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(15), // 设置圆角弧度
|
||||
),
|
||||
margin: EdgeInsets.all(15),
|
||||
elevation: 4,
|
||||
child: Container(
|
||||
height: cLogin ? 260.h : 320.h,
|
||||
padding: EdgeInsets.all(15),
|
||||
child: // TabBar切换
|
||||
Column(
|
||||
children: [
|
||||
Card(
|
||||
elevation: 2,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(3),
|
||||
child: TabBar(
|
||||
controller: tabController,
|
||||
onTap: (index) {
|
||||
//保证尺寸变化
|
||||
delayed(300, () {
|
||||
switchTab(index);
|
||||
});
|
||||
},
|
||||
// 修改TabBar的选中状态和未选中状态样式
|
||||
labelColor: Colors.white,
|
||||
// 选中时的文字颜色
|
||||
unselectedLabelColor: Colors.black,
|
||||
// 未选中时的文字颜色
|
||||
indicator: BoxDecoration(
|
||||
color: AppTheme.themeColor, // 选中的Tab背景色（模拟卡片式效果）
|
||||
borderRadius: BorderRadius.circular(12), // 卡片的圆角效果
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.blue.withOpacity(0.2),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 6,
|
||||
),
|
||||
],
|
||||
),
|
||||
tabs: [
|
||||
Tab(text: '司机端登录'),
|
||||
Tab(text: '加氢站登录'),
|
||||
],
|
||||
isScrollable: false,
|
||||
),
|
||||
),
|
||||
),
|
||||
// 根据选择的Tab展示不同的输入框
|
||||
Flexible(
|
||||
child: TabBarView(
|
||||
controller: tabController,
|
||||
children: [
|
||||
// 司机端登录
|
||||
_driverLoginView(controller),
|
||||
// 加氢站登录
|
||||
_stationLoginView(controller),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
].toColumn(mainAxisSize: MainAxisSize.min).center(),);
|
||||
}
|
||||
|
||||
// 司机端登录界面
|
||||
Widget _driverLoginView(LoginController controller) {
|
||||
return !cLogin
|
||||
? SizedBox()
|
||||
: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(height: 20.h),
|
||||
TextFormField(
|
||||
controller: controller.driverIdentityController,
|
||||
cursorColor: AppTheme.themeColor,
|
||||
maxLength: 8,
|
||||
decoration: InputDecoration(
|
||||
hintText: '请输入身份后8位',
|
||||
border: OutlineInputBorder(),
|
||||
prefixIcon: Icon(Icons.person_2_outlined, color: Colors.grey),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(color: AppTheme.themeColor),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 20.h),
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
// 司机端登录
|
||||
Get.to(() => BaseWidgetsPage());
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppTheme.themeColor,
|
||||
minimumSize: Size(double.infinity, 50), // 设置按钮宽度占满，指定最小高度
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
child: Text('登录'),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// 加氢站登录界面
|
||||
Widget _stationLoginView(LoginController controller) {
|
||||
return cLogin
|
||||
? SizedBox()
|
||||
: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(height: 20),
|
||||
TextFormField(
|
||||
controller: controller.stationIdController,
|
||||
cursorColor: AppTheme.themeColor,
|
||||
decoration: InputDecoration(
|
||||
hintText: '请输入加氢站编号',
|
||||
border: OutlineInputBorder(),
|
||||
prefixIcon: Icon(Icons.person_2_outlined, color: Colors.grey),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(color: AppTheme.themeColor),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 20),
|
||||
TextFormField(
|
||||
controller: controller.passwordController,
|
||||
obscureText: _obscureText,
|
||||
cursorColor: AppTheme.themeColor,
|
||||
decoration: InputDecoration(
|
||||
hintText: '请输入密码',
|
||||
border: OutlineInputBorder(),
|
||||
suffixIcon: IconButton(
|
||||
icon: Icon(
|
||||
_obscureText ? Icons.visibility_off : Icons.visibility, // 切换图标
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_obscureText = !_obscureText;
|
||||
});
|
||||
},
|
||||
),
|
||||
prefixIcon: Icon(Icons.lock_outline, color: Colors.grey),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(color: AppTheme.themeColor),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 20),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppTheme.themeColor,
|
||||
minimumSize: Size(double.infinity, 50), // 设置按钮宽度占满，指定最小高度
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
onPressed: () {
|
||||
// 加氢站登录逻辑
|
||||
Get.to(() => B_BaseWidgetsPage());
|
||||
},
|
||||
child: Text('登录'),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GetBuilder<LoginController>(
|
||||
init: LoginController(),
|
||||
id: 'login',
|
||||
builder: (_) {
|
||||
return Scaffold(body: _buildView());
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user