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

news_screen.dart 6.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. import 'package:flutter/material.dart';
  2. import '../../navigation/bottom_nav_bar.dart';
  3. import '../../widgets/common/app_search_bar.dart';
  4. class NewsScreen extends StatelessWidget {
  5. const NewsScreen({super.key});
  6. @override
  7. Widget build(BuildContext context) {
  8. return Scaffold(
  9. appBar: AppBar(
  10. title: const Text('推荐'),
  11. ),
  12. body: SingleChildScrollView(
  13. padding: const EdgeInsets.all(20),
  14. child: Column(
  15. crossAxisAlignment: CrossAxisAlignment.start,
  16. children: [
  17. // 使用 StatefulWidget 搜索框
  18. SearchBarCustom(
  19. hintText: '搜索...',
  20. onSearch: (query) {
  21. // 处理搜索逻辑
  22. // print('搜索: $query');
  23. },
  24. onChanged: (query) {
  25. // 实时搜索
  26. // print('输入变化: $query');
  27. },
  28. onClear: () {
  29. // print('清除搜索');
  30. },
  31. ),
  32. const SizedBox(height: 24),
  33. // 推荐列表
  34. ListView.builder(
  35. shrinkWrap: true,
  36. physics: const NeverScrollableScrollPhysics(),
  37. itemCount: 10,
  38. itemBuilder: (context, index) {
  39. return _buildNewsCard(index);
  40. },
  41. ),
  42. ],
  43. ),
  44. ),
  45. bottomNavigationBar: const BottomNavBar(initialIndex: 1),
  46. );
  47. }
  48. Widget _buildNewsCard(int index) {
  49. final titles = [
  50. '体彩 大乐透 20260001期',
  51. '福彩 双色球 20260002期',
  52. '福彩 双色球 20260003期',
  53. '体彩 大乐透 20260004期',
  54. '福彩 双色球 20260005期',
  55. '福彩 双色球 20260007期',
  56. '体彩 大乐透 20260006期',
  57. '福彩 双色球 20260008期',
  58. '福彩 双色球 20260009期',
  59. '福彩 快乐八 20260010期',
  60. ];
  61. final subtitles = [
  62. '预测号码:4 5 8 6 25 8 9 6',
  63. '预测号码:4 5 8 6 25 8 9 6',
  64. '预测号码:4 5 8 6 25 8 9 6',
  65. '预测号码:4 5 8 6 25 8 9 6',
  66. '预测号码:4 5 8 6 25 8 9 6',
  67. '预测号码:4 5 8 6 25 8 9 6',
  68. '预测号码:4 5 8 6 25 8 9 6',
  69. '预测号码:4 5 8 6 25 8 9 6',
  70. '预测号码:4 5 8 6 25 8 9 6',
  71. '预测号码:4 5 8 6 25 8 9 6',
  72. ];
  73. final times = [
  74. '2小时前 :aaa',
  75. '5小时前 :aaa',
  76. '昨天 :aaa',
  77. '2天前 :aaa',
  78. '3天前 :aaa',
  79. '1周前 :aaa',
  80. '1周前 :aaa',
  81. '2周前 :aaa',
  82. '2周前 :aaa',
  83. '1个月前 :aaa',
  84. ];
  85. return Card(
  86. margin: const EdgeInsets.only(bottom: 16),
  87. shape: RoundedRectangleBorder(
  88. borderRadius: BorderRadius.circular(12),
  89. ),
  90. child: InkWell(
  91. onTap: () {
  92. print(index);
  93. },
  94. borderRadius: BorderRadius.circular(12),
  95. child: Padding(
  96. padding: const EdgeInsets.all(16),
  97. child: Column(
  98. crossAxisAlignment: CrossAxisAlignment.start,
  99. children: [
  100. Row(
  101. children: [
  102. Container(
  103. width: 60,
  104. height: 60,
  105. decoration: BoxDecoration(
  106. color: Colors.primaries[index % Colors.primaries.length],
  107. borderRadius: BorderRadius.circular(8),
  108. ),
  109. child: Center(
  110. child: Text(
  111. '推号',
  112. style: TextStyle(
  113. color: Colors.white,
  114. fontWeight: FontWeight.bold,
  115. ),
  116. ),
  117. ),
  118. ),
  119. const SizedBox(width: 16),
  120. Expanded(
  121. child: Column(
  122. crossAxisAlignment: CrossAxisAlignment.start,
  123. children: [
  124. Text(
  125. titles[index],
  126. style: const TextStyle(
  127. fontSize: 18,
  128. fontWeight: FontWeight.bold,
  129. ),
  130. maxLines: 2,
  131. overflow: TextOverflow.ellipsis,
  132. ),
  133. const SizedBox(height: 4),
  134. Text(
  135. subtitles[index],
  136. style: TextStyle(
  137. fontSize: 16,
  138. color: Colors.grey[600],
  139. ),
  140. maxLines: 2,
  141. overflow: TextOverflow.ellipsis,
  142. ),
  143. ],
  144. ),
  145. ),
  146. ],
  147. ),
  148. const SizedBox(height: 4),
  149. Row(
  150. children: [
  151. Icon(
  152. Icons.schedule,
  153. size: 16,
  154. color: Colors.grey[500],
  155. ),
  156. const SizedBox(width: 4),
  157. Text(
  158. times[index],
  159. style: TextStyle(
  160. fontSize: 14,
  161. color: Colors.grey[500],
  162. ),
  163. ),
  164. const Spacer(),
  165. IconButton(
  166. icon: Icon(
  167. Icons.bookmark_border,
  168. color: Colors.grey[500],
  169. ),
  170. onPressed: () {
  171. // 添加书签
  172. },
  173. iconSize: 20,
  174. ),
  175. IconButton(
  176. icon: Icon(
  177. Icons.share,
  178. color: Colors.grey[500],
  179. ),
  180. onPressed: () {
  181. // 分享
  182. },
  183. iconSize: 20,
  184. ),
  185. ],
  186. ),
  187. ],
  188. ),
  189. ),
  190. ),
  191. );
  192. }
  193. }