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';
@JsonSerializable()
class CategoryItemEntity {
late String icon;
late String title;
late int type;
String? flag;
@JSONField(name: "time_lunar")
String? timeLunar;
@JSONField(name: "time_solar")
String? timeSolar;
String? period;
String? poem;
String? author;
@JSONField(name: "bg_image")
String? bgImage;
CategoryItemEntity({
this.icon = "",
this.title = "",
this.type = 1,
this.flag,
this.timeLunar,
this.timeSolar,
this.period,
this.poem,
this.author,
this.bgImage,
});
factory CategoryItemEntity.fromJson(Map<String, dynamic> json) =>
......
......@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
import 'package:one_poem/category/models/category_item_entity.dart';
import 'package:one_poem/category/provider/categories_page_provider.dart';
import 'package:one_poem/category/widgets/category_item.dart';
import 'package:one_poem/res/constant.dart';
import 'package:one_poem/widgets/my_refresh_list.dart';
import 'package:one_poem/widgets/state_layout.dart';
import 'package:provider/provider.dart';
......@@ -33,27 +32,46 @@ class _CategoryListPageState extends State<CategoryListPage> {
super.dispose();
}
final List<String> _imgList = [
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3130502839,1206722360&fm=26&gp=0.jpg',
if (Constant.isDriverTest)
'https://img2.baidu.com/it/u=3994371075,170872697&fm=26&fmt=auto&gp=0.jpg'
else
'https://xxx', // 可以使用一张无效链接，触发缺省、异常显示图片
'https://img0.baidu.com/it/u=4049693009,2577412121&fm=224&fmt=auto&gp=0.jpg',
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3659255919,3211745976&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2085939314,235211629&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2441563887,1184810091&fm=26&gp=0.jpg'
];
Future _onRefresh() async {
await Future.delayed(const Duration(seconds: 2), () {
setState(() {
_page = 1;
_list = List.generate(
widget.index == 0 ? 3 : 10,
(i) => CategoryItemEntity(
icon: _imgList[i % 6], title: '八月十五中秋月饼礼盒', type: i % 3),
);
_list = [
CategoryItemEntity(
flag: "此时",
timeLunar: "辛丑牛年 庚子月 乙卯日 辰时",
timeSolar: "2022年01月02日 09点22分",
period: "冬",
poem: "绿蚁新醅酒，红泥小火炉。\n晚来天欲雪，能饮一杯无？",
author: "[唐]白居易《问刘十九》",
bgImage: "assets/images/category/category_item_bg.jpeg",
),
CategoryItemEntity(
flag: "此地",
timeLunar: "北京 海淀 万泉庄",
period: "京",
poem: "前不见古人，后不见来者。\n念天地之悠悠，独怆然而涕下！",
author: "[唐]陈子昂《登幽州台歌》",
bgImage: "",
),
CategoryItemEntity(
flag: "此乐",
period: "茶",
poem: "坐酌泠泠水，看煎瑟瑟尘。\n无由持一碗，寄与爱茶人。",
author: "[唐]白居易《山泉煎茶有怀》",
bgImage: "",
),
CategoryItemEntity(
flag: "此景",
timeLunar: "辛丑牛年 庚子月 乙卯日 辰时",
timeSolar: "2022年01月02日 09点22分",
period: "天空",
poem:
"夏木多好鸟，偏知反舌名。\n林幽仍共宿，时过即无声。\n竹外天空晓，谿头雨自晴。\n居人宜寂寞，深院益凄清。\n入雾暗相失，当风闲易惊。\n来年上林苑，知尔最先鸣。",
author: "[唐]张籍《徐州试反舌无声》",
bgImage: "",
),
];
});
_setCategoriesCount(_list.length);
});
......@@ -66,7 +84,14 @@ class _CategoryListPageState extends State<CategoryListPage> {
List.generate(
10,
(i) => CategoryItemEntity(
icon: _imgList[i % 6], title: '八月十五中秋月饼礼盒', type: i % 3),
flag: "此时",
timeLunar: "辛丑牛年 庚子月 乙卯日 辰时",
timeSolar: "2022年01月02日 09点22分",
period: "冬",
poem: "绿蚁新醅酒，红泥小火炉。\n晚来天欲雪，能饮一杯无？",
author: "[唐]白居易《问刘十九》",
bgImage: "",
),
),
);
_page++;
......
......@@ -27,22 +27,19 @@ class CategoryItem extends StatelessWidget {
onTap: () {
NavigatorUtils.push(context, '${PoemRouter.poemDetailPage}?id=100');
},
child: Container(
margin: EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px),
width: double.infinity,
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.1),
border: Border.all(color: Colors.grey, width: 0.5), // 边色与边宽度
),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
child: item.bgImage != null && item.bgImage != ""
? Container(
margin: EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px),
width: double.infinity,
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.1),
image: DecorationImage(
image: AssetImage(item.bgImage!),
fit: BoxFit.fill,
),
border: Border.all(
color: Colors.grey,
width: 0.5,
), //
),
child: Padding(
padding: EdgeInsets.all(10.px),
......@@ -55,7 +52,7 @@ class CategoryItem extends StatelessWidget {
//交叉轴的布局方式，对于column来说就是水平方向的布局方式
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Text("此地"),
Text(item.flag ?? "此地"),
// Icon(
// Icons.query_builder_outlined,
// size: 15.0,
......@@ -67,40 +64,124 @@ class CategoryItem extends StatelessWidget {
Icons.room_outlined,
size: 15.px,
),
const Text(
"北京 海淀 万泉庄",
Text(
item.timeLunar ?? "北京 海淀 万泉庄",
maxLines: 3,
),
],
),
const Text(
"冬",
style: TextStyle(
fontSize: 30, fontFamily: "ZhiMangXing"),
Text(
item.period ?? "冬",
style: const TextStyle(
fontSize: 30,
fontFamily: "ZhiMangXing",
),
),
],
),
Gaps.vGap16,
Text(
"前不见古人，后不见来者。\n念天地之悠悠，独怆然而涕下。\n",
item.poem ?? "前不见古人，后不见来者。\n念天地之悠悠，独怆然而涕下。\n",
style: TextStyle(
fontSize: 22.px, fontFamily: "ZCOOLXiaoWei"),
fontSize: 22.px,
fontFamily: "ZCOOLXiaoWei",
),
),
Gaps.vGap5,
Container(
width: double.infinity,
alignment: Alignment.centerRight,
child: const Text(
"[唐] 陈子昂《登幽州台歌》",
child: Text(
item.author ?? "[唐] 陈子昂《登幽州台歌》",
maxLines: 1,
),
),
],
),
),
)
: Container(
margin: EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px),
width: double.infinity,
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.1),
border: Border.all(
color: Colors.grey,
width: 0.5,
), // 边色与边宽度
),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.1),
),
child: Padding(
padding: EdgeInsets.all(10.px),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
//交叉轴的布局方式，对于column来说就是水平方向的布局方式
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(item.flag ?? "此地"),
// Icon(
// Icons.query_builder_outlined,
// size: 15.0,
// ),
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Icon(
Icons.room_outlined,
size: 15.px,
),
Text(
item.timeLunar ?? "北京 海淀 万泉庄",
maxLines: 3,
),
],
),
Text(
item.period ?? "冬",
style: const TextStyle(
fontSize: 30,
fontFamily: "ZhiMangXing",
),
),
],
),
Gaps.vGap16,
Text(
item.poem ?? "前不见古人，后不见来者。\n念天地之悠悠，独怆然而涕下。\n",
style: TextStyle(
fontSize: 22.px,
fontFamily: "ZCOOLXiaoWei",
),
),
Gaps.vGap5,
Container(
width: double.infinity,
alignment: Alignment.centerRight,
child: Text(
item.author ?? "[唐] 陈子昂《登幽州台歌》",
maxLines: 1,
),
),
],
),
),
),
),
),
),
),
),
),
);
}
}
......
......@@ -3,25 +3,45 @@ import 'package:one_poem/category/models/category_item_entity.dart';
CategoryItemEntity $CategoryItemEntityFromJson(Map<String, dynamic> json) {
final CategoryItemEntity categoryItemEntity = CategoryItemEntity();
final String? icon = jsonConvert.convert<String>(json['icon']);
if (icon != null) {
categoryItemEntity.icon = icon;
final String? flag = jsonConvert.convert<String>(json['flag']);
if (flag != null) {
categoryItemEntity.flag = flag;
}
final String? title = jsonConvert.convert<String>(json['title']);
if (title != null) {
categoryItemEntity.title = title;
final String? timeLunar = jsonConvert.convert<String>(json['time_lunar']);
if (timeLunar != null) {
categoryItemEntity.timeLunar = timeLunar;
}
final int? type = jsonConvert.convert<int>(json['type']);
if (type != null) {
categoryItemEntity.type = type;
final String? timeSolar = jsonConvert.convert<String>(json['time_solar']);
if (timeSolar != null) {
categoryItemEntity.timeSolar = timeSolar;
}
final String? period = jsonConvert.convert<String>(json['period']);
if (period != null) {
categoryItemEntity.period = period;
}
final String? poem = jsonConvert.convert<String>(json['poem']);
if (poem != null) {
categoryItemEntity.poem = poem;
}
final String? author = jsonConvert.convert<String>(json['author']);
if (author != null) {
categoryItemEntity.author = author;
}
final String? bgImage = jsonConvert.convert<String>(json['bg_image']);
if (bgImage != null) {
categoryItemEntity.bgImage = bgImage;
}
return categoryItemEntity;
}
Map<String, dynamic> $CategoryItemEntityToJson(CategoryItemEntity entity) {
final Map<String, dynamic> data = <String, dynamic>{};
data['icon'] = entity.icon;
data['title'] = entity.title;
data['type'] = entity.type;
data['flag'] = entity.flag;
data['time_lunar'] = entity.timeLunar;
data['time_solar'] = entity.timeSolar;
data['period'] = entity.period;
data['poem'] = entity.poem;
data['author'] = entity.author;
data['bg_image'] = entity.bgImage;
return data;
}
\ No newline at end of file
......
......@@ -12,7 +12,7 @@ FriendEntity $FriendEntityFromJson(Map<String, dynamic> json) {
Map<String, dynamic> $FriendEntityToJson(FriendEntity entity) {
final Map<String, dynamic> data = <String, dynamic>{};
data['data'] = entity.data!.map((v) => v.toJson()).toList();
data['data'] = entity.data?.map((v) => v.toJson()).toList();
return data;
}
......