feat: app 端 ui 设计完成
This commit is contained in:
liqupan
179
wei_ai_app/lib/screens/main/main_screen.dart
Normal file
179
wei_ai_app/lib/screens/main/main_screen.dart
Normal file
@@ -0,0 +1,179 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:lucide_icons/lucide_icons.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import '../../widgets/status_bar.dart';
|
||||
import '../../providers/device_provider.dart';
|
||||
import '../../widgets/glass_bottom_nav.dart';
|
||||
|
||||
class MainScreen extends ConsumerStatefulWidget {
|
||||
final StatefulNavigationShell navigationShell;
|
||||
|
||||
const MainScreen({
|
||||
super.key,
|
||||
required this.navigationShell,
|
||||
});
|
||||
|
||||
@override
|
||||
ConsumerState<MainScreen> createState() => _MainScreenState();
|
||||
}
|
||||
|
||||
class _MainScreenState extends ConsumerState<MainScreen> {
|
||||
void _goBranch(int index) {
|
||||
widget.navigationShell.goBranch(
|
||||
index,
|
||||
initialLocation: index == widget.navigationShell.currentIndex,
|
||||
);
|
||||
}
|
||||
|
||||
Map<String, String> _getPageTitle(int index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return {'title': '专属推荐', 'subtitle': '基于偏好生成的私密匹配列表'};
|
||||
case 1:
|
||||
return {'title': '剧本馆', 'subtitle': '沉浸式感官体验库'};
|
||||
case 2:
|
||||
return {'title': '手动实验室', 'subtitle': '实时触觉反馈控制'};
|
||||
case 3:
|
||||
return {'title': '个人中心', 'subtitle': 'ID: 884-291-00X'};
|
||||
default:
|
||||
return {'title': 'Wei AI', 'subtitle': ''};
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final pageMeta = _getPageTitle(widget.navigationShell.currentIndex);
|
||||
|
||||
return Container(
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFF2E1065), // Fallback
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
Color(0xFF2E1065), // #2e1065
|
||||
Color(0xFF4C1D95), // #4c1d95
|
||||
Color(0xFF831843), // #831843
|
||||
],
|
||||
stops: [0.0, 0.4, 1.0],
|
||||
),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
// Radial Gradient 1 (Top Left)
|
||||
Positioned(
|
||||
top: -100,
|
||||
left: -100,
|
||||
child: Container(
|
||||
width: 500, // Larger size for smoother gradient
|
||||
height: 500,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(
|
||||
colors: [
|
||||
const Color(0xFFA855F7).withOpacity(0.4), // rgba(168, 85, 247, 0.4)
|
||||
Colors.transparent,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// Radial Gradient 2 (Top Right)
|
||||
Positioned(
|
||||
top: -100,
|
||||
right: -100,
|
||||
child: Container(
|
||||
width: 500,
|
||||
height: 500,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(
|
||||
colors: [
|
||||
const Color(0xFFEC4899).withOpacity(0.3), // rgba(236, 72, 153, 0.3)
|
||||
Colors.transparent,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Scaffold
|
||||
Scaffold(
|
||||
backgroundColor: Colors.transparent,
|
||||
extendBody: true, // Important for glass nav
|
||||
extendBodyBehindAppBar: false, // Body starts below AppBar naturally
|
||||
appBar: AppBar(
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
titleSpacing: 20,
|
||||
title: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
const Icon(LucideIcons.hexagon, size: 12, color: Colors.white70),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
'WEI AI',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 2,
|
||||
color: Colors.white.withOpacity(0.8),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
pageMeta['title']!,
|
||||
style: const TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white,
|
||||
shadows: [Shadow(color: Colors.black26, offset: Offset(0, 2), blurRadius: 4)]
|
||||
)
|
||||
),
|
||||
],
|
||||
),
|
||||
centerTitle: false,
|
||||
toolbarHeight: 90, // Increased toolbar height to accommodate subtitle
|
||||
actions: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 20.0, top: 20), // Adjusted top padding to align with title
|
||||
child: StatusBar(
|
||||
status: ref.watch(deviceProvider),
|
||||
onTap: () {
|
||||
ref.read(deviceProvider.notifier).toggleConnection();
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
bottom: pageMeta['subtitle']!.isNotEmpty ? PreferredSize(
|
||||
preferredSize: const Size.fromHeight(20),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 20, bottom: 10),
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
pageMeta['subtitle']!,
|
||||
style: TextStyle(fontSize: 10, color: Colors.white.withOpacity(0.6)),
|
||||
),
|
||||
),
|
||||
),
|
||||
) : null,
|
||||
),
|
||||
body: widget.navigationShell,
|
||||
bottomNavigationBar: GlassBottomNav(
|
||||
currentIndex: widget.navigationShell.currentIndex,
|
||||
onTap: _goBranch,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user