homepage連結到messqgepage(切換畫面)

This commit is contained in:
kuei
2024-09-04 10:27:59 +08:00
parent 7fb6d59c1c
commit d2a2030979
2 changed files with 157 additions and 69 deletions

View File

@@ -146,10 +146,14 @@ class _HomePageState extends State<HomePage> {
initTabIndex: 2,
)),
);
} else if (label == '123') {
} else if (label == '切換畫面') {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => TryPage()),
MaterialPageRoute
(builder: (context) => BottomNavBar(
email: widget.email,
initTabIndex: 3,
)),
);
} else if (label == '個人資料') {
Navigator.push(

View File

@@ -1,6 +1,8 @@
import 'package:flutter/material.dart';
import 'package:mysql_client/mysql_client.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'BottomNavBar.dart';
class MessagePage extends StatefulWidget {
final String email; // 接收來自上個頁面的 email
@@ -11,84 +13,166 @@ class MessagePage extends StatefulWidget {
}
class _MessagePageState extends State<MessagePage> {
List<Map<String, dynamic>> _results = [];
late WebViewController _webViewController;
@override
void initState() {
super.initState();
_fetchData(); // 連接資料庫並抓取資料
}
void _fetchData() async {
print('connect');
final conn = await MySQLConnection.createConnection(
host: '203.64.84.154',
port: 33061,
userName: 'root',
password: 'Topic@2024',
databaseName: 'care',
);
await conn.connect();
try {
var result = await conn.execute('SELECT eName, eGender FROM Elder');
print('Result: ${result.length} rows found.');
if (result.rows.isEmpty) {
print('No data found in users table.');
} else {
setState(() {
_results = result.rows
.map((row) => {
'name': row.colAt(0),
'gender': row.colAt(1),
})
.toList();
});
}
} catch (e) {
print('Error: $e');
} finally {
await conn.close();
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
/*appBar: AppBar(
title: Text('MySQL Data'), // 顯示標題
backgroundColor: Color(0xFFF5E3C3),
),*/
body: Column(
children: [
Container(
height: 100,
color: Color(0xFFF5E3C3),
width: double.infinity,
padding: EdgeInsets.all(10.0),
child: Center(
child: Text(
'切換畫面',
style: TextStyle(fontSize: 24, height: 5),
return PopScope(
child: Scaffold(
body: Center(
child: Column(
children: [
Container(
height: 100,
// APPBar height
color: Color(0xFFF5E3C3),
width: double.infinity,
padding: EdgeInsets.all(10.0),
child: Stack(children: [
Container(
padding: EdgeInsets.only(
left: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.height / 2,
),
child: Icon(Icons.settings, size: 48, color: Colors.orange),
),
Center(
child: Text(
'全方位照護守護者',
style: TextStyle(fontSize: 24, height: 5),
),
),
])),
Container(
color: Color(0xFFFFF0E0),
margin: EdgeInsets.only(top: 5),
padding: EdgeInsets.all(16),
child: Column(
children: [
Container(
height: 240,
width: double.infinity,
// TODO: 如果用http需要分別設定ios, android權限
// TODO: 替換video_player to flutter_webView
child: WebViewWidget(
controller: WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(
NavigationDelegate(
onProgress: (int progress) {
// Update loading bar.
},
onPageStarted: (String url) {},
onPageFinished: (String url) {},
onHttpError: (HttpResponseError error) {
print("httpError");
},
onWebResourceError: (WebResourceError error) {
print("httpResourceError");
print(error.description);
},
onNavigationRequest: (NavigationRequest request) {
if (request.url.startsWith(
'http://203.64.84.154:8088/video_feed')) {
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
),
)
..loadRequest(Uri.parse('http://203.64.84.154:8088')),
),
),
Text(
'即時畫面',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
],
),
),
),
Expanded(
child: GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.all(16),
children: [
_buildGridItem(Icons.monitor_outlined, '畫面1', context),
_buildGridItem(Icons.monitor_outlined, '畫面2', context),
/*_buildGridItem(Icons.monitor_outlined, '切換畫面', context),
_buildGridItem(Icons.person_sharp, '個人資料', context),*/
],
),
),
],
),
Expanded(
child: ListView.builder(
padding: EdgeInsets.symmetric(vertical: 5), // 调整列表视图的 padding
itemCount: _results.length, // 列表項目數量
itemBuilder: (context, index) {
final user = _results[index];
return ListTile(
title: Text(user['name']), // 顯示名稱
subtitle: Text('gender: ${user['gender']}'), // 顯示性別
);
},
),
),
),
canPop: false,
);
}
Widget _buildGridItem(IconData icon, String label, BuildContext context) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.white,
child: InkWell(
onTap: () {
/*if (label == '跌倒紀錄') {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BottomNavBar(
email: widget.email,
initTabIndex: 1,
)),
);
} else if (label == '知識補充') {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BottomNavBar(
email: widget.email,
initTabIndex: 2,
)),
);
} else if (label == '切換畫面') {
Navigator.push(
context,
MaterialPageRoute
(builder: (context) => BottomNavBar(
email: widget.email,
initTabIndex: 3,
)),
);
} else if (label == '個人資料') {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BottomNavBar(
email: widget.email,
initTabIndex: 4,
)),
);
}*/
},
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 48, color: Colors.orange),
SizedBox(height: 8),
Text(label, style: TextStyle(fontSize: 16)),
],
),
],
),
),
);
}