279 lines
7.9 KiB
Dart
279 lines
7.9 KiB
Dart
|
import 'package:flutter/material.dart';
|
|||
|
|
|||
|
class HomeContentPage extends StatelessWidget {
|
|||
|
const HomeContentPage({super.key});
|
|||
|
|
|||
|
@override
|
|||
|
Widget build(BuildContext context) {
|
|||
|
return SingleChildScrollView(
|
|||
|
child: Column(
|
|||
|
children: [
|
|||
|
_announcementSection(),
|
|||
|
_quickMenuSection(context),
|
|||
|
_adCarousel(),
|
|||
|
_marqueeNotice(),
|
|||
|
_activitySection(),
|
|||
|
],
|
|||
|
),
|
|||
|
);
|
|||
|
}
|
|||
|
|
|||
|
// 📢 重要公告區塊
|
|||
|
static Widget _announcementSection() {
|
|||
|
return Padding(
|
|||
|
padding: const EdgeInsets.all(16),
|
|||
|
child: Column(
|
|||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
children: [
|
|||
|
const Text(
|
|||
|
'📢 重要公告',
|
|||
|
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
|
|||
|
),
|
|||
|
const SizedBox(height: 8),
|
|||
|
Card(
|
|||
|
child: ListTile(
|
|||
|
title: const Text('4/20 水塔清洗通知'),
|
|||
|
subtitle: const Text('本週六早上9:00至下午3:00進行清洗,請提前儲水。'),
|
|||
|
),
|
|||
|
),
|
|||
|
],
|
|||
|
),
|
|||
|
);
|
|||
|
}
|
|||
|
|
|||
|
// 🔧 功能選單區塊
|
|||
|
static Widget _quickMenuSection(BuildContext context) {
|
|||
|
return Padding(
|
|||
|
padding: const EdgeInsets.all(16),
|
|||
|
child: Column(
|
|||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
children: [
|
|||
|
const Text(
|
|||
|
'🔧 功能選單',
|
|||
|
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
|
|||
|
),
|
|||
|
const SizedBox(height: 8),
|
|||
|
GridView.count(
|
|||
|
crossAxisCount: 3,
|
|||
|
shrinkWrap: true,
|
|||
|
physics: const NeverScrollableScrollPhysics(),
|
|||
|
childAspectRatio: 1,
|
|||
|
children: [
|
|||
|
_buildQuickButton(context, '報修', 'assets/icons/repair.png'),
|
|||
|
_buildQuickButton(context, '郵件', 'assets/icons/mail.png'),
|
|||
|
_buildQuickButton(context, '訪客', 'assets/icons/visitor.png'),
|
|||
|
_buildQuickButton(context, '繳費', 'assets/icons/payment.png'),
|
|||
|
_buildQuickButton(context, '社區互動', 'assets/icons/community.png'),
|
|||
|
_buildQuickButton(context, '緊急通報', 'assets/icons/emergency.png'),
|
|||
|
],
|
|||
|
),
|
|||
|
],
|
|||
|
),
|
|||
|
);
|
|||
|
}
|
|||
|
|
|||
|
static Widget _buildQuickButton(
|
|||
|
BuildContext context,
|
|||
|
String title,
|
|||
|
String imgAssetPath,
|
|||
|
) {
|
|||
|
return GestureDetector(
|
|||
|
onTap: () {
|
|||
|
// TODO: 各個按鈕的跳轉功能可以寫在這裡
|
|||
|
},
|
|||
|
child: Column(
|
|||
|
mainAxisAlignment: MainAxisAlignment.center,
|
|||
|
children: [
|
|||
|
Image.asset(imgAssetPath, width: 40, height: 40, color: Colors.grey),
|
|||
|
const SizedBox(height: 8),
|
|||
|
Text(title, style: const TextStyle(fontSize: 14)),
|
|||
|
],
|
|||
|
),
|
|||
|
);
|
|||
|
}
|
|||
|
|
|||
|
// 🖼️ 廣告輪播區
|
|||
|
static Widget _adCarousel() {
|
|||
|
return Padding(
|
|||
|
padding: const EdgeInsets.symmetric(vertical: 16),
|
|||
|
child: SizedBox(
|
|||
|
height: 180,
|
|||
|
child: PageView(
|
|||
|
children: [
|
|||
|
Image.asset('assets/banners/banner1.png', fit: BoxFit.cover),
|
|||
|
Image.asset('assets/banners/banner2.png', fit: BoxFit.cover),
|
|||
|
Image.asset('assets/banners/banner3.png', fit: BoxFit.cover),
|
|||
|
],
|
|||
|
),
|
|||
|
),
|
|||
|
);
|
|||
|
}
|
|||
|
|
|||
|
// 🏃♂️ 跑馬燈公告
|
|||
|
static Widget _marqueeNotice() {
|
|||
|
return const MarqueeNotice();
|
|||
|
}
|
|||
|
|
|||
|
// 🎉 活動卡片列表
|
|||
|
static Widget _activitySection() {
|
|||
|
return Padding(
|
|||
|
padding: const EdgeInsets.all(16),
|
|||
|
child: Column(
|
|||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
children: [
|
|||
|
const Text(
|
|||
|
'🎉 最新活動',
|
|||
|
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
|
|||
|
),
|
|||
|
const SizedBox(height: 8),
|
|||
|
SizedBox(
|
|||
|
height: 240,
|
|||
|
child: ListView(
|
|||
|
scrollDirection: Axis.horizontal,
|
|||
|
children: [
|
|||
|
_buildActivityCard(
|
|||
|
'中秋烤肉趴',
|
|||
|
'9/9 晚上6點開烤',
|
|||
|
'assets/activities/bbq.png',
|
|||
|
),
|
|||
|
_buildActivityCard(
|
|||
|
'親子日遊園',
|
|||
|
'玩具福袋等你拿!',
|
|||
|
'assets/activities/family_day.png',
|
|||
|
),
|
|||
|
_buildActivityCard(
|
|||
|
'健康講堂',
|
|||
|
'醫師到場解說',
|
|||
|
'assets/activities/health.png',
|
|||
|
),
|
|||
|
_buildActivityCard(
|
|||
|
'防災演習',
|
|||
|
'模擬火災逃生',
|
|||
|
'assets/activities/fire_drill.png',
|
|||
|
),
|
|||
|
_buildActivityCard(
|
|||
|
'社區園遊會',
|
|||
|
'免費攤位吃到飽',
|
|||
|
'assets/activities/festival.png',
|
|||
|
),
|
|||
|
],
|
|||
|
),
|
|||
|
),
|
|||
|
],
|
|||
|
),
|
|||
|
);
|
|||
|
}
|
|||
|
|
|||
|
static Widget _buildActivityCard(
|
|||
|
String title,
|
|||
|
String subtitle,
|
|||
|
String imgAssetPath,
|
|||
|
) {
|
|||
|
return Container(
|
|||
|
width: 180,
|
|||
|
margin: const EdgeInsets.only(right: 12),
|
|||
|
decoration: BoxDecoration(
|
|||
|
color: Colors.white,
|
|||
|
borderRadius: BorderRadius.circular(10),
|
|||
|
boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 5)],
|
|||
|
),
|
|||
|
child: Column(
|
|||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
children: [
|
|||
|
ClipRRect(
|
|||
|
borderRadius: const BorderRadius.vertical(top: Radius.circular(10)),
|
|||
|
child: Image.asset(
|
|||
|
imgAssetPath,
|
|||
|
height: 120,
|
|||
|
width: double.infinity,
|
|||
|
fit: BoxFit.cover,
|
|||
|
),
|
|||
|
),
|
|||
|
Padding(
|
|||
|
padding: const EdgeInsets.all(8),
|
|||
|
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.black54),
|
|||
|
),
|
|||
|
const SizedBox(height: 8),
|
|||
|
ElevatedButton(
|
|||
|
onPressed: () {
|
|||
|
// TODO: 活動詳情
|
|||
|
},
|
|||
|
child: const Text('查看'),
|
|||
|
),
|
|||
|
],
|
|||
|
),
|
|||
|
),
|
|||
|
],
|
|||
|
),
|
|||
|
);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
class MarqueeNotice extends StatefulWidget {
|
|||
|
const MarqueeNotice({super.key});
|
|||
|
|
|||
|
@override
|
|||
|
State<MarqueeNotice> createState() => _MarqueeNoticeState();
|
|||
|
}
|
|||
|
|
|||
|
class _MarqueeNoticeState extends State<MarqueeNotice>
|
|||
|
with SingleTickerProviderStateMixin {
|
|||
|
late final AnimationController _controller;
|
|||
|
late final Animation<double> _animation;
|
|||
|
|
|||
|
final String _marqueeText = '公告: 歡迎使用我們的社區通,請多加利用。謝謝您~ 如有問題可洽談管理室';
|
|||
|
|
|||
|
@override
|
|||
|
void initState() {
|
|||
|
super.initState();
|
|||
|
_controller = AnimationController(
|
|||
|
duration: const Duration(seconds: 10),
|
|||
|
vsync: this,
|
|||
|
)..repeat();
|
|||
|
|
|||
|
_animation = Tween<double>(begin: 1.0, end: -1.0).animate(_controller);
|
|||
|
}
|
|||
|
|
|||
|
@override
|
|||
|
void dispose() {
|
|||
|
_controller.dispose();
|
|||
|
super.dispose();
|
|||
|
}
|
|||
|
|
|||
|
@override
|
|||
|
Widget build(BuildContext context) {
|
|||
|
return Container(
|
|||
|
color: Colors.grey.shade300,
|
|||
|
height: 40,
|
|||
|
alignment: Alignment.centerLeft,
|
|||
|
child: ClipRect(
|
|||
|
child: AnimatedBuilder(
|
|||
|
animation: _animation,
|
|||
|
builder: (context, child) {
|
|||
|
return FractionalTranslation(
|
|||
|
translation: Offset(_animation.value, 0),
|
|||
|
child: child,
|
|||
|
);
|
|||
|
},
|
|||
|
child: Text(
|
|||
|
_marqueeText,
|
|||
|
style: const TextStyle(fontSize: 16),
|
|||
|
overflow: TextOverflow.visible,
|
|||
|
softWrap: false,
|
|||
|
),
|
|||
|
),
|
|||
|
),
|
|||
|
);
|
|||
|
}
|
|||
|
}
|