OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
24471029 1 parent c79f8cc4

update styles

Inline Side-by-side
Showing 4 changed files with 130 additions and 92 deletions
1 import 'package:flutter/material.dart'; 1 import 'package:flutter/material.dart';
2 import 'package:one_poem/tiktok/style/style.dart'; 2 import 'package:one_poem/tiktok/style/style.dart';
3 -import 'package:one_poem/widgets/my_app_bar.dart';
4 import 'package:tapped/tapped.dart'; 3 import 'package:tapped/tapped.dart';
5 import 'package:flutter_gen/gen_l10n/one_poem_localizations.dart'; 4 import 'package:flutter_gen/gen_l10n/one_poem_localizations.dart';
6 5
6 +import 'package:one_poem/extension/int_extension.dart';
7 +
7 class AccountPage extends StatefulWidget { 8 class AccountPage extends StatefulWidget {
8 const AccountPage({ 9 const AccountPage({
9 Key? key, 10 Key? key,
...@@ -26,12 +27,17 @@ class _AccountPageState extends State<AccountPage> { ...@@ -26,12 +27,17 @@ class _AccountPageState extends State<AccountPage> {
26 @override 27 @override
27 Widget build(BuildContext context) { 28 Widget build(BuildContext context) {
28 Widget likeButton = Container( 29 Widget likeButton = Container(
29 - color: ColorPlate.back1, 30 + color: ColorPlate.white,
30 child: Row( 31 child: Row(
31 crossAxisAlignment: CrossAxisAlignment.start, 32 crossAxisAlignment: CrossAxisAlignment.start,
32 mainAxisAlignment: MainAxisAlignment.end, 33 mainAxisAlignment: MainAxisAlignment.end,
33 children: const <Widget>[ 34 children: const <Widget>[
34 Tapped( 35 Tapped(
36 + child: _MembershipButton(
37 + title: '会员中心',
38 + ),
39 + ),
40 + Tapped(
35 child: _UserRightButton( 41 child: _UserRightButton(
36 title: '钱包', 42 title: '钱包',
37 ), 43 ),
...@@ -40,23 +46,23 @@ class _AccountPageState extends State<AccountPage> { ...@@ -40,23 +46,23 @@ class _AccountPageState extends State<AccountPage> {
40 ), 46 ),
41 ); 47 );
42 Widget avatar = Container( 48 Widget avatar = Container(
43 - height: 120 + MediaQuery.of(context).padding.top, 49 + height: 120.px + MediaQuery.of(context).padding.top,
44 - padding: const EdgeInsets.only(left: 18), 50 + padding: EdgeInsets.only(left: 18.px),
45 alignment: Alignment.bottomLeft, 51 alignment: Alignment.bottomLeft,
46 child: OverflowBox( 52 child: OverflowBox(
47 alignment: Alignment.bottomLeft, 53 alignment: Alignment.bottomLeft,
48 - minHeight: 20, 54 + minHeight: 20.px,
49 - maxHeight: 300, 55 + maxHeight: 300.px,
50 child: Container( 56 child: Container(
51 - height: 74, 57 + height: 74.px,
52 - width: 74, 58 + width: 74.px,
53 - margin: const EdgeInsets.only(bottom: 12), 59 + margin: EdgeInsets.only(bottom: 12.px),
54 decoration: BoxDecoration( 60 decoration: BoxDecoration(
55 - borderRadius: BorderRadius.circular(44), 61 + borderRadius: BorderRadius.circular(44.px),
56 color: Colors.orange, 62 color: Colors.orange,
57 border: Border.all( 63 border: Border.all(
58 color: Colors.white, 64 color: Colors.white,
59 - width: 1, 65 + width: 1.px,
60 ), 66 ),
61 ), 67 ),
62 child: ClipOval( 68 child: ClipOval(
...@@ -73,19 +79,19 @@ class _AccountPageState extends State<AccountPage> { ...@@ -73,19 +79,19 @@ class _AccountPageState extends State<AccountPage> {
73 parent: AlwaysScrollableScrollPhysics(), 79 parent: AlwaysScrollableScrollPhysics(),
74 ), 80 ),
75 children: <Widget>[ 81 children: <Widget>[
76 - Container(height: 20), 82 + Container(height: 20.px),
77 // 头像与关注 83 // 头像与关注
78 Stack( 84 Stack(
79 alignment: Alignment.bottomLeft, 85 alignment: Alignment.bottomLeft,
80 children: <Widget>[likeButton, avatar], 86 children: <Widget>[likeButton, avatar],
81 ), 87 ),
82 Container( 88 Container(
83 - color: ColorPlate.back1, 89 + color: ColorPlate.white,
84 child: Column( 90 child: Column(
85 children: <Widget>[ 91 children: <Widget>[
86 Container( 92 Container(
87 - padding: const EdgeInsets.only(left: 18), 93 + padding: EdgeInsets.only(left: 18.px),
88 - color: ColorPlate.back1, 94 + color: ColorPlate.white,
89 child: Column( 95 child: Column(
90 crossAxisAlignment: CrossAxisAlignment.start, 96 crossAxisAlignment: CrossAxisAlignment.start,
91 children: <Widget>[ 97 children: <Widget>[
...@@ -93,14 +99,14 @@ class _AccountPageState extends State<AccountPage> { ...@@ -93,14 +99,14 @@ class _AccountPageState extends State<AccountPage> {
93 '@唐宋八大家TOP8', 99 '@唐宋八大家TOP8',
94 style: StandardTextStyle.big, 100 style: StandardTextStyle.big,
95 ), 101 ),
96 - Container(height: 8), 102 + Container(height: 8.px),
97 Text( 103 Text(
98 '朴实无华，且枯燥', 104 '朴实无华，且枯燥',
99 - style: StandardTextStyle.smallWithOpacity.apply( 105 + style: StandardTextStyle.small.apply(
100 - color: Colors.white, 106 + color: Colors.black45,
101 ), 107 ),
102 ), 108 ),
103 - Container(height: 10), 109 + Container(height: 10.px),
104 Row( 110 Row(
105 children: const <Widget>[ 111 children: const <Widget>[
106 _UserTag(tag: '幽默'), 112 _UserTag(tag: '幽默'),
...@@ -109,15 +115,15 @@ class _AccountPageState extends State<AccountPage> { ...@@ -109,15 +115,15 @@ class _AccountPageState extends State<AccountPage> {
109 _UserTag(tag: '狮子座'), 115 _UserTag(tag: '狮子座'),
110 ], 116 ],
111 ), 117 ),
112 - Container(height: 10), 118 + Container(height: 10.px),
113 ], 119 ],
114 ), 120 ),
115 ), 121 ),
116 Container( 122 Container(
117 - color: ColorPlate.back1, 123 + color: ColorPlate.white,
118 - padding: const EdgeInsets.symmetric( 124 + padding: EdgeInsets.symmetric(
119 - horizontal: 8, 125 + horizontal: 8.px,
120 - vertical: 2, 126 + vertical: 2.px,
121 ), 127 ),
122 child: Row( 128 child: Row(
123 mainAxisAlignment: MainAxisAlignment.start, 129 mainAxisAlignment: MainAxisAlignment.start,
...@@ -130,7 +136,7 @@ class _AccountPageState extends State<AccountPage> { ...@@ -130,7 +136,7 @@ class _AccountPageState extends State<AccountPage> {
130 ), 136 ),
131 ), 137 ),
132 Container( 138 Container(
133 - height: 10, 139 + height: 10.px,
134 margin: const EdgeInsets.symmetric(horizontal: 12), 140 margin: const EdgeInsets.symmetric(horizontal: 12),
135 decoration: BoxDecoration( 141 decoration: BoxDecoration(
136 border: Border( 142 border: Border(
...@@ -147,31 +153,62 @@ class _AccountPageState extends State<AccountPage> { ...@@ -147,31 +153,62 @@ class _AccountPageState extends State<AccountPage> {
147 ], 153 ],
148 ); 154 );
149 return Scaffold( 155 return Scaffold(
150 - appBar: MyAppBar(
151 - ),
152 body: Container( 156 body: Container(
153 decoration: const BoxDecoration( 157 decoration: const BoxDecoration(
154 - gradient: LinearGradient( 158 + image: DecorationImage(
155 - begin: Alignment.topCenter, 159 + image: AssetImage("assets/images/poem/poem_background.png"),
156 - colors: <Color>[ 160 + fit: BoxFit.fill,
157 - Colors.orange,
158 - Colors.red,
159 - ],
160 ), 161 ),
161 ), 162 ),
162 child: Stack( 163 child: Stack(
163 alignment: Alignment.topCenter, 164 alignment: Alignment.topCenter,
164 children: <Widget>[ 165 children: <Widget>[
165 Container( 166 Container(
166 - margin: const EdgeInsets.only(top: 400), 167 + alignment: Alignment.centerRight,
167 - height: double.infinity, 168 + height: 64.px,
168 width: double.infinity, 169 width: double.infinity,
169 - color: ColorPlate.back1, 170 + child: IconButton(
171 + icon: const Icon(
172 + Icons.settings_outlined,
173 + color: Colors.black54,
174 + ),
175 + onPressed: () {},
176 + ),
170 ), 177 ),
171 body, 178 body,
172 ], 179 ],
173 ), 180 ),
174 - )); 181 + ),
182 + );
183 + }
184 +}
185 +
186 +class _MembershipButton extends StatelessWidget {
187 + const _MembershipButton({
188 + Key? key,
189 + required this.title,
190 + }) : super(key: key);
191 +
192 + final String title;
193 +
194 + @override
195 + Widget build(BuildContext context) {
196 + return Container(
197 + padding: EdgeInsets.symmetric(
198 + vertical: 3.px,
199 + horizontal: 12.px,
200 + ),
201 + margin: EdgeInsets.all(8.px),
202 + alignment: Alignment.center,
203 + child: Text(
204 + title,
205 + style: TextStyle(color: ColorPlate.red.withOpacity(0.4)),
206 + ),
207 + decoration: BoxDecoration(
208 + border: Border.all(color: ColorPlate.red.withOpacity(.4)),
209 + borderRadius: BorderRadius.circular(4.px),
210 + ),
211 + );
175 } 212 }
176 } 213 }
177 214
...@@ -186,11 +223,11 @@ class _UserRightButton extends StatelessWidget { ...@@ -186,11 +223,11 @@ class _UserRightButton extends StatelessWidget {
186 @override 223 @override
187 Widget build(BuildContext context) { 224 Widget build(BuildContext context) {
188 return Container( 225 return Container(
189 - padding: const EdgeInsets.symmetric( 226 + padding: EdgeInsets.symmetric(
190 - vertical: 6, 227 + vertical: 3.px,
191 - horizontal: 20, 228 + horizontal: 12.px,
192 ), 229 ),
193 - margin: const EdgeInsets.all(8), 230 + margin: EdgeInsets.all(8.px),
194 alignment: Alignment.center, 231 alignment: Alignment.center,
195 child: Text( 232 child: Text(
196 title, 233 title,
...@@ -198,7 +235,7 @@ class _UserRightButton extends StatelessWidget { ...@@ -198,7 +235,7 @@ class _UserRightButton extends StatelessWidget {
198 ), 235 ),
199 decoration: BoxDecoration( 236 decoration: BoxDecoration(
200 border: Border.all(color: ColorPlate.orange), 237 border: Border.all(color: ColorPlate.orange),
201 - borderRadius: BorderRadius.circular(4), 238 + borderRadius: BorderRadius.circular(4.px),
202 ), 239 ),
203 ); 240 );
204 } 241 }
...@@ -214,20 +251,20 @@ class _UserTag extends StatelessWidget { ...@@ -214,20 +251,20 @@ class _UserTag extends StatelessWidget {
214 @override 251 @override
215 Widget build(BuildContext context) { 252 Widget build(BuildContext context) {
216 return Container( 253 return Container(
217 - margin: const EdgeInsets.symmetric(horizontal: 4), 254 + margin: EdgeInsets.symmetric(horizontal: 4.px),
218 - padding: const EdgeInsets.symmetric( 255 + padding: EdgeInsets.symmetric(
219 - vertical: 2, 256 + vertical: 2.px,
220 - horizontal: 4, 257 + horizontal: 4.px,
221 ), 258 ),
222 decoration: BoxDecoration( 259 decoration: BoxDecoration(
223 border: Border.all( 260 border: Border.all(
224 - color: Colors.white.withOpacity(0.3), 261 + color: Colors.black.withOpacity(0.3),
225 ), 262 ),
226 - borderRadius: BorderRadius.circular(4), 263 + borderRadius: BorderRadius.circular(4.px),
227 ), 264 ),
228 child: Text( 265 child: Text(
229 tag ?? '标签', 266 tag ?? '标签',
230 - style: StandardTextStyle.smallWithOpacity, 267 + style: StandardTextStyle.small,
231 ), 268 ),
232 ); 269 );
233 } 270 }
...@@ -243,9 +280,9 @@ class _UserVideoTable extends StatelessWidget { ...@@ -243,9 +280,9 @@ class _UserVideoTable extends StatelessWidget {
243 return Column( 280 return Column(
244 children: <Widget>[ 281 children: <Widget>[
245 Container( 282 Container(
246 - color: ColorPlate.back1, 283 + color: ColorPlate.white,
247 - padding: const EdgeInsets.symmetric( 284 + padding: EdgeInsets.symmetric(
248 - vertical: 12, 285 + vertical: 12.px,
249 ), 286 ),
250 child: Row( 287 child: Row(
251 mainAxisAlignment: MainAxisAlignment.center, 288 mainAxisAlignment: MainAxisAlignment.center,
...@@ -281,6 +318,13 @@ class _UserVideoTable extends StatelessWidget { ...@@ -281,6 +318,13 @@ class _UserVideoTable extends StatelessWidget {
281 _SmallVideo(), 318 _SmallVideo(),
282 ], 319 ],
283 ), 320 ),
321 + Row(
322 + children: const <Widget>[
323 + _SmallVideo(),
324 + _SmallVideo(),
325 + _SmallVideo(),
326 + ],
327 + ),
284 ], 328 ],
285 ); 329 );
286 } 330 }
...@@ -295,18 +339,20 @@ class _SmallVideo extends StatelessWidget { ...@@ -295,18 +339,20 @@ class _SmallVideo extends StatelessWidget {
295 Widget build(BuildContext context) { 339 Widget build(BuildContext context) {
296 return Expanded( 340 return Expanded(
297 child: AspectRatio( 341 child: AspectRatio(
298 - aspectRatio: 3 / 4.0, 342 + aspectRatio: 3.px / 4.0,
299 child: Container( 343 child: Container(
300 - decoration: BoxDecoration( 344 + decoration: const BoxDecoration(
301 - color: ColorPlate.darkGray, 345 + image: DecorationImage(
302 - border: Border.all(color: Colors.black), 346 + image: AssetImage("assets/images/poem/poem_background.png"),
347 + fit: BoxFit.fill,
348 + ),
303 ), 349 ),
304 alignment: Alignment.center, 350 alignment: Alignment.center,
305 child: Text( 351 child: Text(
306 '一言', 352 '一言',
307 style: TextStyle( 353 style: TextStyle(
308 - color: Colors.white.withOpacity(0.1), 354 + color: Colors.black54,
309 - fontSize: 18, 355 + fontSize: 18.px,
310 fontWeight: FontWeight.w900, 356 fontWeight: FontWeight.w900,
311 ), 357 ),
312 ), 358 ),
...@@ -335,8 +381,8 @@ class _PointSelectTextButton extends StatelessWidget { ...@@ -335,8 +381,8 @@ class _PointSelectTextButton extends StatelessWidget {
335 children: <Widget>[ 381 children: <Widget>[
336 isSelect 382 isSelect
337 ? Container( 383 ? Container(
338 - width: 6, 384 + width: 6.px,
339 - height: 6, 385 + height: 6.px,
340 decoration: BoxDecoration( 386 decoration: BoxDecoration(
341 color: ColorPlate.orange, 387 color: ColorPlate.orange,
342 borderRadius: BorderRadius.circular(3), 388 borderRadius: BorderRadius.circular(3),
...@@ -347,9 +393,7 @@ class _PointSelectTextButton extends StatelessWidget { ...@@ -347,9 +393,7 @@ class _PointSelectTextButton extends StatelessWidget {
347 padding: const EdgeInsets.only(left: 2), 393 padding: const EdgeInsets.only(left: 2),
348 child: Text( 394 child: Text(
349 title, 395 title,
350 - style: isSelect 396 + style: isSelect ? StandardTextStyle.big : StandardTextStyle.small,
351 - ? StandardTextStyle.small
352 - : StandardTextStyle.smallWithOpacity,
353 ), 397 ),
354 ) 398 )
355 ], 399 ],
...@@ -372,7 +416,7 @@ class TextGroup extends StatelessWidget { ...@@ -372,7 +416,7 @@ class TextGroup extends StatelessWidget {
372 @override 416 @override
373 Widget build(BuildContext context) { 417 Widget build(BuildContext context) {
374 return Container( 418 return Container(
375 - padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 8), 419 + padding: EdgeInsets.symmetric(vertical: 0.px, horizontal: 8.px),
376 child: Row( 420 child: Row(
377 crossAxisAlignment: CrossAxisAlignment.end, 421 crossAxisAlignment: CrossAxisAlignment.end,
378 children: <Widget>[ 422 children: <Widget>[
...@@ -380,10 +424,10 @@ class TextGroup extends StatelessWidget { ...@@ -380,10 +424,10 @@ class TextGroup extends StatelessWidget {
380 title, 424 title,
381 style: StandardTextStyle.big.apply(color: color), 425 style: StandardTextStyle.big.apply(color: color),
382 ), 426 ),
383 - Container(width: 4), 427 + Container(width: 4.px),
384 Text( 428 Text(
385 tag, 429 tag,
386 - style: StandardTextStyle.smallWithOpacity.apply( 430 + style: StandardTextStyle.small.apply(
387 color: color?.withOpacity(0.6), 431 color: color?.withOpacity(0.6),
388 ), 432 ),
389 ), 433 ),
......
1 import 'package:flutter/material.dart'; 1 import 'package:flutter/material.dart';
2 import 'package:one_poem/category/provider/categories_page_provider.dart'; 2 import 'package:one_poem/category/provider/categories_page_provider.dart';
3 import 'package:one_poem/util/theme_utils.dart'; 3 import 'package:one_poem/util/theme_utils.dart';
4 -import 'package:one_poem/widgets/load_image.dart';
5 import 'package:one_poem/widgets/my_app_bar.dart'; 4 import 'package:one_poem/widgets/my_app_bar.dart';
6 import 'package:provider/provider.dart'; 5 import 'package:provider/provider.dart';
7 6
8 import 'category_list_page.dart'; 7 import 'category_list_page.dart';
9 8
10 -/// design/4商品/index.html
11 class CategoriesPage extends StatefulWidget { 9 class CategoriesPage extends StatefulWidget {
12 const CategoriesPage({Key? key}) : super(key: key); 10 const CategoriesPage({Key? key}) : super(key: key);
13 11
...@@ -45,18 +43,19 @@ class _CategoriesPageState extends State<CategoriesPage> ...@@ -45,18 +43,19 @@ class _CategoriesPageState extends State<CategoriesPage>
45 child: Scaffold( 43 child: Scaffold(
46 appBar: MyAppBar( 44 appBar: MyAppBar(
47 isBack: false, 45 isBack: false,
46 + isTransparent: true,
48 homeMenuHeader: Container( 47 homeMenuHeader: Container(
49 alignment: Alignment.center, 48 alignment: Alignment.center,
50 margin: const EdgeInsets.symmetric(horizontal: 5.0), 49 margin: const EdgeInsets.symmetric(horizontal: 5.0),
51 child: const Text( 50 child: const Text(
52 "众妙", 51 "众妙",
53 - style: TextStyle(color: Colors.white), 52 + style: TextStyle(color: Colors.black54),
54 ), 53 ),
55 ), 54 ),
56 homeActionWidgets: IconButton( 55 homeActionWidgets: IconButton(
57 icon: const Icon( 56 icon: const Icon(
58 Icons.search, 57 Icons.search,
59 - color: Colors.white, 58 + color: Colors.black54,
60 ), 59 ),
61 onPressed: () {}, 60 onPressed: () {},
62 ), 61 ),
......
...@@ -3,11 +3,7 @@ import 'package:flutter/rendering.dart'; ...@@ -3,11 +3,7 @@ import 'package:flutter/rendering.dart';
3 3
4 class SysSize { 4 class SysSize {
5 static const double avatar = 56; 5 static const double avatar = 56;
6 - // static const double iconBig = 40;
7 static const double iconNormal = 24; 6 static const double iconNormal = 24;
8 - // static const double big = 18;
9 - // static const double normal = 16;
10 - // static const double small = 12;
11 static const double iconBig = 40; 7 static const double iconBig = 40;
12 static const double big = 16; 8 static const double big = 16;
13 static const double normal = 14; 9 static const double normal = 14;
...@@ -36,19 +32,19 @@ class StandardTextStyle { ...@@ -36,19 +32,19 @@ class StandardTextStyle {
36 fontSize: SysSize.normal, 32 fontSize: SysSize.normal,
37 inherit: true, 33 inherit: true,
38 ); 34 );
39 - static const TextStyle normalWithOpacity = const TextStyle( 35 + static const TextStyle normalWithOpacity = TextStyle(
40 - color: const Color.fromRGBO(0xff, 0xff, 0xff, .66), 36 + color: Color.fromRGBO(0xff, 0xff, 0xff, .66),
41 fontWeight: FontWeight.normal, 37 fontWeight: FontWeight.normal,
42 fontSize: SysSize.normal, 38 fontSize: SysSize.normal,
43 inherit: true, 39 inherit: true,
44 ); 40 );
45 - static const TextStyle small = const TextStyle( 41 + static const TextStyle small = TextStyle(
46 fontWeight: FontWeight.normal, 42 fontWeight: FontWeight.normal,
47 fontSize: SysSize.small, 43 fontSize: SysSize.small,
48 inherit: true, 44 inherit: true,
49 ); 45 );
50 - static const TextStyle smallWithOpacity = const TextStyle( 46 + static const TextStyle smallWithOpacity = TextStyle(
51 - color: const Color.fromRGBO(0xff, 0xff, 0xff, .66), 47 + color: Color.fromRGBO(0xff, 0xff, 0xff, .66),
52 fontWeight: FontWeight.normal, 48 fontWeight: FontWeight.normal,
53 fontSize: SysSize.small, 49 fontSize: SysSize.small,
54 inherit: true, 50 inherit: true,
...@@ -57,20 +53,20 @@ class StandardTextStyle { ...@@ -57,20 +53,20 @@ class StandardTextStyle {
57 53
58 class ColorPlate { 54 class ColorPlate {
59 // 配色 55 // 配色
60 - static const Color orange = const Color(0xffFFC459); 56 + static const Color orange = Color(0xffFFC459);
61 - static const Color yellow = const Color(0xffF1E300); 57 + static const Color yellow = Color(0xffF1E300);
62 - static const Color green = const Color(0xff7ED321); 58 + static const Color green = Color(0xff7ED321);
63 - static const Color red = const Color(0xffEB3838); 59 + static const Color red = Color(0xffEB3838);
64 - static const Color darkGray = const Color(0xff4A4A4A); 60 + static const Color darkGray = Color(0xff4A4A4A);
65 - static const Color gray = const Color(0xff9b9b9b); 61 + static const Color gray = Color(0xff9b9b9b);
66 - static const Color lightGray = const Color(0xfff5f5f4); 62 + static const Color lightGray = Color(0xfff5f5f4);
67 - static const Color black = const Color(0xff000000); 63 + static const Color black = Color(0xff000000);
68 - static const Color white = const Color(0xffffffff); 64 + static const Color white = Color(0xffffffff);
69 - static const Color clear = const Color(0); 65 + static const Color clear = Color(0x00000000);
70 66
71 /// 深色背景 67 /// 深色背景
72 - static const Color back1 = const Color(0xff1D1F22); 68 + static const Color back1 = Color(0xff1D1F22);
73 69
74 /// 比深色背景略深一点 70 /// 比深色背景略深一点
75 - static const Color back2 = const Color(0xff121314); 71 + static const Color back2 = Color(0xff121314);
76 } 72 }
......
1 import 'package:flutter/material.dart'; 1 import 'package:flutter/material.dart';
2 -import 'package:one_poem/res/resources.dart';
3 2
4 class HomeActionWidgets extends StatelessWidget { 3 class HomeActionWidgets extends StatelessWidget {
5 const HomeActionWidgets({ 4 const HomeActionWidgets({
......