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
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:one_poem/res/gaps.dart';
......@@ -27,39 +29,79 @@ class _PoemDetailPageState extends State<PoemDetailPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: MyAppBar(
isTransparent: false,
homeTitleHeader: HomeTitleHeader(
funcLeft: (){
funcLeft: () {
print("lefltlelfle");
},
),
homeActionWidgets: HomeActionWidgets(
funcStar: (){
funcStar: () {
print("starrrrrrr");
},
),
),
body: Container(
decoration: const BoxDecoration(
color: Colors.black,
image: DecorationImage(
image: AssetImage("assets/images/poem/poem_background.png"),
fit: BoxFit.fill,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("题破山寺后禅院"),
Gaps.vGap24,
Text("常建"),
Text("清晨入古寺，初日照高林。"),
Text("竹径通幽处，禅房花木深。"),
Text("山光悦鸟性，潭影空人心。"),
Text("万籁此都寂，但余钟磬音。"),
Gaps.vGap24,
Text("100位用户朗读拍摄提交了“临境”"),
],
),
child: SafeArea(
child: Container(
margin: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 25.0),
height: 240.0,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.1),
border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度
borderRadius: BorderRadius.circular(2.0),
),
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: const EdgeInsets.all(10.0),
child: Column(
children: const [
Text(
"题破山寺后禅院",
style: TextStyle(
fontSize: 24.0,
color: Colors.white,
),
),
Gaps.vGap16,
Text(
"常建",
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
),
),
Gaps.vGap12,
Text(
"清晨入古寺，初日照高林。\n竹径通幽处，禅房花木深。\n山光悦鸟性，潭影空人心。\n万籁此都寂，但余钟磬音。",
style: TextStyle(
color: Colors.white,
fontFamily: "ZCOOLXiaoWei",
fontSize: 24.0),
),
],
),
),
),
),
),
)),
alignment: Alignment.topLeft,
),
);
......
......@@ -10,6 +10,7 @@ import 'package:one_poem/tiktok/widgets/tiktok_video.dart';
import 'package:one_poem/tiktok/widgets/tiktok_video_button_column.dart';
import 'package:one_poem/tiktok/widgets/tiktok_video_poem.dart';
import 'package:one_poem/util/toast_utils.dart';
import 'package:one_poem/widgets/bars/home_action_bar.dart';
import 'package:one_poem/widgets/my_app_bar.dart';
import 'package:video_player/video_player.dart';
......@@ -105,8 +106,14 @@ class _PoemPageState extends State<PoemPage> with WidgetsBindingObserver {
// 组合
return TikTokScaffold(
controller: tkController,
header: const MyAppBar(
header: MyAppBar(
isBack: false,
isTransparent: true,
homeActionWidgets: HomeActionWidgets(
funcStar: () {
print("starrrrrrr");
},
),
),
leftPage: searchPage,
rightPage: detailPage,
......
......@@ -15,14 +15,15 @@ class TikTokTopInfoColumn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 30.0, horizontal: 25.0),
return SafeArea(
child: Container(
margin: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 25.0),
height: 100.0,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.black.withOpacity(.2),
color: Colors.grey.shade200.withOpacity(0.1),
border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度
borderRadius: BorderRadius.circular(5.0),
borderRadius: BorderRadius.circular(2.0),
),
child: ClipRect(
child: BackdropFilter(
......@@ -31,12 +32,11 @@ class TikTokTopInfoColumn extends StatelessWidget {
sigmaY: 10.0,
),
child: Container(
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.1),
),
child: Padding(
padding: const EdgeInsets.all(0.0),
padding: const EdgeInsets.all(10.0),
child: Column(
children: const [
Text(
......@@ -49,9 +49,9 @@ class TikTokTopInfoColumn extends StatelessWidget {
],
),
),
) ,
),
),
),
);
));
}
}
......
......@@ -23,7 +23,7 @@ class TikTokVidePoem extends StatelessWidget {
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(.5),
color: Colors.grey.shade200.withOpacity(0.1),
border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度
borderRadius: BorderRadius.circular(2.0),
),
......
......@@ -12,11 +12,13 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
this.isBack = true,
this.homeTitleHeader,
this.homeActionWidgets,
this.isTransparent = false,
}) : super(key: key);
final Color? backgroundColor;
final VoidCallback? onPressed;
final bool isBack;
final bool isTransparent;
final Widget? homeTitleHeader;
final Widget? homeActionWidgets;
......@@ -49,7 +51,7 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: _overlayStyle,
child: Material(
color: Colors.transparent,
color: isTransparent ? Colors.transparent : Colors.black,
child: SafeArea(
child: Stack(
alignment: Alignment.center,
......