OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
e3cd746c 1 parent ab848169

修改样式，适配众妙页面

Inline Side-by-side
Showing 7 changed files with 204 additions and 67 deletions
...@@ -4,14 +4,25 @@ import 'package:one_poem/generated/json/category_item_entity.g.dart'; ...@@ -4,14 +4,25 @@ import 'package:one_poem/generated/json/category_item_entity.g.dart';
4 4
5 @JsonSerializable() 5 @JsonSerializable()
6 class CategoryItemEntity { 6 class CategoryItemEntity {
7 - late String icon; 7 + String? flag;
8 - late String title; 8 + @JSONField(name: "time_lunar")
9 - late int type; 9 + String? timeLunar;
10 + @JSONField(name: "time_solar")
11 + String? timeSolar;
12 + String? period;
13 + String? poem;
14 + String? author;
15 + @JSONField(name: "bg_image")
16 + String? bgImage;
10 17
11 CategoryItemEntity({ 18 CategoryItemEntity({
12 - this.icon = "", 19 + this.flag,
13 - this.title = "", 20 + this.timeLunar,
14 - this.type = 1, 21 + this.timeSolar,
22 + this.period,
23 + this.poem,
24 + this.author,
25 + this.bgImage,
15 }); 26 });
16 27
17 factory CategoryItemEntity.fromJson(Map<String, dynamic> json) => 28 factory CategoryItemEntity.fromJson(Map<String, dynamic> json) =>
......
...@@ -2,7 +2,6 @@ import 'package:flutter/material.dart'; ...@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
2 import 'package:one_poem/category/models/category_item_entity.dart'; 2 import 'package:one_poem/category/models/category_item_entity.dart';
3 import 'package:one_poem/category/provider/categories_page_provider.dart'; 3 import 'package:one_poem/category/provider/categories_page_provider.dart';
4 import 'package:one_poem/category/widgets/category_item.dart'; 4 import 'package:one_poem/category/widgets/category_item.dart';
5 -import 'package:one_poem/res/constant.dart';
6 import 'package:one_poem/widgets/my_refresh_list.dart'; 5 import 'package:one_poem/widgets/my_refresh_list.dart';
7 import 'package:one_poem/widgets/state_layout.dart'; 6 import 'package:one_poem/widgets/state_layout.dart';
8 import 'package:provider/provider.dart'; 7 import 'package:provider/provider.dart';
...@@ -33,27 +32,46 @@ class _CategoryListPageState extends State<CategoryListPage> { ...@@ -33,27 +32,46 @@ class _CategoryListPageState extends State<CategoryListPage> {
33 super.dispose(); 32 super.dispose();
34 } 33 }
35 34
36 - final List<String> _imgList = [
37 - 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3130502839,1206722360&fm=26&gp=0.jpg',
38 - if (Constant.isDriverTest)
39 - 'https://img2.baidu.com/it/u=3994371075,170872697&fm=26&fmt=auto&gp=0.jpg'
40 - else
41 - 'https://xxx', // 可以使用一张无效链接，触发缺省、异常显示图片
42 - 'https://img0.baidu.com/it/u=4049693009,2577412121&fm=224&fmt=auto&gp=0.jpg',
43 - 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3659255919,3211745976&fm=26&gp=0.jpg',
44 - 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2085939314,235211629&fm=26&gp=0.jpg',
45 - 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2441563887,1184810091&fm=26&gp=0.jpg'
46 - ];
47 -
48 Future _onRefresh() async { 35 Future _onRefresh() async {
49 await Future.delayed(const Duration(seconds: 2), () { 36 await Future.delayed(const Duration(seconds: 2), () {
50 setState(() { 37 setState(() {
51 _page = 1; 38 _page = 1;
52 - _list = List.generate( 39 + _list = [
53 - widget.index == 0 ? 3 : 10, 40 + CategoryItemEntity(
54 - (i) => CategoryItemEntity( 41 + flag: "此时",
55 - icon: _imgList[i % 6], title: '八月十五中秋月饼礼盒', type: i % 3), 42 + timeLunar: "辛丑牛年 庚子月 乙卯日 辰时",
56 - ); 43 + timeSolar: "2022年01月02日 09点22分",
44 + period: "冬",
45 + poem: "绿蚁新醅酒，红泥小火炉。\n晚来天欲雪，能饮一杯无？",
46 + author: "[唐]白居易《问刘十九》",
47 + bgImage: "assets/images/category/category_item_bg.jpeg",
48 + ),
49 + CategoryItemEntity(
50 + flag: "此地",
51 + timeLunar: "北京 海淀 万泉庄",
52 + period: "京",
53 + poem: "前不见古人，后不见来者。\n念天地之悠悠，独怆然而涕下！",
54 + author: "[唐]陈子昂《登幽州台歌》",
55 + bgImage: "",
56 + ),
57 + CategoryItemEntity(
58 + flag: "此乐",
59 + period: "茶",
60 + poem: "坐酌泠泠水，看煎瑟瑟尘。\n无由持一碗，寄与爱茶人。",
61 + author: "[唐]白居易《山泉煎茶有怀》",
62 + bgImage: "",
63 + ),
64 + CategoryItemEntity(
65 + flag: "此景",
66 + timeLunar: "辛丑牛年 庚子月 乙卯日 辰时",
67 + timeSolar: "2022年01月02日 09点22分",
68 + period: "天空",
69 + poem:
70 + "夏木多好鸟，偏知反舌名。\n林幽仍共宿，时过即无声。\n竹外天空晓，谿头雨自晴。\n居人宜寂寞，深院益凄清。\n入雾暗相失，当风闲易惊。\n来年上林苑，知尔最先鸣。",
71 + author: "[唐]张籍《徐州试反舌无声》",
72 + bgImage: "",
73 + ),
74 + ];
57 }); 75 });
58 _setCategoriesCount(_list.length); 76 _setCategoriesCount(_list.length);
59 }); 77 });
...@@ -66,7 +84,14 @@ class _CategoryListPageState extends State<CategoryListPage> { ...@@ -66,7 +84,14 @@ class _CategoryListPageState extends State<CategoryListPage> {
66 List.generate( 84 List.generate(
67 10, 85 10,
68 (i) => CategoryItemEntity( 86 (i) => CategoryItemEntity(
69 - icon: _imgList[i % 6], title: '八月十五中秋月饼礼盒', type: i % 3), 87 + flag: "此时",
88 + timeLunar: "辛丑牛年 庚子月 乙卯日 辰时",
89 + timeSolar: "2022年01月02日 09点22分",
90 + period: "冬",
91 + poem: "绿蚁新醅酒，红泥小火炉。\n晚来天欲雪，能饮一杯无？",
92 + author: "[唐]白居易《问刘十九》",
93 + bgImage: "",
94 + ),
70 ), 95 ),
71 ); 96 );
72 _page++; 97 _page++;
......
...@@ -27,22 +27,19 @@ class CategoryItem extends StatelessWidget { ...@@ -27,22 +27,19 @@ class CategoryItem extends StatelessWidget {
27 onTap: () { 27 onTap: () {
28 NavigatorUtils.push(context, '${PoemRouter.poemDetailPage}?id=100'); 28 NavigatorUtils.push(context, '${PoemRouter.poemDetailPage}?id=100');
29 }, 29 },
30 - child: Container( 30 + child: item.bgImage != null && item.bgImage != ""
31 - margin: EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px), 31 + ? Container(
32 - width: double.infinity, 32 + margin: EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px),
33 - decoration: BoxDecoration( 33 + width: double.infinity,
34 - color: Colors.grey.shade200.withOpacity(0.1),
35 - border: Border.all(color: Colors.grey, width: 0.5), // 边色与边宽度
36 - ),
37 - child: ClipRect(
38 - child: BackdropFilter(
39 - filter: ImageFilter.blur(
40 - sigmaX: 10.0,
41 - sigmaY: 10.0,
42 - ),
43 - child: Container(
44 decoration: BoxDecoration( 34 decoration: BoxDecoration(
45 - color: Colors.grey.shade200.withOpacity(0.1), 35 + image: DecorationImage(
36 + image: AssetImage(item.bgImage!),
37 + fit: BoxFit.fill,
38 + ),
39 + border: Border.all(
40 + color: Colors.grey,
41 + width: 0.5,
42 + ), //
46 ), 43 ),
47 child: Padding( 44 child: Padding(
48 padding: EdgeInsets.all(10.px), 45 padding: EdgeInsets.all(10.px),
...@@ -55,7 +52,7 @@ class CategoryItem extends StatelessWidget { ...@@ -55,7 +52,7 @@ class CategoryItem extends StatelessWidget {
55 //交叉轴的布局方式，对于column来说就是水平方向的布局方式 52 //交叉轴的布局方式，对于column来说就是水平方向的布局方式
56 crossAxisAlignment: CrossAxisAlignment.center, 53 crossAxisAlignment: CrossAxisAlignment.center,
57 children: <Widget>[ 54 children: <Widget>[
58 - const Text("此地"), 55 + Text(item.flag ?? "此地"),
59 // Icon( 56 // Icon(
60 // Icons.query_builder_outlined, 57 // Icons.query_builder_outlined,
61 // size: 15.0, 58 // size: 15.0,
...@@ -67,40 +64,124 @@ class CategoryItem extends StatelessWidget { ...@@ -67,40 +64,124 @@ class CategoryItem extends StatelessWidget {
67 Icons.room_outlined, 64 Icons.room_outlined,
68 size: 15.px, 65 size: 15.px,
69 ), 66 ),
70 - const Text( 67 + Text(
71 - "北京 海淀 万泉庄", 68 + item.timeLunar ?? "北京 海淀 万泉庄",
72 maxLines: 3, 69 maxLines: 3,
73 ), 70 ),
74 ], 71 ],
75 ), 72 ),
76 - const Text( 73 + Text(
77 - "冬", 74 + item.period ?? "冬",
78 - style: TextStyle( 75 + style: const TextStyle(
79 - fontSize: 30, fontFamily: "ZhiMangXing"), 76 + fontSize: 30,
77 + fontFamily: "ZhiMangXing",
78 + ),
80 ), 79 ),
81 ], 80 ],
82 ), 81 ),
83 Gaps.vGap16, 82 Gaps.vGap16,
84 Text( 83 Text(
85 - "前不见古人，后不见来者。\n念天地之悠悠，独怆然而涕下。\n", 84 + item.poem ?? "前不见古人，后不见来者。\n念天地之悠悠，独怆然而涕下。\n",
86 style: TextStyle( 85 style: TextStyle(
87 - fontSize: 22.px, fontFamily: "ZCOOLXiaoWei"), 86 + fontSize: 22.px,
87 + fontFamily: "ZCOOLXiaoWei",
88 + ),
88 ), 89 ),
90 + Gaps.vGap5,
89 Container( 91 Container(
90 width: double.infinity, 92 width: double.infinity,
91 alignment: Alignment.centerRight, 93 alignment: Alignment.centerRight,
92 - child: const Text( 94 + child: Text(
93 - "[唐] 陈子昂《登幽州台歌》", 95 + item.author ?? "[唐] 陈子昂《登幽州台歌》",
94 maxLines: 1, 96 maxLines: 1,
95 ), 97 ),
96 ), 98 ),
97 ], 99 ],
98 ), 100 ),
99 ), 101 ),
102 + )
103 + : Container(
104 + margin: EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px),
105 + width: double.infinity,
106 + decoration: BoxDecoration(
107 + color: Colors.grey.shade200.withOpacity(0.1),
108 + border: Border.all(
109 + color: Colors.grey,
110 + width: 0.5,
111 + ), // 边色与边宽度
112 + ),
113 + child: ClipRect(
114 + child: BackdropFilter(
115 + filter: ImageFilter.blur(
116 + sigmaX: 10.0,
117 + sigmaY: 10.0,
118 + ),
119 + child: Container(
120 + decoration: BoxDecoration(
121 + color: Colors.grey.shade200.withOpacity(0.1),
122 + ),
123 + child: Padding(
124 + padding: EdgeInsets.all(10.px),
125 + child: Column(
126 + crossAxisAlignment: CrossAxisAlignment.center,
127 + children: <Widget>[
128 + Row(
129 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
130 + mainAxisSize: MainAxisSize.max,
131 + //交叉轴的布局方式，对于column来说就是水平方向的布局方式
132 + crossAxisAlignment: CrossAxisAlignment.center,
133 + children: <Widget>[
134 + Text(item.flag ?? "此地"),
135 + // Icon(
136 + // Icons.query_builder_outlined,
137 + // size: 15.0,
138 + // ),
139 + Wrap(
140 + crossAxisAlignment: WrapCrossAlignment.center,
141 + children: [
142 + Icon(
143 + Icons.room_outlined,
144 + size: 15.px,
145 + ),
146 + Text(
147 + item.timeLunar ?? "北京 海淀 万泉庄",
148 + maxLines: 3,
149 + ),
150 + ],
151 + ),
152 + Text(
153 + item.period ?? "冬",
154 + style: const TextStyle(
155 + fontSize: 30,
156 + fontFamily: "ZhiMangXing",
157 + ),
158 + ),
159 + ],
160 + ),
161 + Gaps.vGap16,
162 + Text(
163 + item.poem ?? "前不见古人，后不见来者。\n念天地之悠悠，独怆然而涕下。\n",
164 + style: TextStyle(
165 + fontSize: 22.px,
166 + fontFamily: "ZCOOLXiaoWei",
167 + ),
168 + ),
169 + Gaps.vGap5,
170 + Container(
171 + width: double.infinity,
172 + alignment: Alignment.centerRight,
173 + child: Text(
174 + item.author ?? "[唐] 陈子昂《登幽州台歌》",
175 + maxLines: 1,
176 + ),
177 + ),
178 + ],
179 + ),
180 + ),
181 + ),
182 + ),
183 + ),
100 ), 184 ),
101 - ),
102 - ),
103 - ),
104 ); 185 );
105 } 186 }
106 } 187 }
......
...@@ -3,25 +3,45 @@ import 'package:one_poem/category/models/category_item_entity.dart'; ...@@ -3,25 +3,45 @@ import 'package:one_poem/category/models/category_item_entity.dart';
3 3
4 CategoryItemEntity $CategoryItemEntityFromJson(Map<String, dynamic> json) { 4 CategoryItemEntity $CategoryItemEntityFromJson(Map<String, dynamic> json) {
5 final CategoryItemEntity categoryItemEntity = CategoryItemEntity(); 5 final CategoryItemEntity categoryItemEntity = CategoryItemEntity();
6 - final String? icon = jsonConvert.convert<String>(json['icon']); 6 + final String? flag = jsonConvert.convert<String>(json['flag']);
7 - if (icon != null) { 7 + if (flag != null) {
8 - categoryItemEntity.icon = icon; 8 + categoryItemEntity.flag = flag;
9 } 9 }
10 - final String? title = jsonConvert.convert<String>(json['title']); 10 + final String? timeLunar = jsonConvert.convert<String>(json['time_lunar']);
11 - if (title != null) { 11 + if (timeLunar != null) {
12 - categoryItemEntity.title = title; 12 + categoryItemEntity.timeLunar = timeLunar;
13 } 13 }
14 - final int? type = jsonConvert.convert<int>(json['type']); 14 + final String? timeSolar = jsonConvert.convert<String>(json['time_solar']);
15 - if (type != null) { 15 + if (timeSolar != null) {
16 - categoryItemEntity.type = type; 16 + categoryItemEntity.timeSolar = timeSolar;
17 + }
18 + final String? period = jsonConvert.convert<String>(json['period']);
19 + if (period != null) {
20 + categoryItemEntity.period = period;
21 + }
22 + final String? poem = jsonConvert.convert<String>(json['poem']);
23 + if (poem != null) {
24 + categoryItemEntity.poem = poem;
25 + }
26 + final String? author = jsonConvert.convert<String>(json['author']);
27 + if (author != null) {
28 + categoryItemEntity.author = author;
29 + }
30 + final String? bgImage = jsonConvert.convert<String>(json['bg_image']);
31 + if (bgImage != null) {
32 + categoryItemEntity.bgImage = bgImage;
17 } 33 }
18 return categoryItemEntity; 34 return categoryItemEntity;
19 } 35 }
20 36
21 Map<String, dynamic> $CategoryItemEntityToJson(CategoryItemEntity entity) { 37 Map<String, dynamic> $CategoryItemEntityToJson(CategoryItemEntity entity) {
22 final Map<String, dynamic> data = <String, dynamic>{}; 38 final Map<String, dynamic> data = <String, dynamic>{};
23 - data['icon'] = entity.icon; 39 + data['flag'] = entity.flag;
24 - data['title'] = entity.title; 40 + data['time_lunar'] = entity.timeLunar;
25 - data['type'] = entity.type; 41 + data['time_solar'] = entity.timeSolar;
42 + data['period'] = entity.period;
43 + data['poem'] = entity.poem;
44 + data['author'] = entity.author;
45 + data['bg_image'] = entity.bgImage;
26 return data; 46 return data;
27 } 47 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -12,7 +12,7 @@ FriendEntity $FriendEntityFromJson(Map<String, dynamic> json) { ...@@ -12,7 +12,7 @@ FriendEntity $FriendEntityFromJson(Map<String, dynamic> json) {
12 12
13 Map<String, dynamic> $FriendEntityToJson(FriendEntity entity) { 13 Map<String, dynamic> $FriendEntityToJson(FriendEntity entity) {
14 final Map<String, dynamic> data = <String, dynamic>{}; 14 final Map<String, dynamic> data = <String, dynamic>{};
15 - data['data'] = entity.data!.map((v) => v.toJson()).toList(); 15 + data['data'] = entity.data?.map((v) => v.toJson()).toList();
16 return data; 16 return data;
17 } 17 }
18 18
......