Initial commit: Flutter 无书应用项目
This commit is contained in:
Developer
248
lib/views/responsive_home_page.dart
Normal file
248
lib/views/responsive_home_page.dart
Normal file
@@ -0,0 +1,248 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../utils/responsive_layout.dart';
|
||||
import '../widgets/responsive_widgets.dart';
|
||||
import '../constants/app_constants.dart';
|
||||
|
||||
class ResponsiveHomePage extends StatefulWidget {
|
||||
const ResponsiveHomePage({super.key});
|
||||
|
||||
@override
|
||||
State<ResponsiveHomePage> createState() => _ResponsiveHomePageState();
|
||||
}
|
||||
|
||||
class _ResponsiveHomePageState extends State<ResponsiveHomePage> {
|
||||
String _layoutMode = AppConstants.gridLayout;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ResponsiveScaffold(
|
||||
title: AppConstants.appTitle,
|
||||
body: ResponsiveContainer(
|
||||
child: Column(
|
||||
children: [
|
||||
_buildHeader(context),
|
||||
const SizedBox(height: 24),
|
||||
_buildContent(context),
|
||||
],
|
||||
),
|
||||
),
|
||||
floatingActionButton: ResponsiveLayout.isMobile(context)
|
||||
? FloatingActionButton(
|
||||
onPressed: _toggleLayout,
|
||||
child: const Icon(Icons.grid_view),
|
||||
)
|
||||
: null,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHeader(BuildContext context) {
|
||||
return ResponsiveContainer(
|
||||
padding: EdgeInsets.symmetric(
|
||||
vertical: ResponsiveLayout.isMobile(context) ? 16 : 24,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'欢迎使用 Poes',
|
||||
style: Theme.of(context).textTheme.headlineLarge?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'这是一个响应式布局的示例页面',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Colors.grey[600],
|
||||
),
|
||||
),
|
||||
if (!ResponsiveLayout.isMobile(context)) ...[
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
ResponsiveButton(
|
||||
text: '网格布局',
|
||||
onPressed: () => _changeLayout(AppConstants.gridLayout),
|
||||
backgroundColor: _layoutMode == AppConstants.gridLayout
|
||||
? AppConstants.primaryColor
|
||||
: Colors.grey[300],
|
||||
textColor: _layoutMode == AppConstants.gridLayout
|
||||
? Colors.white
|
||||
: Colors.black,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
ResponsiveButton(
|
||||
text: '列表布局',
|
||||
onPressed: () => _changeLayout(AppConstants.listLayout),
|
||||
backgroundColor: _layoutMode == AppConstants.listLayout
|
||||
? AppConstants.primaryColor
|
||||
: Colors.grey[300],
|
||||
textColor: _layoutMode == AppConstants.listLayout
|
||||
? Colors.white
|
||||
: Colors.black,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildContent(BuildContext context) {
|
||||
if (_layoutMode == AppConstants.gridLayout) {
|
||||
return _buildGridLayout(context);
|
||||
} else {
|
||||
return _buildListLayout(context);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildGridLayout(BuildContext context) {
|
||||
final items = List.generate(12, (index) => index);
|
||||
|
||||
return ResponsiveGrid(
|
||||
mobileColumns: 2,
|
||||
tabletColumns: 3,
|
||||
desktopColumns: 4,
|
||||
largeDesktopColumns: 6,
|
||||
spacing: ResponsiveLayout.isMobile(context) ? 12 : 16,
|
||||
padding: EdgeInsets.zero,
|
||||
children: items.map((index) => _buildCard(context, index)).toList(),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildListLayout(BuildContext context) {
|
||||
final items = List.generate(12, (index) => index);
|
||||
|
||||
return ListView.separated(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
itemCount: items.length,
|
||||
separatorBuilder: (context, index) => const SizedBox(height: 12),
|
||||
itemBuilder: (context, index) => _buildListCard(context, index),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCard(BuildContext context, int index) {
|
||||
return ResponsiveCard(
|
||||
onTap: () => _showItemDetails(context, index),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
width: double.infinity,
|
||||
height: ResponsiveLayout.isMobile(context) ? 80 : 120,
|
||||
decoration: BoxDecoration(
|
||||
color: AppConstants.primaryColor.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.widgets,
|
||||
size: ResponsiveLayout.isMobile(context) ? 32 : 48,
|
||||
color: AppConstants.primaryColor,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'项目 ${index + 1}',
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'这是项目 ${index + 1} 的描述信息',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Colors.grey[600],
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildListCard(BuildContext context, int index) {
|
||||
return ResponsiveCard(
|
||||
onTap: () => _showItemDetails(context, index),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: ResponsiveLayout.isMobile(context) ? 60 : 80,
|
||||
height: ResponsiveLayout.isMobile(context) ? 60 : 80,
|
||||
decoration: BoxDecoration(
|
||||
color: AppConstants.primaryColor.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.widgets,
|
||||
size: ResponsiveLayout.isMobile(context) ? 24 : 32,
|
||||
color: AppConstants.primaryColor,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'项目 ${index + 1}',
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'这是项目 ${index + 1} 的详细描述信息，包含了更多的内容展示',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Colors.grey[600],
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Icon(
|
||||
Icons.arrow_forward_ios,
|
||||
size: ResponsiveLayout.isMobile(context) ? 16 : 20,
|
||||
color: Colors.grey[400],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _changeLayout(String layoutMode) {
|
||||
setState(() {
|
||||
_layoutMode = layoutMode;
|
||||
});
|
||||
}
|
||||
|
||||
void _toggleLayout() {
|
||||
setState(() {
|
||||
_layoutMode = _layoutMode == AppConstants.gridLayout
|
||||
? AppConstants.listLayout
|
||||
: AppConstants.gridLayout;
|
||||
});
|
||||
}
|
||||
|
||||
void _showItemDetails(BuildContext context, int index) {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: Text('项目 ${index + 1}'),
|
||||
content: Text(
|
||||
'这是项目 ${index + 1} 的详细信息。在响应式布局中，这个对话框会根据屏幕大小自动调整。',
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('关闭'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user