Showing
1 changed file
with
92 additions
and
43 deletions
| ... | @@ -42,6 +42,7 @@ class _PoemDetailPageState extends State<PoemDetailPage> { | ... | @@ -42,6 +42,7 @@ class _PoemDetailPageState extends State<PoemDetailPage> { |
| 42 | ), | 42 | ), |
| 43 | ), | 43 | ), |
| 44 | body: Container( | 44 | body: Container( |
| 45 | + alignment: Alignment.topCenter, | ||
| 45 | decoration: const BoxDecoration( | 46 | decoration: const BoxDecoration( |
| 46 | image: DecorationImage( | 47 | image: DecorationImage( |
| 47 | image: AssetImage("assets/images/poem/poem_background.png"), | 48 | image: AssetImage("assets/images/poem/poem_background.png"), |
| ... | @@ -49,60 +50,108 @@ class _PoemDetailPageState extends State<PoemDetailPage> { | ... | @@ -49,60 +50,108 @@ class _PoemDetailPageState extends State<PoemDetailPage> { |
| 49 | ), | 50 | ), |
| 50 | ), | 51 | ), |
| 51 | child: SafeArea( | 52 | child: SafeArea( |
| 52 | - child: Container( | 53 | + child: Column( |
| 53 | - margin: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 25.0), | 54 | + crossAxisAlignment: CrossAxisAlignment.start, |
| 54 | - height: 240.0, | 55 | + children: [ |
| 55 | - width: double.infinity, | 56 | + Container( |
| 56 | - decoration: BoxDecoration( | 57 | + margin: const EdgeInsets.symmetric( |
| 57 | - color: Colors.grey.shade200.withOpacity(0.1), | 58 | + vertical: 40.0, horizontal: 25.0), |
| 58 | - border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度 | 59 | + height: 240.0, |
| 59 | - borderRadius: BorderRadius.circular(2.0), | 60 | + width: double.infinity, |
| 60 | - ), | ||
| 61 | - child: ClipRect( | ||
| 62 | - child: BackdropFilter( | ||
| 63 | - filter: ImageFilter.blur( | ||
| 64 | - sigmaX: 10.0, | ||
| 65 | - sigmaY: 10.0, | ||
| 66 | - ), | ||
| 67 | - child: Container( | ||
| 68 | decoration: BoxDecoration( | 61 | decoration: BoxDecoration( |
| 69 | color: Colors.grey.shade200.withOpacity(0.1), | 62 | color: Colors.grey.shade200.withOpacity(0.1), |
| 63 | + border: Border.all(color: Colors.grey, width: 0.1), // 边色与边宽度 | ||
| 64 | + borderRadius: BorderRadius.circular(2.0), | ||
| 70 | ), | 65 | ), |
| 71 | - child: Padding( | 66 | + child: ClipRect( |
| 72 | - padding: const EdgeInsets.all(10.0), | 67 | + child: BackdropFilter( |
| 73 | - child: Column( | 68 | + filter: ImageFilter.blur( |
| 74 | - children: const [ | 69 | + sigmaX: 10.0, |
| 75 | - Text( | 70 | + sigmaY: 10.0, |
| 76 | - "题破山寺后禅院", | 71 | + ), |
| 77 | - style: TextStyle( | 72 | + child: Container( |
| 78 | - fontSize: 24.0, | 73 | + decoration: BoxDecoration( |
| 79 | - color: Colors.white, | 74 | + color: Colors.grey.shade200.withOpacity(0.1), |
| 80 | - ), | ||
| 81 | ), | 75 | ), |
| 82 | - Gaps.vGap16, | 76 | + child: Padding( |
| 83 | - Text( | 77 | + padding: const EdgeInsets.all(10.0), |
| 84 | - "常建", | 78 | + child: Column( |
| 85 | - style: TextStyle( | 79 | + children: const [ |
| 86 | - fontSize: 18.0, | 80 | + Text( |
| 87 | - color: Colors.white, | 81 | + "题破山寺后禅院", |
| 82 | + style: TextStyle( | ||
| 83 | + fontSize: 24.0, | ||
| 84 | + color: Colors.white, | ||
| 85 | + ), | ||
| 86 | + ), | ||
| 87 | + Gaps.vGap16, | ||
| 88 | + Text( | ||
| 89 | + "常建", | ||
| 90 | + style: TextStyle( | ||
| 91 | + fontSize: 18.0, | ||
| 92 | + color: Colors.white, | ||
| 93 | + ), | ||
| 94 | + ), | ||
| 95 | + Gaps.vGap12, | ||
| 96 | + Text( | ||
| 97 | + "清晨入古寺，初日照高林。\n竹径通幽处，禅房花木深。\n山光悦鸟性，潭影空人心。\n万籁此都寂，但余钟磬音。", | ||
| 98 | + style: TextStyle( | ||
| 99 | + color: Colors.white, | ||
| 100 | + fontFamily: "ZCOOLXiaoWei", | ||
| 101 | + fontSize: 24.0), | ||
| 102 | + ), | ||
| 103 | + ], | ||
| 88 | ), | 104 | ), |
| 89 | ), | 105 | ), |
| 90 | - Gaps.vGap12, | 106 | + ), |
| 91 | - Text( | 107 | + ), |
| 92 | - "清晨入古寺，初日照高林。\n竹径通幽处，禅房花木深。\n山光悦鸟性，潭影空人心。\n万籁此都寂，但余钟磬音。", | 108 | + ), |
| 93 | - style: TextStyle( | 109 | + ), |
| 94 | - color: Colors.white, | 110 | + const Padding( |
| 95 | - fontFamily: "ZCOOLXiaoWei", | 111 | + padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0), |
| 96 | - fontSize: 24.0), | 112 | + child: Text( |
| 113 | + "100位用户朗读录制提交了“临境”", | ||
| 114 | + style: TextStyle(color: Colors.black, fontSize: 16.0), | ||
| 115 | + ), | ||
| 116 | + ), | ||
| 117 | + Container( | ||
| 118 | + padding: const EdgeInsets.symmetric( | ||
| 119 | + vertical: 10.0, horizontal: 25.0), | ||
| 120 | + width: 400.0, | ||
| 121 | + height: 160.0, | ||
| 122 | + child: ListView.builder( | ||
| 123 | + itemBuilder: (BuildContext context, int index) { | ||
| 124 | + return Wrap( | ||
| 125 | + spacing: 5.0, | ||
| 126 | + crossAxisAlignment: WrapCrossAlignment.center, | ||
| 127 | + children: const [ | ||
| 128 | + Icon( | ||
| 129 | + Icons.play_circle_outline, | ||
| 130 | + size: 16.0, | ||
| 97 | ), | 131 | ), |
| 132 | + Text( | ||
| 133 | + "普通话", | ||
| 134 | + style: TextStyle(color: Colors.white, fontSize: 16.0), | ||
| 135 | + ) | ||
| 98 | ], | 136 | ], |
| 137 | + ); | ||
| 138 | + }), | ||
| 139 | + ), | ||
| 140 | + Row( | ||
| 141 | + children: [ | ||
| 142 | + IconButton( | ||
| 143 | + icon: const Icon(Icons.mic_none), | ||
| 144 | + onPressed: () {}, | ||
| 99 | ), | 145 | ), |
| 100 | - ), | 146 | + IconButton( |
| 147 | + icon: const Icon(Icons.camera_alt_outlined), | ||
| 148 | + onPressed: () {}, | ||
| 149 | + ) | ||
| 150 | + ], | ||
| 101 | ), | 151 | ), |
| 102 | - ), | 152 | + ], |
| 103 | ), | 153 | ), |
| 104 | - )), | 154 | + ), |
| 105 | - alignment: Alignment.topLeft, | ||
| 106 | ), | 155 | ), |
| 107 | ); | 156 | ); |
| 108 | } | 157 | } | ... | ... |
-
Please register or login to post a comment