OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
a53ae3e9 1 parent 31ae93a7

update styles

Inline Side-by-side
Showing 5 changed files with 79 additions and 28 deletions
1 +import 'dart:ui';
2 +
1 import 'package:flutter/cupertino.dart'; 3 import 'package:flutter/cupertino.dart';
2 import 'package:flutter/material.dart'; 4 import 'package:flutter/material.dart';
3 import 'package:one_poem/res/gaps.dart'; 5 import 'package:one_poem/res/gaps.dart';
...@@ -27,39 +29,79 @@ class _PoemDetailPageState extends State<PoemDetailPage> { ...@@ -27,39 +29,79 @@ class _PoemDetailPageState extends State<PoemDetailPage> {
27 Widget build(BuildContext context) { 29 Widget build(BuildContext context) {
28 return Scaffold( 30 return Scaffold(
29 appBar: MyAppBar( 31 appBar: MyAppBar(
32 + isTransparent: false,
30 homeTitleHeader: HomeTitleHeader( 33 homeTitleHeader: HomeTitleHeader(
31 - funcLeft: (){ 34 + funcLeft: () {
32 print("lefltlelfle"); 35 print("lefltlelfle");
33 }, 36 },
34 ), 37 ),
35 homeActionWidgets: HomeActionWidgets( 38 homeActionWidgets: HomeActionWidgets(
36 - funcStar: (){ 39 + funcStar: () {
37 print("starrrrrrr"); 40 print("starrrrrrr");
38 }, 41 },
39 ), 42 ),
40 ), 43 ),
41 body: Container( 44 body: Container(
42 decoration: const BoxDecoration( 45 decoration: const BoxDecoration(
43 - color: Colors.black,
44 image: DecorationImage( 46 image: DecorationImage(
45 image: AssetImage("assets/images/poem/poem_background.png"), 47 image: AssetImage("assets/images/poem/poem_background.png"),
46 fit: BoxFit.fill, 48 fit: BoxFit.fill,
47 ), 49 ),
48 ), 50 ),
49 - child: Column( 51 + child: SafeArea(
50 - crossAxisAlignment: CrossAxisAlignment.start, 52 + child: Container(
51 - children: const [ 53 + margin: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 25.0),
52 - Text("题破山寺后禅院"), 54 + height: 240.0,
53 - Gaps.vGap24, 55 + width: double.infinity,
54 - Text("常建"), 56 + decoration: BoxDecoration(
55 - Text("清晨入古寺，初日照高林。"), 57 + color: Colors.grey.shade200.withOpacity(0.1),
56 - Text("竹径通幽处，禅房花木深。"), 58 + border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度
57 - Text("山光悦鸟性，潭影空人心。"), 59 + borderRadius: BorderRadius.circular(2.0),
58 - Text("万籁此都寂，但余钟磬音。"), 60 + ),
59 - Gaps.vGap24, 61 + child: ClipRect(
60 - Text("100位用户朗读拍摄提交了“临境”"), 62 + child: BackdropFilter(
61 - ], 63 + filter: ImageFilter.blur(
62 - ), 64 + sigmaX: 10.0,
65 + sigmaY: 10.0,
66 + ),
67 + child: Container(
68 + decoration: BoxDecoration(
69 + color: Colors.grey.shade200.withOpacity(0.1),
70 + ),
71 + child: Padding(
72 + padding: const EdgeInsets.all(10.0),
73 + child: Column(
74 + children: const [
75 + Text(
76 + "题破山寺后禅院",
77 + style: TextStyle(
78 + fontSize: 24.0,
79 + color: Colors.white,
80 + ),
81 + ),
82 + Gaps.vGap16,
83 + Text(
84 + "常建",
85 + style: TextStyle(
86 + fontSize: 18.0,
87 + color: Colors.white,
88 + ),
89 + ),
90 + Gaps.vGap12,
91 + Text(
92 + "清晨入古寺，初日照高林。\n竹径通幽处，禅房花木深。\n山光悦鸟性，潭影空人心。\n万籁此都寂，但余钟磬音。",
93 + style: TextStyle(
94 + color: Colors.white,
95 + fontFamily: "ZCOOLXiaoWei",
96 + fontSize: 24.0),
97 + ),
98 + ],
99 + ),
100 + ),
101 + ),
102 + ),
103 + ),
104 + )),
63 alignment: Alignment.topLeft, 105 alignment: Alignment.topLeft,
64 ), 106 ),
65 ); 107 );
......
...@@ -10,6 +10,7 @@ import 'package:one_poem/tiktok/widgets/tiktok_video.dart'; ...@@ -10,6 +10,7 @@ import 'package:one_poem/tiktok/widgets/tiktok_video.dart';
10 import 'package:one_poem/tiktok/widgets/tiktok_video_button_column.dart'; 10 import 'package:one_poem/tiktok/widgets/tiktok_video_button_column.dart';
11 import 'package:one_poem/tiktok/widgets/tiktok_video_poem.dart'; 11 import 'package:one_poem/tiktok/widgets/tiktok_video_poem.dart';
12 import 'package:one_poem/util/toast_utils.dart'; 12 import 'package:one_poem/util/toast_utils.dart';
13 +import 'package:one_poem/widgets/bars/home_action_bar.dart';
13 import 'package:one_poem/widgets/my_app_bar.dart'; 14 import 'package:one_poem/widgets/my_app_bar.dart';
14 import 'package:video_player/video_player.dart'; 15 import 'package:video_player/video_player.dart';
15 16
...@@ -105,8 +106,14 @@ class _PoemPageState extends State<PoemPage> with WidgetsBindingObserver { ...@@ -105,8 +106,14 @@ class _PoemPageState extends State<PoemPage> with WidgetsBindingObserver {
105 // 组合 106 // 组合
106 return TikTokScaffold( 107 return TikTokScaffold(
107 controller: tkController, 108 controller: tkController,
108 - header: const MyAppBar( 109 + header: MyAppBar(
109 isBack: false, 110 isBack: false,
111 + isTransparent: true,
112 + homeActionWidgets: HomeActionWidgets(
113 + funcStar: () {
114 + print("starrrrrrr");
115 + },
116 + ),
110 ), 117 ),
111 leftPage: searchPage, 118 leftPage: searchPage,
112 rightPage: detailPage, 119 rightPage: detailPage,
......
...@@ -15,14 +15,15 @@ class TikTokTopInfoColumn extends StatelessWidget { ...@@ -15,14 +15,15 @@ class TikTokTopInfoColumn extends StatelessWidget {
15 15
16 @override 16 @override
17 Widget build(BuildContext context) { 17 Widget build(BuildContext context) {
18 - return Container( 18 + return SafeArea(
19 - margin: const EdgeInsets.symmetric(vertical: 30.0, horizontal: 25.0), 19 + child: Container(
20 + margin: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 25.0),
20 height: 100.0, 21 height: 100.0,
21 width: double.infinity, 22 width: double.infinity,
22 decoration: BoxDecoration( 23 decoration: BoxDecoration(
23 - color: Colors.black.withOpacity(.2), 24 + color: Colors.grey.shade200.withOpacity(0.1),
24 border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度 25 border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度
25 - borderRadius: BorderRadius.circular(5.0), 26 + borderRadius: BorderRadius.circular(2.0),
26 ), 27 ),
27 child: ClipRect( 28 child: ClipRect(
28 child: BackdropFilter( 29 child: BackdropFilter(
...@@ -31,12 +32,11 @@ class TikTokTopInfoColumn extends StatelessWidget { ...@@ -31,12 +32,11 @@ class TikTokTopInfoColumn extends StatelessWidget {
31 sigmaY: 10.0, 32 sigmaY: 10.0,
32 ), 33 ),
33 child: Container( 34 child: Container(
34 - padding: const EdgeInsets.all(10.0),
35 decoration: BoxDecoration( 35 decoration: BoxDecoration(
36 color: Colors.grey.shade200.withOpacity(0.1), 36 color: Colors.grey.shade200.withOpacity(0.1),
37 ), 37 ),
38 child: Padding( 38 child: Padding(
39 - padding: const EdgeInsets.all(0.0), 39 + padding: const EdgeInsets.all(10.0),
40 child: Column( 40 child: Column(
41 children: const [ 41 children: const [
42 Text( 42 Text(
...@@ -49,9 +49,9 @@ class TikTokTopInfoColumn extends StatelessWidget { ...@@ -49,9 +49,9 @@ class TikTokTopInfoColumn extends StatelessWidget {
49 ], 49 ],
50 ), 50 ),
51 ), 51 ),
52 - ) , 52 + ),
53 ), 53 ),
54 ), 54 ),
55 - ); 55 + ));
56 } 56 }
57 } 57 }
......
...@@ -23,7 +23,7 @@ class TikTokVidePoem extends StatelessWidget { ...@@ -23,7 +23,7 @@ class TikTokVidePoem extends StatelessWidget {
23 Widget build(BuildContext context) { 23 Widget build(BuildContext context) {
24 return Container( 24 return Container(
25 decoration: BoxDecoration( 25 decoration: BoxDecoration(
26 - color: Colors.black.withOpacity(.5), 26 + color: Colors.grey.shade200.withOpacity(0.1),
27 border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度 27 border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度
28 borderRadius: BorderRadius.circular(2.0), 28 borderRadius: BorderRadius.circular(2.0),
29 ), 29 ),
......
...@@ -12,11 +12,13 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget { ...@@ -12,11 +12,13 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
12 this.isBack = true, 12 this.isBack = true,
13 this.homeTitleHeader, 13 this.homeTitleHeader,
14 this.homeActionWidgets, 14 this.homeActionWidgets,
15 + this.isTransparent = false,
15 }) : super(key: key); 16 }) : super(key: key);
16 17
17 final Color? backgroundColor; 18 final Color? backgroundColor;
18 final VoidCallback? onPressed; 19 final VoidCallback? onPressed;
19 final bool isBack; 20 final bool isBack;
21 + final bool isTransparent;
20 22
21 final Widget? homeTitleHeader; 23 final Widget? homeTitleHeader;
22 final Widget? homeActionWidgets; 24 final Widget? homeActionWidgets;
...@@ -49,7 +51,7 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget { ...@@ -49,7 +51,7 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
49 return AnnotatedRegion<SystemUiOverlayStyle>( 51 return AnnotatedRegion<SystemUiOverlayStyle>(
50 value: _overlayStyle, 52 value: _overlayStyle,
51 child: Material( 53 child: Material(
52 - color: Colors.transparent, 54 + color: isTransparent ? Colors.transparent : Colors.black,
53 child: SafeArea( 55 child: SafeArea(
54 child: Stack( 56 child: Stack(
55 alignment: Alignment.center, 57 alignment: Alignment.center,
......