Initial commit: Flutter 无书应用项目
This commit is contained in:
Developer
167
lib/views/active/category_page.dart
Normal file
167
lib/views/active/category_page.dart
Normal file
@@ -0,0 +1,167 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../constants/app_constants.dart';
|
||||
import '../../utils/responsive_layout.dart';
|
||||
|
||||
/// 时间: 2026-03-25
|
||||
/// 功能: 分类页面
|
||||
/// 介绍: 展示诗词分类，包括场景分类和朝代分类
|
||||
/// 最新变化: 新建分类页面，支持场景和朝代两大分类
|
||||
|
||||
class CategoryPage extends StatefulWidget {
|
||||
const CategoryPage({super.key});
|
||||
|
||||
@override
|
||||
State<CategoryPage> createState() => _CategoryPageState();
|
||||
}
|
||||
|
||||
class _CategoryPageState extends State<CategoryPage> with SingleTickerProviderStateMixin {
|
||||
late TabController _tabController;
|
||||
final List<String> _tabCategories = ['场景分类', '朝代分类'];
|
||||
|
||||
static const sceneData = {
|
||||
"节日": ["七夕节", "中秋节", "元宵节", "寒食节", "清明节", "端午节", "重阳节", "春节", "节日"],
|
||||
"季节": ["三月", "二月", "冬天", "夏天", "春天", "春季", "秋天"],
|
||||
"古籍": ["三国志", "三国演义", "三字经", "中庸", "列子", "史记", "后汉书", "吕氏春秋", "商君书", "围炉夜话", "增广贤文", "墨子", "孙子兵法", "孟子", "小窗幽记", "尚书", "左传", "幼学琼林", "庄子", "战国策", "文心雕龙", "易传", "晋书", "汉书", "淮南子", "礼记", "管子", "红楼梦", "老子", "荀子", "菜根谭", "警世通言", "论语", "资治通鉴", "韩非子", "鬼谷子", "古籍", "格言联璧"],
|
||||
"情感": ["伤感", "励志", "友情", "思乡", "思念", "感恩", "爱国", "爱情", "离别"],
|
||||
"景物": ["庐山", "泰山", "西湖", "长江", "黄河", "边塞", "田园", "山水", "夜景"],
|
||||
"天文气象": ["写云", "写雨", "写雪", "写风", "星星", "月亮", "流星"],
|
||||
"动植物": ["写鸟", "柳树", "桃花", "梅花", "竹子", "荷花", "菊花"],
|
||||
"语言文学": ["对联", "谚语", "一言", "读书", "哲理"],
|
||||
"其他": ["母亲", "老师", "户外", "礼物", "酒"]
|
||||
};
|
||||
|
||||
static const dynastyData = {
|
||||
"主要朝代": ["唐代", "宋代", "元代", "明代", "清代"],
|
||||
"古代朝代": ["南北朝", "五代", "隋代"],
|
||||
"近现代": ["近现代", "用户投稿", "管理员测试"],
|
||||
"其他": ["暂无朝代"]
|
||||
};
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_tabController = TabController(length: _tabCategories.length, vsync: this);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_tabController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isDesktop = ResponsiveLayout.isDesktop(context);
|
||||
final isTablet = ResponsiveLayout.isTablet(context);
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
|
||||
body: Column(
|
||||
children: [
|
||||
// 自定义标题栏
|
||||
|
||||
// Tab栏
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: TabBar(
|
||||
controller: _tabController,
|
||||
tabs: _tabCategories.map((category) => Tab(text: category)).toList(),
|
||||
labelColor: AppConstants.primaryColor,
|
||||
unselectedLabelColor: Colors.grey[600],
|
||||
indicatorColor: AppConstants.primaryColor,
|
||||
indicatorWeight: 3,
|
||||
labelStyle: const TextStyle(fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
// 内容区域
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
controller: _tabController,
|
||||
children: [
|
||||
_buildCategoryGrid(sceneData, '场景分类'),
|
||||
_buildCategoryGrid(dynastyData, '朝代分类'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCategoryGrid(Map<String, List<String>> data, String categoryType) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: ListView.builder(
|
||||
itemCount: data.keys.length,
|
||||
itemBuilder: (context, index) {
|
||||
final category = data.keys.elementAt(index);
|
||||
final items = data[category]!;
|
||||
|
||||
return Card(
|
||||
margin: const EdgeInsets.only(bottom: 16.0),
|
||||
elevation: 2,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
category,
|
||||
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Theme.of(context).primaryColor,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: items.map((item) {
|
||||
return _buildCategoryChip(item, categoryType);
|
||||
}).toList(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCategoryChip(String label, String categoryType) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
// TODO: 跳转到对应分类的诗词列表页面
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('点击了 $label'),
|
||||
duration: const Duration(seconds: 1),
|
||||
),
|
||||
);
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).primaryColor.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(
|
||||
color: Theme.of(context).primaryColor.withValues(alpha: 0.3),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).primaryColor,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user