You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
468 lines
14 KiB
468 lines
14 KiB
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: '我的'), |
|
], |
|
); |
|
} |
|
}
|
|
|