import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class Message { final String text; final bool isUser; Message(this.text, this.isUser); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: '訊息中心', theme: ThemeData(primarySwatch: Colors.green), home: const MessagePage(), debugShowCheckedModeBanner: false, ); } } class MessagePage extends StatefulWidget { const MessagePage({super.key}); @override State createState() => _MessagePageState(); } class _MessagePageState extends State { final List _messages = [ Message('您好,請記得繳交這個月的管理費。', false), Message('好的,謝謝通知!', true), Message('提醒您 4/18 上午社區將進行水塔清洗,會暫停供水。', false), Message('了解!', true), ]; final TextEditingController _controller = TextEditingController(); final ScrollController _scrollController = ScrollController(); void _sendMessage() { final text = _controller.text.trim(); if (text.isEmpty) return; setState(() { _messages.add(Message(text, true)); }); _controller.clear(); // 自動滾到底部,延遲讓畫面先更新 Future.delayed(const Duration(milliseconds: 100), () { if (_scrollController.hasClients) { _scrollController.animateTo( _scrollController.position.maxScrollExtent, duration: const Duration(milliseconds: 300), curve: Curves.easeOut, ); } }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('訊息中心'), backgroundColor: const Color(0xFF9eaf9f), foregroundColor: Colors.white, leading: IconButton( icon: const Icon(Icons.arrow_back), onPressed: () => Navigator.pop(context), ), ), body: Column( children: [ Expanded( child: ListView.builder( controller: _scrollController, padding: const EdgeInsets.all(16), itemCount: _messages.length, itemBuilder: (context, index) { final msg = _messages[index]; return Align( alignment: msg.isUser ? Alignment.centerRight : Alignment.centerLeft, child: Container( padding: const EdgeInsets.symmetric( vertical: 10, horizontal: 16, ), margin: const EdgeInsets.symmetric(vertical: 6), constraints: const BoxConstraints(maxWidth: 300), decoration: BoxDecoration( color: msg.isUser ? const Color(0xFFD0E9C6) : const Color(0xFFE0E0E0), borderRadius: BorderRadius.circular(16), ), child: Text( msg.text, style: const TextStyle(fontSize: 14, height: 1.5), ), ), ); }, ), ), ], ), bottomNavigationBar: SafeArea( top: false, child: Column( mainAxisSize: MainAxisSize.min, children: [ // 輸入列 Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), color: Colors.white, child: Row( children: [ IconButton( icon: const Icon(Icons.image_outlined), onPressed: () { // 這裡可加選擇圖片功能 }, ), Expanded( child: TextField( controller: _controller, decoration: const InputDecoration( hintText: '輸入訊息...', contentPadding: EdgeInsets.symmetric( horizontal: 16, vertical: 8, ), border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(20)), ), ), onSubmitted: (_) => _sendMessage(), ), ), const SizedBox(width: 8), ElevatedButton( onPressed: _sendMessage, style: ElevatedButton.styleFrom( backgroundColor: const Color(0xFF4CAF50), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20), ), ), child: const Text( '發送', style: TextStyle(fontSize: 16, color: Colors.white), ), ), ], ), ), ], ), ), resizeToAvoidBottomInset: true, // 鍵盤彈出時畫面會推上去 ); } @override void dispose() { _controller.dispose(); _scrollController.dispose(); super.dispose(); } }