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