这是CaiYouHui前端,一个关于flutter的安卓app,前端使用flutter实现

news_screen.dart 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. import 'package:flutter/material.dart';
  2. import '../../navigation/bottom_nav_bar.dart';
  3. class NewsScreen extends StatelessWidget {
  4. const NewsScreen({super.key});
  5. @override
  6. Widget build(BuildContext context) {
  7. return Scaffold(
  8. appBar: AppBar(
  9. title: const Text('资讯'),
  10. actions: [
  11. IconButton(
  12. icon: const Icon(Icons.search),
  13. onPressed: () {},
  14. ),
  15. ],
  16. ),
  17. body: ListView.builder(
  18. padding: const EdgeInsets.all(16),
  19. itemCount: 10,
  20. itemBuilder: (context, index) {
  21. return _buildNewsCard(index);
  22. },
  23. ),
  24. bottomNavigationBar: const BottomNavBar(initialIndex: 1),
  25. );
  26. }
  27. Widget _buildNewsCard(int index) {
  28. final titles = [
  29. 'Flutter 3.0 新特性详解',
  30. 'Dart 语言最新更新',
  31. '移动开发趋势分析',
  32. '前端框架对比',
  33. '用户体验设计原则',
  34. '后端架构最佳实践',
  35. '数据库性能优化',
  36. '云原生技术解析',
  37. '人工智能在移动端的应用',
  38. '跨平台开发方案比较',
  39. ];
  40. final subtitles = [
  41. '深入了解Flutter最新版本的重要更新和改进',
  42. 'Dart语言的最新特性和优化方向',
  43. '2024年移动开发的重要趋势和技术方向',
  44. '主流前端框架的优缺点对比分析',
  45. '提升应用用户体验的关键设计原则',
  46. '构建高性能后端服务的最佳实践',
  47. '数据库查询优化和性能调优技巧',
  48. '云原生技术在微服务中的应用',
  49. 'AI技术在移动应用中的创新应用',
  50. '各种跨平台开发方案的对比和选择',
  51. ];
  52. final times = [
  53. '2小时前',
  54. '5小时前',
  55. '昨天',
  56. '2天前',
  57. '3天前',
  58. '1周前',
  59. '1周前',
  60. '2周前',
  61. '2周前',
  62. '1个月前',
  63. ];
  64. return Card(
  65. margin: const EdgeInsets.only(bottom: 16),
  66. shape: RoundedRectangleBorder(
  67. borderRadius: BorderRadius.circular(12),
  68. ),
  69. child: InkWell(
  70. onTap: () {},
  71. borderRadius: BorderRadius.circular(12),
  72. child: Padding(
  73. padding: const EdgeInsets.all(16),
  74. child: Column(
  75. crossAxisAlignment: CrossAxisAlignment.start,
  76. children: [
  77. Row(
  78. children: [
  79. Container(
  80. width: 60,
  81. height: 60,
  82. decoration: BoxDecoration(
  83. color: Colors.primaries[index % Colors.primaries.length],
  84. borderRadius: BorderRadius.circular(8),
  85. ),
  86. child: Center(
  87. child: Text(
  88. '新闻',
  89. style: TextStyle(
  90. color: Colors.white,
  91. fontWeight: FontWeight.bold,
  92. ),
  93. ),
  94. ),
  95. ),
  96. const SizedBox(width: 16),
  97. Expanded(
  98. child: Column(
  99. crossAxisAlignment: CrossAxisAlignment.start,
  100. children: [
  101. Text(
  102. titles[index],
  103. style: const TextStyle(
  104. fontSize: 16,
  105. fontWeight: FontWeight.bold,
  106. ),
  107. maxLines: 2,
  108. overflow: TextOverflow.ellipsis,
  109. ),
  110. const SizedBox(height: 4),
  111. Text(
  112. subtitles[index],
  113. style: TextStyle(
  114. fontSize: 14,
  115. color: Colors.grey[600],
  116. ),
  117. maxLines: 2,
  118. overflow: TextOverflow.ellipsis,
  119. ),
  120. ],
  121. ),
  122. ),
  123. ],
  124. ),
  125. const SizedBox(height: 12),
  126. Row(
  127. children: [
  128. Icon(
  129. Icons.schedule,
  130. size: 14,
  131. color: Colors.grey[500],
  132. ),
  133. const SizedBox(width: 4),
  134. Text(
  135. times[index],
  136. style: TextStyle(
  137. fontSize: 12,
  138. color: Colors.grey[500],
  139. ),
  140. ),
  141. const Spacer(),
  142. IconButton(
  143. icon: Icon(
  144. Icons.bookmark_border,
  145. color: Colors.grey[500],
  146. ),
  147. onPressed: () {},
  148. iconSize: 20,
  149. ),
  150. IconButton(
  151. icon: Icon(
  152. Icons.share,
  153. color: Colors.grey[500],
  154. ),
  155. onPressed: () {},
  156. iconSize: 20,
  157. ),
  158. ],
  159. ),
  160. ],
  161. ),
  162. ),
  163. ),
  164. );
  165. }
  166. }