OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
5f905f43 1 parent bb6a5cd4

重构页面结构

Inline Side-by-side
Showing 4 changed files with 133 additions and 80 deletions
...@@ -7,7 +7,6 @@ import 'package:one_poem/poem/poem_router.dart'; ...@@ -7,7 +7,6 @@ import 'package:one_poem/poem/poem_router.dart';
7 import 'package:one_poem/res/gaps.dart'; 7 import 'package:one_poem/res/gaps.dart';
8 import 'package:one_poem/res/resources.dart'; 8 import 'package:one_poem/res/resources.dart';
9 import 'package:one_poem/routers/fluro_navigator.dart'; 9 import 'package:one_poem/routers/fluro_navigator.dart';
10 -import 'package:one_poem/setting/setting_router.dart';
11 10
12 class CategoryItem extends StatelessWidget { 11 class CategoryItem extends StatelessWidget {
13 const CategoryItem({ 12 const CategoryItem({
......
...@@ -2,6 +2,8 @@ import 'dart:ui'; ...@@ -2,6 +2,8 @@ import 'dart:ui';
2 2
3 import 'package:flutter/cupertino.dart'; 3 import 'package:flutter/cupertino.dart';
4 import 'package:flutter/material.dart'; 4 import 'package:flutter/material.dart';
5 +import 'package:one_poem/poem/widgets/poem_content.dart';
6 +import 'package:one_poem/poem/widgets/poem_user_comments.dart';
5 import 'package:one_poem/res/gaps.dart'; 7 import 'package:one_poem/res/gaps.dart';
6 import 'package:one_poem/widgets/bars/home_action_bar.dart'; 8 import 'package:one_poem/widgets/bars/home_action_bar.dart';
7 import 'package:one_poem/widgets/bars/home_menu_bar.dart'; 9 import 'package:one_poem/widgets/bars/home_menu_bar.dart';
...@@ -65,7 +67,6 @@ class _PoemDetailPageState extends State<PoemDetailPage> { ...@@ -65,7 +67,6 @@ class _PoemDetailPageState extends State<PoemDetailPage> {
65 color: Colors.grey.shade200.withOpacity(0.1), 67 color: Colors.grey.shade200.withOpacity(0.1),
66 border: Border.all( 68 border: Border.all(
67 color: Colors.grey.shade50, width: 0.5), // 边色与边宽度 69 color: Colors.grey.shade50, width: 0.5), // 边色与边宽度
68 - // borderRadius: BorderRadius.circular(2.0),
69 ), 70 ),
70 child: ClipRect( 71 child: ClipRect(
71 child: BackdropFilter( 72 child: BackdropFilter(
...@@ -81,85 +82,12 @@ class _PoemDetailPageState extends State<PoemDetailPage> { ...@@ -81,85 +82,12 @@ class _PoemDetailPageState extends State<PoemDetailPage> {
81 padding: const EdgeInsets.all(10.0), 82 padding: const EdgeInsets.all(10.0),
82 child: Column( 83 child: Column(
83 children: [ 84 children: [
84 - const Text( 85 + const PoemContent(
85 - "题破山寺后禅院", 86 + title: "题破山寺后禅院",
86 - style: TextStyle( 87 + author: "常建",
87 - fontSize: 24.0, 88 + poemStr: poemStr,
88 - color: Colors.white,
89 - ),
90 - ),
91 - Gaps.vGap16,
92 - const Text(
93 - "常建",
94 - style: TextStyle(
95 - fontSize: 18.0,
96 - color: Colors.white,
97 - ),
98 - ),
99 - Gaps.vGap12,
100 - Stack(
101 - alignment: Alignment.center,
102 - children: const [//TODO 字体是否描边？
103 - // Text(
104 - // poemStr,
105 - // style: TextStyle(
106 - // fontFamily: "ZCOOLXiaoWei",
107 - // fontSize: 24.0,
108 - // foreground: Paint()
109 - // ..style = PaintingStyle.stroke
110 - // ..strokeWidth = 1
111 - // ..color = Colors.black,
112 - // ),
113 - // ),
114 - Text(
115 - poemStr,
116 - style: TextStyle(
117 - color: Colors.white,
118 - fontFamily: "ZCOOLXiaoWei",
119 - fontSize: 24.0,
120 - ),
121 - ),
122 - ],
123 - ),
124 - Gaps.vGap24,
125 - Container(
126 - alignment: Alignment.centerLeft,
127 - padding: const EdgeInsets.symmetric(
128 - vertical: 5.0, horizontal: 10.0),
129 - child: const Text(
130 - "100位用户朗读录制提交了“临境”",
131 - style: TextStyle(
132 - color: Colors.white, fontSize: 15.0),
133 - ),
134 - ),
135 - Expanded(
136 - child: Container(
137 - padding: const EdgeInsets.symmetric(
138 - vertical: 5.0, horizontal: 10.0),
139 - width: double.infinity,
140 - child: ListView.builder(itemBuilder:
141 - (BuildContext context, int index) {
142 - return Wrap(
143 - spacing: 5.0,
144 - crossAxisAlignment:
145 - WrapCrossAlignment.center,
146 - children: const [
147 - Icon(
148 - Icons.play_circle_outline,
149 - size: 16.0,
150 - color: Colors.white,
151 - ),
152 - Text(
153 - "普通话",
154 - style: TextStyle(
155 - color: Colors.white,
156 - fontSize: 16.0),
157 - )
158 - ],
159 - );
160 - }),
161 - ),
162 ), 89 ),
90 + const PoemUserComments(),
163 Container( 91 Container(
164 width: double.infinity, 92 width: double.infinity,
165 alignment: Alignment.center, 93 alignment: Alignment.center,
......
1 +import 'package:flutter/cupertino.dart';
2 +import 'package:flutter/material.dart';
3 +import 'package:one_poem/res/resources.dart';
4 +
5 +class PoemContent extends StatelessWidget {
6 + const PoemContent({
7 + Key? key,
8 + required this.poemStr,
9 + required this.title,
10 + required this.author,
11 + }) : super(key: key);
12 +
13 + final String poemStr;
14 + final String title;
15 + final String author;
16 + @override
17 + Widget build(BuildContext context) {
18 + return Column(
19 + crossAxisAlignment: CrossAxisAlignment.center,
20 + children: [
21 + Text(
22 + title,
23 + style: const TextStyle(
24 + fontSize: 24.0,
25 + color: Colors.white,
26 + ),
27 + ),
28 + Gaps.vGap16,
29 + Text(
30 + author,
31 + style: const TextStyle(
32 + fontSize: 18.0,
33 + color: Colors.white,
34 + ),
35 + ),
36 + Gaps.vGap12,
37 + Stack(
38 + alignment: Alignment.center,
39 + children: [
40 + //TODO 字体是否描边？
41 + // Text(
42 + // poemStr,
43 + // style: TextStyle(
44 + // fontFamily: "ZCOOLXiaoWei",
45 + // fontSize: 24.0,
46 + // foreground: Paint()
47 + // ..style = PaintingStyle.stroke
48 + // ..strokeWidth = 1
49 + // ..color = Colors.black,
50 + // ),
51 + // ),
52 + Text(
53 + poemStr,
54 + style: const TextStyle(
55 + color: Colors.white,
56 + fontFamily: "ZCOOLXiaoWei",
57 + fontSize: 24.0,
58 + ),
59 + ),
60 + ],
61 + ),
62 + Gaps.vGap24,
63 + ],
64 + );
65 + }
66 +}
1 +import 'package:flutter/cupertino.dart';
2 +import 'package:flutter/material.dart';
3 +
4 +class PoemUserComments extends StatelessWidget {
5 + const PoemUserComments({
6 + Key? key,
7 + this.comments, //TODO 传入数据
8 + this.desc,
9 + }) : super(key: key);
10 +
11 + final List<Map<String, String>>? comments;
12 + final String? desc;
13 + @override
14 + Widget build(BuildContext context) {
15 + return SizedBox(
16 + height: 360, //TODO 高度待定
17 + width: double.infinity,
18 + child: Flex(
19 + direction: Axis.vertical,
20 + children: [
21 + Container(
22 + alignment: Alignment.centerLeft,
23 + padding:
24 + const EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
25 + child: Text(
26 + desc ?? "一大波用户朗读录制提交了“临境”",
27 + style: const TextStyle(color: Colors.white, fontSize: 15.0),
28 + ),
29 + ),
30 + Expanded(
31 + flex: 1,
32 + child: Container(
33 + padding:
34 + const EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
35 + width: double.infinity,
36 + child: ListView.builder(
37 + itemBuilder: (BuildContext context, int index) {
38 + return Wrap(
39 + spacing: 5.0,
40 + crossAxisAlignment: WrapCrossAlignment.center,
41 + children: const [
42 + Icon(
43 + Icons.play_circle_outline,
44 + size: 16.0,
45 + color: Colors.white,
46 + ),
47 + Text(
48 + "普通话",
49 + style: TextStyle(color: Colors.white, fontSize: 16.0),
50 + )
51 + ],
52 + );
53 + }),
54 + ),
55 + )
56 + ],
57 + ),
58 + );
59 + }
60 +}