OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
9fecb8a6 1 parent a53ae3e9

update styles

Inline Side-by-side
Showing 1 changed file with 92 additions and 43 deletions
......@@ -42,6 +42,7 @@ class _PoemDetailPageState extends State<PoemDetailPage> {
),
),
body: Container(
alignment: Alignment.topCenter,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/poem/poem_background.png"),
......@@ -49,60 +50,108 @@ class _PoemDetailPageState extends State<PoemDetailPage> {
),
),
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(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
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: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: const [
Text(
"题破山寺后禅院",
style: TextStyle(
fontSize: 24.0,
color: Colors.white,
),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.1),
),
Gaps.vGap16,
Text(
"常建",
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
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),
),
],
),
),
Gaps.vGap12,
Text(
"清晨入古寺，初日照高林。\n竹径通幽处，禅房花木深。\n山光悦鸟性，潭影空人心。\n万籁此都寂，但余钟磬音。",
style: TextStyle(
color: Colors.white,
fontFamily: "ZCOOLXiaoWei",
fontSize: 24.0),
),
),
),
),
const Padding(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
child: Text(
"100位用户朗读录制提交了“临境”",
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
),
Container(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 25.0),
width: 400.0,
height: 160.0,
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Wrap(
spacing: 5.0,
crossAxisAlignment: WrapCrossAlignment.center,
children: const [
Icon(
Icons.play_circle_outline,
size: 16.0,
),
Text(
"普通话",
style: TextStyle(color: Colors.white, fontSize: 16.0),
)
],
);
}),
),
Row(
children: [
IconButton(
icon: const Icon(Icons.mic_none),
onPressed: () {},
),
),
IconButton(
icon: const Icon(Icons.camera_alt_outlined),
onPressed: () {},
)
],
),
),
],
),
)),
alignment: Alignment.topLeft,
),
),
);
}
......