导航栏

This commit is contained in:
2026-01-23 17:00:17 +08:00
parent 16bae6a1e9
commit 9fdca9136d
14 changed files with 107 additions and 100 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 914 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:getx_scaffold/common/index.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:ln_jq_app/common/login_util.dart';
import 'package:ln_jq_app/pages/c_page/car_info/view.dart';
import 'package:ln_jq_app/pages/c_page/map/view.dart';
import 'package:ln_jq_app/pages/c_page/mine/view.dart';
@@ -12,6 +13,7 @@ class BaseWidgetsPage extends GetView<BaseWidgetsController> {
BaseWidgetsPage({super.key});
final PageController _pageController = PageController();
// 主视图
Widget _buildView() {
return PageView(
@@ -20,54 +22,68 @@ class BaseWidgetsPage extends GetView<BaseWidgetsController> {
onPageChanged: (index) {
jumpTabAndPage(index);
},
children: _buildPages(), // 页面的列表
children: _buildPages(),
);
}
void jumpTabAndPage(int index) {
controller.pageIndex = index; // 更新页面索引
controller.updateUi(); // 更新 UI
controller.pageIndex = index;
controller.updateUi();
_pageController.jumpToPage(controller.pageIndex);
}
// 对应的页面
List<Widget> _buildPages() {
return [
ReservationPage(),
MapPage(),
CarInfoPage(),
MinePage(),
];
return [ReservationPage(), MapPage(), CarInfoPage(), MinePage()];
}
//导航栏
// 自定义导航栏 (悬浮胶囊样式)
Widget _buildNavigationBar() {
return NavigationX(
currentIndex: controller.pageIndex, // 当前选中的tab索引
onTap: (index) {
jumpTabAndPage(index);
}, // 切换tab事件
items: [
NavigationItemModel(
label: '加氢预约',
icon: AntdIcon.orderedlist,
selectedIcon: AntdIcon.calendar_fill,
),
NavigationItemModel(
label: '地图',
icon: AntdIcon.location,
selectedIcon: AntdIcon.location_fill,
),
NavigationItemModel(
label: '车辆信息',
icon: AntdIcon.car,
selectedIcon: AntdIcon.car_fill,
),
NavigationItemModel(
label: '我的',
icon: AntdIcon.user,
selectedIcon: AntdIcon.user,
return SafeArea(
child: Container(
height: 50.h,
margin: const EdgeInsets.fromLTRB(24, 0, 24, 10), // 悬浮边距
decoration: BoxDecoration(
color: Color.fromRGBO(240, 244, 247, 1), // 浅灰色背景
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 10,
offset: const Offset(0, 5),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildNavItem(0, "ic_h2_select@2x", "ic_h2@2x"),
_buildNavItem(1, "ic_map_select@2x", "ic_map@2x"),
_buildNavItem(2, "ic_car_select@2x", "ic_car@2x"),
_buildNavItem(3, "ic_user_select@2x", "ic_user@2x"),
],
),
),
);
}
// 构建单个导航项
Widget _buildNavItem(int index, String icon, String selectedIcon) {
bool isSelected = controller.pageIndex == index;
return GestureDetector(
onTap: () => jumpTabAndPage(index),
behavior: HitTestBehavior.opaque,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
decoration: BoxDecoration(
color: isSelected ? const Color(0xFF006633) : Colors.transparent, // 选中时的深绿色背景
borderRadius: BorderRadius.circular(20),
),
child: SizedBox(
height: 24,
width: 24,
child: LoginUtil.getAssImg(isSelected ? selectedIcon : icon),),
),
);
}
@@ -78,10 +94,10 @@ class BaseWidgetsPage extends GetView<BaseWidgetsController> {
id: 'baseWidgets',
builder: (_) {
return Scaffold(
extendBody: false,
extendBody: true, // 重要:让 body 延伸到导航栏后面
resizeToAvoidBottomInset: false,
bottomNavigationBar: _buildNavigationBar(),
body: SafeArea(child: _buildView()),
body: _buildView(), // 移除 SafeArea 以获得更好的全屏沉浸感
);
},
);

View File

@@ -35,6 +35,7 @@ class CarInfoPage extends GetView<CarInfoController> {
_buildCertificatesCard(context),
const SizedBox(height: 12),
_buildSafetyReminderCard(),
SizedBox(height: 95.h),
],
),
),
@@ -60,7 +61,7 @@ class CarInfoPage extends GetView<CarInfoController> {
child: Column(
children: [
Padding(
padding: EdgeInsets.only(left: 20.w, right: 20.w, bottom: 16, top: 40),
padding: EdgeInsets.only(left: 20.w, right: 20.w, bottom: 16, top: 50),
child: Row(
children: [
Stack(
@@ -344,7 +345,7 @@ class CarInfoPage extends GetView<CarInfoController> {
),
const SizedBox(height: 9),
SizedBox(
height: 343.h, // 给定一个高度,或者使用别的方式布局
height: 333.h, // 给定一个高度,或者使用别的方式布局
child: TabBarView(
children: [
_buildCertificateContent('行驶证', controller.drivingAttachments),
@@ -362,16 +363,15 @@ class CarInfoPage extends GetView<CarInfoController> {
/// 构建单个证件的展示内容
Widget _buildCertificateContent(String title, RxList<String> attachments) {
return Obx(() {
if (attachments.isEmpty) {
return const Center(child: Text('暂无相关证件信息'));
}
return Card(
elevation: 0,
color: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
padding: EdgeInsets.all(16.0),
child: attachments.isEmpty
? const Center(child: Text('暂无相关证件信息'))
: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
@@ -394,30 +394,20 @@ class CarInfoPage extends GetView<CarInfoController> {
_buildCertDetailItem('使用性质', '货运'),
],
),
const SizedBox(height: 20),
const SizedBox(height: 16),
// 附件预览部分
Expanded(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: attachments.length,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
final url = attachments[index];
return GestureDetector(
GestureDetector(
onTap: () {
controller.openAttachment(url);
controller.navigateToCertificateViewer(title, attachments);
},
child: Container(
height: 184.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Color.fromRGBO(226, 232, 240, 1)),
color: Color.fromRGBO(248, 250, 252, 1)
color: Color.fromRGBO(248, 250, 252, 1),
),
child: Center(child: _buildAttachmentPreview(url)),
),
);
},
child: Center(child: _buildAttachmentPreview(attachments[0])),
),
),
],

View File

@@ -38,7 +38,7 @@ class MinePage extends GetView<MineController> {
_buildSafetyReminderCard(),
SizedBox(height: 24.h),
_buildLogoutButton(),
SizedBox(height: 24.h),
SizedBox(height: 95.h),
],
),
),

View File

@@ -37,6 +37,7 @@ class ReservationPage extends GetView<C_ReservationController> {
_buildReservationFormCard(context),
const SizedBox(height: 5),
_buildTipsCard(),
SizedBox(height: 95.h),
],
),
),