10 changed files with 179 additions and 531 deletions
|
After Width: | Height: | Size: 41 KiB |
@ -0,0 +1,88 @@ |
|||||||
|
import 'package:flutter/material.dart'; |
||||||
|
import 'package:flutter/services.dart'; |
||||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
||||||
|
import 'package:get/get.dart'; |
||||||
|
|
||||||
|
// 支付宝消息页面 |
||||||
|
class EnterpriseInfoPage extends StatelessWidget { |
||||||
|
const EnterpriseInfoPage({super.key}); |
||||||
|
|
||||||
|
@override |
||||||
|
Widget build(BuildContext context) { |
||||||
|
// 1. 使用 DefaultTabController 包裹 Scaffold |
||||||
|
// length: 2 表示我们有两个 Tab |
||||||
|
return DefaultTabController( |
||||||
|
length: 2, |
||||||
|
child: Scaffold( |
||||||
|
backgroundColor: const Color(0xFFF5F5F5), // 设置一个类似截图的浅灰色背景 |
||||||
|
// 使用我们自定义的 AppBar |
||||||
|
appBar: _buildAlipayAppBar(context), |
||||||
|
// TabBarView 用于显示与 Tab 对应的内容 |
||||||
|
body: const TabBarView( |
||||||
|
children: [ |
||||||
|
Center(child: Text('问题列表')), |
||||||
|
Center(child: Text('企业基本信息')), |
||||||
|
], |
||||||
|
), |
||||||
|
), |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/// 构建 AppBar 的私有方法 |
||||||
|
PreferredSizeWidget _buildAlipayAppBar(BuildContext context) { |
||||||
|
return AppBar( |
||||||
|
// --- 样式和颜色 --- |
||||||
|
backgroundColor: Colors.transparent, // AppBar 背景色为白色 |
||||||
|
flexibleSpace: Container( |
||||||
|
decoration: const BoxDecoration( |
||||||
|
gradient: LinearGradient( |
||||||
|
colors: [Color(0xFF418CFC), Color(0xFF3DBFFC)], |
||||||
|
begin: Alignment.centerLeft, |
||||||
|
end: Alignment.centerRight, |
||||||
|
), |
||||||
|
), |
||||||
|
), |
||||||
|
elevation: 0, // 移除 AppBar 的阴影 |
||||||
|
systemOverlayStyle: SystemUiOverlayStyle.dark, // 设置状态栏图标为深色 |
||||||
|
// --- 左侧返回按钮 --- |
||||||
|
leading: IconButton( |
||||||
|
icon: const Icon(Icons.arrow_back_ios, color: Colors.white, size: 20), |
||||||
|
onPressed: () { |
||||||
|
Get.back(); |
||||||
|
}, |
||||||
|
), |
||||||
|
// --- 中间的 TabBar --- |
||||||
|
// 将 TabBar 放入 title 属性中，可以使其居中显示 |
||||||
|
title: TabBar( |
||||||
|
isScrollable: false, // true: Tab的宽度由内容决定; false: 均分宽度 |
||||||
|
labelColor: Colors.white, // 选中 Tab 的文字颜色 |
||||||
|
unselectedLabelColor: Colors.grey, // 未选中 Tab 的文字颜色 |
||||||
|
// labelStyle: const TextStyle(fontSize: 17, fontWeight: FontWeight.bold), |
||||||
|
// unselectedLabelStyle: const TextStyle(fontSize: 17), |
||||||
|
overlayColor: WidgetStateProperty.all(Colors.transparent), |
||||||
|
indicatorColor: Colors.white, // 指示器颜色 |
||||||
|
// indicatorWeight: 2.5, // 指示器高度 |
||||||
|
indicatorPadding: EdgeInsetsGeometry.only(bottom: 4.h), // 指示器内边距), |
||||||
|
indicatorSize: TabBarIndicatorSize.label, // 指示器宽度与文字同宽 |
||||||
|
dividerHeight: 0, // 去掉 TabBar 底部的分割线 |
||||||
|
tabs: const [ |
||||||
|
Tab(text: '问题列表'), |
||||||
|
Tab(text: '企业基本情况'), |
||||||
|
], |
||||||
|
), |
||||||
|
centerTitle: false, |
||||||
|
titleSpacing: 0, |
||||||
|
// --- 右侧操作按钮 --- |
||||||
|
actions: [ |
||||||
|
IconButton( |
||||||
|
icon: Icon(Icons.add, color: Colors.white), // 使用 .sp |
||||||
|
onPressed: () {}, |
||||||
|
), |
||||||
|
IconButton( |
||||||
|
icon: Icon(Icons.upload, color: Colors.pink[300]), // 使用 .sp |
||||||
|
onPressed: () {}, |
||||||
|
), |
||||||
|
], |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -1,468 +0,0 @@ |
|||||||
import 'package:flutter/material.dart'; |
|
||||||
|
|
||||||
class HealthApp extends StatelessWidget { |
|
||||||
const HealthApp({super.key}); |
|
||||||
|
|
||||||
@override |
|
||||||
Widget build(BuildContext context) { |
|
||||||
return HomePage1(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
class HomePage1 extends StatefulWidget { |
|
||||||
const HomePage1({super.key}); |
|
||||||
|
|
||||||
@override |
|
||||||
State<HomePage1> createState() => _HomePageState(); |
|
||||||
} |
|
||||||
|
|
||||||
class _HomePageState extends State<HomePage1> |
|
||||||
with SingleTickerProviderStateMixin { |
|
||||||
late TabController _tabController; |
|
||||||
int _bottomNavIndex = 0; |
|
||||||
|
|
||||||
@override |
|
||||||
void initState() { |
|
||||||
super.initState(); |
|
||||||
_tabController = TabController(length: 3, vsync: this); |
|
||||||
} |
|
||||||
|
|
||||||
@override |
|
||||||
void dispose() { |
|
||||||
_tabController.dispose(); |
|
||||||
super.dispose(); |
|
||||||
} |
|
||||||
|
|
||||||
@override |
|
||||||
Widget build(BuildContext context) { |
|
||||||
return Scaffold( |
|
||||||
appBar: _buildAppBar(), |
|
||||||
body: SingleChildScrollView( |
|
||||||
child: Column( |
|
||||||
children: [ |
|
||||||
// _buildSearchBar(), |
|
||||||
// _buildServicesGrid(), |
|
||||||
const SizedBox(height: 12), |
|
||||||
// _buildHealthManagementCard(), |
|
||||||
const SizedBox(height: 12), |
|
||||||
// _buildDoctorBanner(), |
|
||||||
const SizedBox(height: 12), |
|
||||||
// _buildPopularServices(), |
|
||||||
], |
|
||||||
), |
|
||||||
), |
|
||||||
// bottomNavigationBar: _buildBottomNavigationBar(), |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// 构建顶部 AppBar |
|
||||||
PreferredSizeWidget _buildAppBar() { |
|
||||||
return AppBar( |
|
||||||
backgroundColor: Colors.blue, |
|
||||||
elevation: 0, |
|
||||||
leading: SizedBox(), |
|
||||||
title: const Center( |
|
||||||
child: Text( |
|
||||||
'企业列表', |
|
||||||
style: TextStyle( |
|
||||||
color: Colors.white, |
|
||||||
fontWeight: FontWeight.bold, |
|
||||||
fontFamily: 'MyFont', |
|
||||||
), |
|
||||||
), |
|
||||||
), |
|
||||||
actions: [ |
|
||||||
// IconButton( |
|
||||||
// onPressed: () {}, |
|
||||||
// icon: const Icon(Icons.widgets_outlined, color: Colors.black), |
|
||||||
// ), |
|
||||||
IconButton( |
|
||||||
onPressed: () {}, |
|
||||||
icon: const Icon(Icons.add, color: Colors.white), |
|
||||||
), |
|
||||||
], |
|
||||||
bottom: TabBar( |
|
||||||
controller: _tabController, |
|
||||||
isScrollable: true, |
|
||||||
labelColor: Colors.black, |
|
||||||
unselectedLabelColor: Colors.grey[700], |
|
||||||
indicatorColor: Colors.blue, |
|
||||||
indicatorWeight: 3, |
|
||||||
tabs: const [ |
|
||||||
Tab(text: '问题列表'), |
|
||||||
Tab(text: '历史问题列表'), |
|
||||||
Tab(text: '企业基本情况'), |
|
||||||
], |
|
||||||
), |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// 构建顶部 AppBar |
|
||||||
PreferredSizeWidget _buildAppBar2() { |
|
||||||
return AppBar( |
|
||||||
backgroundColor: Colors.lightBlue[50], |
|
||||||
elevation: 0, |
|
||||||
leading: const Icon(Icons.arrow_back_ios, color: Colors.black), |
|
||||||
title: const Center( |
|
||||||
child: Text( |
|
||||||
'企业列表', |
|
||||||
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold), |
|
||||||
), |
|
||||||
), |
|
||||||
actions: [ |
|
||||||
// IconButton( |
|
||||||
// onPressed: () {}, |
|
||||||
// icon: const Icon(Icons.widgets_outlined, color: Colors.black), |
|
||||||
// ), |
|
||||||
IconButton( |
|
||||||
onPressed: () {}, |
|
||||||
icon: const Icon(Icons.add, color: Colors.black), |
|
||||||
), |
|
||||||
], |
|
||||||
bottom: TabBar( |
|
||||||
controller: _tabController, |
|
||||||
isScrollable: true, |
|
||||||
labelColor: Colors.black, |
|
||||||
unselectedLabelColor: Colors.grey[700], |
|
||||||
indicatorColor: Colors.blue, |
|
||||||
indicatorWeight: 3, |
|
||||||
tabs: const [ |
|
||||||
Tab(text: '问题列表'), |
|
||||||
Tab(text: '历史问题列表'), |
|
||||||
Tab(text: '企业基本情况'), |
|
||||||
], |
|
||||||
), |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// 构建搜索框 |
|
||||||
Widget _buildSearchBar() { |
|
||||||
return Container( |
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), |
|
||||||
color: Colors.lightBlue[50], |
|
||||||
child: Row( |
|
||||||
children: [ |
|
||||||
const Text('淄博', style: TextStyle(fontSize: 16)), |
|
||||||
const Icon(Icons.arrow_drop_down), |
|
||||||
const SizedBox(width: 8), |
|
||||||
Expanded( |
|
||||||
child: Container( |
|
||||||
height: 40, |
|
||||||
decoration: BoxDecoration( |
|
||||||
color: Colors.white, |
|
||||||
borderRadius: BorderRadius.circular(20), |
|
||||||
), |
|
||||||
child: const TextField( |
|
||||||
decoration: InputDecoration( |
|
||||||
hintText: '家庭共济', |
|
||||||
prefixIcon: Icon(Icons.search, color: Colors.grey), |
|
||||||
border: InputBorder.none, |
|
||||||
contentPadding: EdgeInsets.symmetric(vertical: 10), |
|
||||||
), |
|
||||||
), |
|
||||||
), |
|
||||||
), |
|
||||||
TextButton( |
|
||||||
onPressed: () {}, |
|
||||||
child: const Text( |
|
||||||
'搜索', |
|
||||||
style: TextStyle(color: Colors.black, fontSize: 16), |
|
||||||
), |
|
||||||
), |
|
||||||
], |
|
||||||
), |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// 构建功能网格 |
|
||||||
Widget _buildServicesGrid() { |
|
||||||
// 辅助函数创建单个网格项 |
|
||||||
Widget buildGridItem( |
|
||||||
IconData icon, |
|
||||||
String label, { |
|
||||||
bool isSpecial = false, |
|
||||||
}) { |
|
||||||
return Column( |
|
||||||
mainAxisAlignment: MainAxisAlignment.center, |
|
||||||
children: [ |
|
||||||
Stack( |
|
||||||
alignment: Alignment.topRight, |
|
||||||
children: [ |
|
||||||
Icon(icon, size: 40, color: Colors.blue), |
|
||||||
if (isSpecial) |
|
||||||
Container( |
|
||||||
padding: const EdgeInsets.symmetric( |
|
||||||
horizontal: 4, |
|
||||||
vertical: 1, |
|
||||||
), |
|
||||||
decoration: BoxDecoration( |
|
||||||
color: Colors.red, |
|
||||||
borderRadius: BorderRadius.circular(8), |
|
||||||
), |
|
||||||
child: const Text( |
|
||||||
'正品药', |
|
||||||
style: TextStyle(color: Colors.white, fontSize: 8), |
|
||||||
), |
|
||||||
), |
|
||||||
], |
|
||||||
), |
|
||||||
const SizedBox(height: 8), |
|
||||||
Text(label, style: const TextStyle(fontSize: 12)), |
|
||||||
], |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
return Container( |
|
||||||
color: Colors.lightBlue[50], |
|
||||||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 24), |
|
||||||
child: GridView.count( |
|
||||||
crossAxisCount: 5, |
|
||||||
shrinkWrap: true, |
|
||||||
physics: const NeverScrollableScrollPhysics(), |
|
||||||
children: [ |
|
||||||
buildGridItem(Icons.qr_code_scanner, '医保码'), |
|
||||||
buildGridItem(Icons.add_box, '挂号'), |
|
||||||
buildGridItem(Icons.person, '问诊'), |
|
||||||
buildGridItem(Icons.medical_services, '买药', isSpecial: true), |
|
||||||
buildGridItem(Icons.shield, '健康保障'), |
|
||||||
buildGridItem(Icons.local_hospital, '好药源选'), |
|
||||||
buildGridItem(Icons.health_and_safety, '体检'), |
|
||||||
buildGridItem(Icons.mood, '口腔'), |
|
||||||
buildGridItem(Icons.grass, '中医'), |
|
||||||
buildGridItem(Icons.apps, '全部服务'), |
|
||||||
], |
|
||||||
), |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// 构建健康管理卡片 |
|
||||||
Widget _buildHealthManagementCard() { |
|
||||||
return Container( |
|
||||||
margin: const EdgeInsets.symmetric(horizontal: 16), |
|
||||||
padding: const EdgeInsets.all(16), |
|
||||||
decoration: BoxDecoration( |
|
||||||
color: Colors.white, |
|
||||||
borderRadius: BorderRadius.circular(12), |
|
||||||
), |
|
||||||
child: Column( |
|
||||||
crossAxisAlignment: CrossAxisAlignment.start, |
|
||||||
children: [ |
|
||||||
const Text( |
|
||||||
'我的健康管理', |
|
||||||
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16), |
|
||||||
), |
|
||||||
const SizedBox(height: 12), |
|
||||||
Container( |
|
||||||
padding: const EdgeInsets.all(12), |
|
||||||
decoration: BoxDecoration( |
|
||||||
color: Colors.blue.withOpacity(0.1), |
|
||||||
borderRadius: BorderRadius.circular(8), |
|
||||||
), |
|
||||||
child: Row( |
|
||||||
children: [ |
|
||||||
const Icon(Icons.warning_amber_rounded, color: Colors.orange), |
|
||||||
const SizedBox(width: 8), |
|
||||||
const Expanded( |
|
||||||
child: Column( |
|
||||||
crossAxisAlignment: CrossAxisAlignment.start, |
|
||||||
children: [ |
|
||||||
Text( |
|
||||||
'你的补充医保待激活', |
|
||||||
style: TextStyle(fontWeight: FontWeight.bold), |
|
||||||
), |
|
||||||
Text( |
|
||||||
'√ 医保内外都能报 √ 带病投保首选', |
|
||||||
style: TextStyle(color: Colors.grey, fontSize: 12), |
|
||||||
), |
|
||||||
], |
|
||||||
), |
|
||||||
), |
|
||||||
ElevatedButton( |
|
||||||
onPressed: () {}, |
|
||||||
style: ElevatedButton.styleFrom( |
|
||||||
backgroundColor: Colors.orange, |
|
||||||
shape: RoundedRectangleBorder( |
|
||||||
borderRadius: BorderRadius.circular(18.0), |
|
||||||
), |
|
||||||
), |
|
||||||
child: const Text('去激活'), |
|
||||||
), |
|
||||||
], |
|
||||||
), |
|
||||||
), |
|
||||||
], |
|
||||||
), |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// 构建医生问诊横幅 |
|
||||||
Widget _buildDoctorBanner() { |
|
||||||
return Container( |
|
||||||
margin: const EdgeInsets.symmetric(horizontal: 16), |
|
||||||
padding: const EdgeInsets.all(16), |
|
||||||
decoration: BoxDecoration( |
|
||||||
color: Colors.white, |
|
||||||
borderRadius: BorderRadius.circular(12), |
|
||||||
image: const DecorationImage( |
|
||||||
// 模拟医生背景图 |
|
||||||
image: NetworkImage( |
|
||||||
'https://img.tukuppt.com/png_preview/00/34/83/8fT4fFFaLg.jpg!/fw/780', |
|
||||||
), // 使用一个示例医生图片 URL |
|
||||||
fit: BoxFit.cover, |
|
||||||
alignment: Alignment.centerRight, |
|
||||||
opacity: 0.8, |
|
||||||
), |
|
||||||
), |
|
||||||
child: const Row( |
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
||||||
children: [ |
|
||||||
Column( |
|
||||||
crossAxisAlignment: CrossAxisAlignment.start, |
|
||||||
children: [ |
|
||||||
Text( |
|
||||||
'三甲医生快速问诊', |
|
||||||
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), |
|
||||||
), |
|
||||||
SizedBox(height: 4), |
|
||||||
Text('100%公立医生 不限制问诊次数', style: TextStyle(color: Colors.grey)), |
|
||||||
], |
|
||||||
), |
|
||||||
// 医生图片通过 DecorationImage 实现 |
|
||||||
], |
|
||||||
), |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// 构建热门服务部分 |
|
||||||
Widget _buildPopularServices() { |
|
||||||
return Container( |
|
||||||
margin: const EdgeInsets.symmetric(horizontal: 16), |
|
||||||
padding: const EdgeInsets.all(16), |
|
||||||
decoration: BoxDecoration( |
|
||||||
color: Colors.white, |
|
||||||
borderRadius: BorderRadius.circular(12), |
|
||||||
), |
|
||||||
child: Column( |
|
||||||
children: [ |
|
||||||
const Row( |
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
||||||
children: [ |
|
||||||
Text( |
|
||||||
'热门服务', |
|
||||||
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16), |
|
||||||
), |
|
||||||
Text('专病专科', style: TextStyle(color: Colors.grey)), |
|
||||||
Text('健康百科', style: TextStyle(color: Colors.grey)), |
|
||||||
Row( |
|
||||||
children: [ |
|
||||||
Text('更多', style: TextStyle(color: Colors.grey)), |
|
||||||
Icon(Icons.arrow_forward_ios, size: 12, color: Colors.grey), |
|
||||||
], |
|
||||||
), |
|
||||||
], |
|
||||||
), |
|
||||||
const SizedBox(height: 16), |
|
||||||
Row( |
|
||||||
children: [ |
|
||||||
_buildServiceCard( |
|
||||||
'百万医疗险', |
|
||||||
'600万医疗保障', |
|
||||||
Icons.add_to_photos, |
|
||||||
Colors.blue, |
|
||||||
), |
|
||||||
const SizedBox(width: 12), |
|
||||||
_buildServiceCard( |
|
||||||
'百万住院保障', |
|
||||||
'医保内外都可报', |
|
||||||
Icons.security, |
|
||||||
Colors.cyan, |
|
||||||
), |
|
||||||
], |
|
||||||
), |
|
||||||
const SizedBox(height: 12), |
|
||||||
Row( |
|
||||||
children: [ |
|
||||||
_buildServiceCard( |
|
||||||
'医保种牙', |
|
||||||
'种植牙方案科普', |
|
||||||
Icons.mood, |
|
||||||
Colors.lightBlue, |
|
||||||
), |
|
||||||
const SizedBox(width: 12), |
|
||||||
_buildServiceCard( |
|
||||||
'我的家', |
|
||||||
'家人健康我守护', |
|
||||||
Icons.home, |
|
||||||
Colors.purpleAccent, |
|
||||||
), |
|
||||||
], |
|
||||||
), |
|
||||||
], |
|
||||||
), |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// 服务卡片的小组件 |
|
||||||
Widget _buildServiceCard( |
|
||||||
String title, |
|
||||||
String subtitle, |
|
||||||
IconData icon, |
|
||||||
Color color, |
|
||||||
) { |
|
||||||
return Expanded( |
|
||||||
child: Container( |
|
||||||
padding: const EdgeInsets.all(12), |
|
||||||
decoration: BoxDecoration( |
|
||||||
color: color.withOpacity(0.1), |
|
||||||
borderRadius: BorderRadius.circular(8), |
|
||||||
), |
|
||||||
child: Row( |
|
||||||
children: [ |
|
||||||
Expanded( |
|
||||||
child: Column( |
|
||||||
crossAxisAlignment: CrossAxisAlignment.start, |
|
||||||
children: [ |
|
||||||
Text( |
|
||||||
title, |
|
||||||
style: const TextStyle(fontWeight: FontWeight.bold), |
|
||||||
), |
|
||||||
const SizedBox(height: 4), |
|
||||||
Text( |
|
||||||
subtitle, |
|
||||||
style: const TextStyle(fontSize: 12, color: Colors.grey), |
|
||||||
), |
|
||||||
], |
|
||||||
), |
|
||||||
), |
|
||||||
Icon(icon, color: color, size: 30), |
|
||||||
], |
|
||||||
), |
|
||||||
), |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// 构建底部导航栏 |
|
||||||
Widget _buildBottomNavigationBar() { |
|
||||||
return BottomNavigationBar( |
|
||||||
currentIndex: _bottomNavIndex, |
|
||||||
onTap: (index) { |
|
||||||
setState(() { |
|
||||||
_bottomNavIndex = index; |
|
||||||
}); |
|
||||||
}, |
|
||||||
type: BottomNavigationBarType.fixed, |
|
||||||
selectedItemColor: Colors.blue, |
|
||||||
unselectedItemColor: Colors.grey, |
|
||||||
items: const [ |
|
||||||
BottomNavigationBarItem(icon: Icon(Icons.home), label: '企业'), |
|
||||||
BottomNavigationBarItem( |
|
||||||
icon: Icon(Icons.card_membership), |
|
||||||
label: '全部问题', |
|
||||||
), |
|
||||||
// BottomNavigationBarItem(icon: Icon(Icons.waves), label: 'AQ-健康管家'), |
|
||||||
// BottomNavigationBarItem(icon: Icon(Icons.add_moderator), label: '医疗保障'), |
|
||||||
BottomNavigationBarItem(icon: Icon(Icons.person_outline), label: '我的'), |
|
||||||
], |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue