OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
20d218ca 1 parent a9c3ef0d

页面样式优化

Inline Side-by-side
Showing 7 changed files with 160 additions and 10 deletions

287 KB | W: | H:

888 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -6,10 +6,13 @@ import 'package:one_poem/poem/widgets/poem_content.dart'; ...@@ -6,10 +6,13 @@ import 'package:one_poem/poem/widgets/poem_content.dart';
6 import 'package:one_poem/poem/widgets/poem_user_audio.dart'; 6 import 'package:one_poem/poem/widgets/poem_user_audio.dart';
7 import 'package:one_poem/poem/widgets/poem_user_comments.dart'; 7 import 'package:one_poem/poem/widgets/poem_user_comments.dart';
8 import 'package:one_poem/res/gaps.dart'; 8 import 'package:one_poem/res/gaps.dart';
9 +import 'package:one_poem/routers/fluro_navigator.dart';
9 import 'package:one_poem/widgets/bars/home_action_bar.dart'; 10 import 'package:one_poem/widgets/bars/home_action_bar.dart';
10 import 'package:one_poem/widgets/bars/home_menu_bar.dart'; 11 import 'package:one_poem/widgets/bars/home_menu_bar.dart';
11 import 'package:one_poem/widgets/my_app_bar.dart'; 12 import 'package:one_poem/widgets/my_app_bar.dart';
12 13
14 +import '../poem_router.dart';
15 +
13 enum PoemContentSwitch { 16 enum PoemContentSwitch {
14 audio, 17 audio,
15 comment, 18 comment,
...@@ -49,6 +52,9 @@ class _PoemDetailPageState extends State<PoemDetailPage> { ...@@ -49,6 +52,9 @@ class _PoemDetailPageState extends State<PoemDetailPage> {
49 contentSwitch = PoemContentSwitch.comment; 52 contentSwitch = PoemContentSwitch.comment;
50 setState(() {}); 53 setState(() {});
51 }, 54 },
55 + funcRight: (){
56 + NavigatorUtils.push(context, '${PoemRouter.poemRecordAudioPage}?id=100');
57 + },
52 ), 58 ),
53 homeActionWidgets: HomeActionWidgets( 59 homeActionWidgets: HomeActionWidgets(
54 funcStar: () { 60 funcStar: () {
......
1 +import 'dart:ui';
2 +
3 +import 'package:flutter/cupertino.dart';
4 +import 'package:flutter/material.dart';
5 +import 'package:one_poem/poem/widgets/poem_content.dart';
6 +import 'package:one_poem/res/resources.dart';
7 +import 'package:one_poem/widgets/bars/home_action_bar.dart';
8 +import 'package:one_poem/widgets/bars/home_menu_bar.dart';
9 +import 'package:one_poem/widgets/my_app_bar.dart';
10 +
11 +class PoemRecordAudioPage extends StatefulWidget {
12 + @override
13 + State<StatefulWidget> createState() => _PoemRecordAudioPageState();
14 +
15 + const PoemRecordAudioPage({
16 + Key? key,
17 + required this.poemId,
18 + this.poemPanelHeight = 0,
19 + }) : super(key: key);
20 +
21 + final int poemPanelHeight;
22 + final int poemId;
23 +}
24 +
25 +class _PoemRecordAudioPageState extends State<PoemRecordAudioPage> {
26 + @override
27 + Widget build(BuildContext context) {
28 + const poemStr =
29 + "qīng chén rù gǔ sì\n清晨入古寺，\nchū rì zhào gāo lín\n初日照高林。\nzhú jìng tōng yōu chù\n竹径通幽处，\nchán fáng huā mù shēn\n禅房花木深。\nshān guāng yuè niǎo xìng\n山光悦鸟性，\ntán yǐng kōng rén xīn\n潭影空人心。\nwàn lài cǐ dōu jì\n万籁此都寂，\ndàn yú zhōng qìng yīn\n但余钟磬音。";
30 + return Scaffold(
31 + appBar: MyAppBar(
32 + isBack: true,
33 + isTransparent: false,
34 + homeMenuHeader: HomeMenuHeader(
35 + funcLeft: () {
36 + setState(() {});
37 + },
38 + funcCenter: () {
39 + setState(() {});
40 + },
41 + funcRight: () {},
42 + ),
43 + homeActionWidgets: HomeActionWidgets(
44 + funcStar: () {
45 + print("starrrrrrr");
46 + },
47 + ),
48 + ),
49 + body: Container(
50 + alignment: Alignment.topCenter,
51 + decoration: const BoxDecoration(
52 + image: DecorationImage(
53 + image: AssetImage("assets/images/poem/poem_background.png"),
54 + fit: BoxFit.fill,
55 + ),
56 + ),
57 + child: SafeArea(
58 + child: Column(
59 + crossAxisAlignment: CrossAxisAlignment.start,
60 + children: [
61 + Container(
62 + margin: const EdgeInsets.symmetric(
63 + vertical: 30.0, horizontal: 20.0),
64 + height: MediaQuery.of(context).size.height -
65 + 140 -
66 + widget.poemPanelHeight,
67 + width: double.infinity,
68 + decoration: BoxDecoration(
69 + color: Colors.grey.shade200.withOpacity(0.1),
70 + border: Border.all(
71 + color: Colors.grey.shade50, width: 0.5), // 边色与边宽度
72 + ),
73 + child: ClipRect(
74 + child: BackdropFilter(
75 + filter: ImageFilter.blur(
76 + sigmaX: 10.0,
77 + sigmaY: 10.0,
78 + ),
79 + child: Container(
80 + decoration: BoxDecoration(
81 + color: Colors.grey.shade200.withOpacity(0.1),
82 + ),
83 + child: Padding(
84 + padding: const EdgeInsets.all(10.0),
85 + child: Flex(
86 + direction: Axis.vertical,
87 + children: [
88 + const PoemContent(
89 + title: "题破山寺后禅院",
90 + author: "常建",
91 + poemStr: poemStr,
92 + fontSize: 22.0,
93 + ),
94 + Stack(
95 + alignment: Alignment.center,
96 + children: [
97 + Positioned(
98 + left: 10.0,
99 + child: IconButton(
100 + icon: const Icon(
101 + Icons.camera_alt_outlined,
102 + size: 28.0,
103 + ),
104 + onPressed: () {},
105 + ),
106 + ),
107 + SizedBox(
108 + width: double.infinity,
109 + height: 90.0,
110 + child: IconButton(
111 + icon: const Icon(
112 + Icons.mic_none,
113 + size: 70.0,
114 + color: Colors.green,
115 + ),
116 + onPressed: () {},
117 + ),
118 + ),
119 + ],
120 + ),
121 + ],
122 + ),
123 + ),
124 + ),
125 + ),
126 + ),
127 + ),
128 + ],
129 + ),
130 + ),
131 + ),
132 + );
133 + }
134 +}
1 import 'package:fluro/fluro.dart'; 1 import 'package:fluro/fluro.dart';
2 +import 'package:one_poem/poem/page/poem_record_audio.dart';
2 import 'package:one_poem/routers/i_router.dart'; 3 import 'package:one_poem/routers/i_router.dart';
3 -
4 import 'page/poem_detail.dart'; 4 import 'page/poem_detail.dart';
5 import 'page/poem_page.dart'; 5 import 'page/poem_page.dart';
6 6
7 class PoemRouter implements IRouterProvider { 7 class PoemRouter implements IRouterProvider {
8 static String poemPage = '/poem'; 8 static String poemPage = '/poem';
9 static String poemDetailPage = '/detail'; 9 static String poemDetailPage = '/detail';
10 + static String poemRecordAudioPage = '/poem_record_audio';
10 11
11 @override 12 @override
12 void initRouter(FluroRouter router) { 13 void initRouter(FluroRouter router) {
...@@ -14,10 +15,17 @@ class PoemRouter implements IRouterProvider { ...@@ -14,10 +15,17 @@ class PoemRouter implements IRouterProvider {
14 handler: Handler(handlerFunc: (_, __) => const PoemPage())); 15 handler: Handler(handlerFunc: (_, __) => const PoemPage()));
15 router.define(poemDetailPage, 16 router.define(poemDetailPage,
16 handler: Handler(handlerFunc: (_, Map<String, List<String>> params) { 17 handler: Handler(handlerFunc: (_, Map<String, List<String>> params) {
17 - String? id = params['id']?.first; 18 + String? id = params['id']?.first;
18 return PoemDetailPage( 19 return PoemDetailPage(
19 poemId: int.parse(id!), 20 poemId: int.parse(id!),
20 ); 21 );
21 })); 22 }));
23 + router.define(poemRecordAudioPage,
24 + handler: Handler(handlerFunc: (_, Map<String, List<String>> params) {
25 + String? id = params['id']?.first;
26 + return PoemRecordAudioPage(
27 + poemId: int.parse(id!),
28 + );
29 + }));
22 } 30 }
23 } 31 }
......
...@@ -8,11 +8,13 @@ class PoemContent extends StatelessWidget { ...@@ -8,11 +8,13 @@ class PoemContent extends StatelessWidget {
8 required this.poemStr, 8 required this.poemStr,
9 required this.title, 9 required this.title,
10 required this.author, 10 required this.author,
11 + this.fontSize = 24,
11 }) : super(key: key); 12 }) : super(key: key);
12 13
13 final String poemStr; 14 final String poemStr;
14 final String title; 15 final String title;
15 final String author; 16 final String author;
17 + final double fontSize;
16 @override 18 @override
17 Widget build(BuildContext context) { 19 Widget build(BuildContext context) {
18 return Column( 20 return Column(
...@@ -25,7 +27,7 @@ class PoemContent extends StatelessWidget { ...@@ -25,7 +27,7 @@ class PoemContent extends StatelessWidget {
25 color: Colors.black54, 27 color: Colors.black54,
26 ), 28 ),
27 ), 29 ),
28 - Gaps.vGap16, 30 + Gaps.vGap10,
29 Text( 31 Text(
30 author, 32 author,
31 style: const TextStyle( 33 style: const TextStyle(
...@@ -33,7 +35,7 @@ class PoemContent extends StatelessWidget { ...@@ -33,7 +35,7 @@ class PoemContent extends StatelessWidget {
33 color: Colors.black54, 35 color: Colors.black54,
34 ), 36 ),
35 ), 37 ),
36 - Gaps.vGap12, 38 + Gaps.vGap5,
37 Stack( 39 Stack(
38 alignment: Alignment.center, 40 alignment: Alignment.center,
39 children: [ 41 children: [
...@@ -51,15 +53,15 @@ class PoemContent extends StatelessWidget { ...@@ -51,15 +53,15 @@ class PoemContent extends StatelessWidget {
51 // ), 53 // ),
52 Text( 54 Text(
53 poemStr, 55 poemStr,
54 - style: const TextStyle( 56 + style: TextStyle(
55 color: Colors.black54, 57 color: Colors.black54,
56 fontFamily: "ZCOOLXiaoWei", 58 fontFamily: "ZCOOLXiaoWei",
57 - fontSize: 24.0, 59 + fontSize: fontSize,
58 ), 60 ),
59 ), 61 ),
60 ], 62 ],
61 ), 63 ),
62 - Gaps.vGap24, 64 + Gaps.vGap10,
63 ], 65 ],
64 ); 66 );
65 } 67 }
......
...@@ -20,7 +20,7 @@ class PoemUserAudio extends StatelessWidget { ...@@ -20,7 +20,7 @@ class PoemUserAudio extends StatelessWidget {
20 ListTile( 20 ListTile(
21 title: Text( 21 title: Text(
22 desc ?? "一大波用户朗读录制提交了“临境”", 22 desc ?? "一大波用户朗读录制提交了“临境”",
23 - style: const TextStyle(color: Colors.white, fontSize: 15.0), 23 + style: const TextStyle(color: Colors.black54, fontSize: 15.0),
24 ), 24 ),
25 ), 25 ),
26 SizedBox( 26 SizedBox(
...@@ -35,11 +35,11 @@ class PoemUserAudio extends StatelessWidget { ...@@ -35,11 +35,11 @@ class PoemUserAudio extends StatelessWidget {
35 Icon( 35 Icon(
36 Icons.play_circle_outline, 36 Icons.play_circle_outline,
37 size: 16.0, 37 size: 16.0,
38 - color: Colors.white, 38 + color: Colors.black45,
39 ), 39 ),
40 Text( 40 Text(
41 "普通话", 41 "普通话",
42 - style: TextStyle(color: Colors.white, fontSize: 16.0), 42 + style: TextStyle(color: Colors.black45, fontSize: 16.0),
43 ) 43 )
44 ], 44 ],
45 ); 45 );
......