OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
3415d83b 1 parent 24471029

profile edit page

Inline Side-by-side
Showing 4 changed files with 416 additions and 8 deletions
1 import 'package:fluro/fluro.dart'; 1 import 'package:fluro/fluro.dart';
2 import 'package:one_poem/routers/i_router.dart'; 2 import 'package:one_poem/routers/i_router.dart';
3 3
4 +import 'page/account_edit_page.dart';
4 import 'page/account_page.dart'; 5 import 'page/account_page.dart';
5 6
6 7
7 class AccountRouter implements IRouterProvider{ 8 class AccountRouter implements IRouterProvider{
8 9
9 static String accountPage = '/account'; 10 static String accountPage = '/account';
11 + static String accountEditPage = '/account/edit';
10 12
11 @override 13 @override
12 void initRouter(FluroRouter router) { 14 void initRouter(FluroRouter router) {
13 router.define(accountPage, handler: Handler(handlerFunc: (_, __) { 15 router.define(accountPage, handler: Handler(handlerFunc: (_, __) {
14 return const AccountPage(isSelfPage: true,); 16 return const AccountPage(isSelfPage: true,);
15 })); 17 }));
18 + router.define(accountEditPage, handler: Handler(handlerFunc: (_, __) {
19 + return AccountEditPage();
20 + }));
16 } 21 }
17 22
18 } 23 }
......
1 +import 'package:flutter/material.dart';
2 +import 'package:flutter/cupertino.dart';
3 +
4 +import 'package:one_poem/extension/int_extension.dart';
5 +import 'package:one_poem/widgets/my_app_bar.dart';
6 +
7 +class AccountEditPage extends StatefulWidget {
8 + const AccountEditPage({Key? key}) : super(key: key);
9 +
10 + @override
11 + MapScreenState createState() => MapScreenState();
12 +}
13 +
14 +class MapScreenState extends State<AccountEditPage>
15 + with SingleTickerProviderStateMixin {
16 + bool _status = true;
17 + final FocusNode myFocusNode = FocusNode();
18 +
19 + @override
20 + void initState() {
21 + super.initState();
22 + }
23 +
24 + @override
25 + Widget build(BuildContext context) {
26 + return Scaffold(
27 + appBar: const MyAppBar(
28 + isBack: true,
29 + isTransparent: true,
30 + ),
31 + body: Container(
32 + color: Colors.white,
33 + child: ListView(
34 + children: <Widget>[
35 + Column(
36 + children: <Widget>[
37 + Container(
38 + height: 220.px,
39 + color: Colors.white,
40 + child: Column(
41 + children: <Widget>[
42 + Padding(
43 + padding: const EdgeInsets.only(top: 20.0),
44 + child: Stack(fit: StackFit.loose, children: <Widget>[
45 + Row(
46 + crossAxisAlignment: CrossAxisAlignment.center,
47 + mainAxisAlignment: MainAxisAlignment.center,
48 + children: <Widget>[
49 + Container(
50 + height: 140.px,
51 + width: 140.px,
52 + margin: EdgeInsets.only(bottom: 12.px),
53 + child: ClipOval(
54 + child: Image.network(
55 + "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
56 + fit: BoxFit.cover,
57 + ),
58 + ),
59 + ),
60 + ],
61 + ),
62 + Padding(
63 + padding: const EdgeInsets.only(
64 + top: 90.0, right: 100.0),
65 + child: Row(
66 + mainAxisAlignment: MainAxisAlignment.center,
67 + children: const <Widget>[
68 + CircleAvatar(
69 + backgroundColor: Colors.red,
70 + radius: 25.0,
71 + child: Icon(
72 + Icons.camera_alt,
73 + color: Colors.white,
74 + ),
75 + )
76 + ],
77 + )),
78 + ]),
79 + )
80 + ],
81 + ),
82 + ),
83 + Container(
84 + color: const Color(0xffFFFFFF),
85 + child: Padding(
86 + padding: const EdgeInsets.only(bottom: 5.0),
87 + child: Column(
88 + crossAxisAlignment: CrossAxisAlignment.start,
89 + mainAxisAlignment: MainAxisAlignment.start,
90 + children: <Widget>[
91 + Padding(
92 + padding: const EdgeInsets.only(
93 + left: 25.0,
94 + right: 25.0,
95 + top: 5.0,
96 + ),
97 + child: Row(
98 + mainAxisAlignment:
99 + MainAxisAlignment.spaceBetween,
100 + mainAxisSize: MainAxisSize.max,
101 + children: <Widget>[
102 + Column(
103 + mainAxisAlignment: MainAxisAlignment.start,
104 + mainAxisSize: MainAxisSize.min,
105 + children: const <Widget>[
106 + Text(
107 + '个人信息',
108 + style: TextStyle(
109 + fontSize: 18.0,
110 + fontWeight: FontWeight.bold),
111 + ),
112 + ],
113 + ),
114 + Column(
115 + mainAxisAlignment: MainAxisAlignment.end,
116 + mainAxisSize: MainAxisSize.min,
117 + children: <Widget>[
118 + _status ? _getEditIcon() : Container(),
119 + ],
120 + )
121 + ],
122 + )),
123 + Padding(
124 + padding: const EdgeInsets.only(
125 + left: 25.0, right: 25.0, top: 25.0),
126 + child: Row(
127 + mainAxisSize: MainAxisSize.max,
128 + children: <Widget>[
129 + Column(
130 + mainAxisAlignment: MainAxisAlignment.start,
131 + mainAxisSize: MainAxisSize.min,
132 + children: const <Widget>[
133 + Text(
134 + '姓名',
135 + style: TextStyle(
136 + fontSize: 16.0,
137 + fontWeight: FontWeight.bold),
138 + ),
139 + ],
140 + ),
141 + ],
142 + )),
143 + Padding(
144 + padding: const EdgeInsets.only(
145 + left: 25.0, right: 25.0, top: 2.0),
146 + child: Row(
147 + mainAxisSize: MainAxisSize.max,
148 + children: <Widget>[
149 + Flexible(
150 + child: TextField(
151 + decoration: const InputDecoration(
152 + hintText: "请输入您的名称",
153 + ),
154 + enabled: !_status,
155 + autofocus: !_status,
156 + ),
157 + ),
158 + ],
159 + )),
160 + Padding(
161 + padding: const EdgeInsets.only(
162 + left: 25.0, right: 25.0, top: 25.0),
163 + child: Row(
164 + mainAxisSize: MainAxisSize.max,
165 + children: <Widget>[
166 + Column(
167 + mainAxisAlignment: MainAxisAlignment.start,
168 + mainAxisSize: MainAxisSize.min,
169 + children: const <Widget>[
170 + Text(
171 + '邮箱',
172 + style: TextStyle(
173 + fontSize: 16.0,
174 + fontWeight: FontWeight.bold),
175 + ),
176 + ],
177 + ),
178 + ],
179 + )),
180 + Padding(
181 + padding: const EdgeInsets.only(
182 + left: 25.0, right: 25.0, top: 2.0),
183 + child: Row(
184 + mainAxisSize: MainAxisSize.max,
185 + children: <Widget>[
186 + Flexible(
187 + child: TextField(
188 + decoration: const InputDecoration(
189 + hintText: "请输入您的邮箱",
190 + ),
191 + enabled: !_status,
192 + ),
193 + ),
194 + ],
195 + )),
196 + Padding(
197 + padding: const EdgeInsets.only(
198 + left: 25.0, right: 25.0, top: 25.0),
199 + child: Row(
200 + mainAxisSize: MainAxisSize.max,
201 + children: <Widget>[
202 + Column(
203 + mainAxisAlignment: MainAxisAlignment.start,
204 + mainAxisSize: MainAxisSize.min,
205 + children: const <Widget>[
206 + Text(
207 + '手机号',
208 + style: TextStyle(
209 + fontSize: 16.0,
210 + fontWeight: FontWeight.bold),
211 + ),
212 + ],
213 + ),
214 + ],
215 + )),
216 + Padding(
217 + padding: const EdgeInsets.only(
218 + left: 25.0, right: 25.0, top: 2.0),
219 + child: Row(
220 + mainAxisSize: MainAxisSize.max,
221 + children: <Widget>[
222 + Flexible(
223 + child: TextField(
224 + decoration: const InputDecoration(
225 + hintText: "请输入您的手机号",
226 + ),
227 + enabled: !_status,
228 + ),
229 + ),
230 + ],
231 + )),
232 + Padding(
233 + padding: const EdgeInsets.only(
234 + left: 25.0, right: 25.0, top: 25.0),
235 + child: Row(
236 + mainAxisSize: MainAxisSize.max,
237 + mainAxisAlignment: MainAxisAlignment.start,
238 + children: const <Widget>[
239 + Expanded(
240 + child: Text(
241 + '性别',
242 + style: TextStyle(
243 + fontSize: 16.0,
244 + fontWeight: FontWeight.bold,
245 + ),
246 + ),
247 + flex: 2,
248 + ),
249 + Expanded(
250 + child: Text(
251 + '出生日期',
252 + style: TextStyle(
253 + fontSize: 16.0,
254 + fontWeight: FontWeight.bold,
255 + ),
256 + ),
257 + flex: 2,
258 + ),
259 + ],
260 + )),
261 + Padding(
262 + padding: const EdgeInsets.only(
263 + left: 25.0, right: 25.0, top: 2.0),
264 + child: Row(
265 + mainAxisSize: MainAxisSize.max,
266 + mainAxisAlignment: MainAxisAlignment.start,
267 + children: <Widget>[
268 + Flexible(
269 + child: Padding(
270 + padding:
271 + const EdgeInsets.only(right: 10.0),
272 + child: TextField(
273 + decoration: const InputDecoration(
274 + hintText: "请选择性别"),
275 + enabled: !_status,
276 + ),
277 + ),
278 + flex: 2,
279 + ),
280 + Flexible(
281 + child: TextField(
282 + decoration: const InputDecoration(
283 + hintText: "请输入出生日期"),
284 + enabled: !_status,
285 + ),
286 + flex: 2,
287 + ),
288 + ],
289 + )),
290 + !_status ? _getActionButtons() : Container(),
291 + ],
292 + ),
293 + ),
294 + )
295 + ],
296 + ),
297 + ],
298 + ),
299 + ));
300 + }
301 +
302 + @override
303 + void dispose() {
304 + // Clean up the controller when the Widget is disposed
305 + myFocusNode.dispose();
306 + super.dispose();
307 + }
308 +
309 + Widget _getActionButtons() {
310 + return Padding(
311 + padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 45.0),
312 + child: Row(
313 + mainAxisSize: MainAxisSize.max,
314 + mainAxisAlignment: MainAxisAlignment.start,
315 + children: <Widget>[
316 + Expanded(
317 + child: Padding(
318 + padding: const EdgeInsets.only(right: 10.0),
319 + child: ElevatedButton(
320 + child: const Text("保存"),
321 + onPressed: () {
322 + setState(() {
323 + _status = true;
324 + FocusScope.of(context).requestFocus(FocusNode());
325 + });
326 + },
327 + ),
328 + ),
329 + flex: 2,
330 + ),
331 + Expanded(
332 + child: Padding(
333 + padding: const EdgeInsets.only(left: 10.0),
334 + child: ElevatedButton(
335 + style: ButtonStyle(
336 + backgroundColor: MaterialStateProperty.all(Colors.red)),
337 + child: const Text("取消"),
338 + onPressed: () {
339 + setState(() {
340 + _status = true;
341 + FocusScope.of(context).requestFocus(FocusNode());
342 + });
343 + },
344 + ),
345 + ),
346 + flex: 2,
347 + ),
348 + ],
349 + ),
350 + );
351 + }
352 +
353 + Widget _getEditIcon() {
354 + return GestureDetector(
355 + child: const CircleAvatar(
356 + backgroundColor: Colors.red,
357 + radius: 14.0,
358 + child: Icon(
359 + Icons.edit,
360 + color: Colors.white,
361 + size: 16.0,
362 + ),
363 + ),
364 + onTap: () {
365 + setState(() {
366 + _status = false;
367 + });
368 + },
369 + );
370 + }
371 +}
1 import 'package:flutter/material.dart'; 1 import 'package:flutter/material.dart';
2 +import 'package:one_poem/routers/fluro_navigator.dart';
2 import 'package:one_poem/tiktok/style/style.dart'; 3 import 'package:one_poem/tiktok/style/style.dart';
3 import 'package:tapped/tapped.dart'; 4 import 'package:tapped/tapped.dart';
4 import 'package:flutter_gen/gen_l10n/one_poem_localizations.dart'; 5 import 'package:flutter_gen/gen_l10n/one_poem_localizations.dart';
5 6
6 import 'package:one_poem/extension/int_extension.dart'; 7 import 'package:one_poem/extension/int_extension.dart';
7 8
9 +import '../account_router.dart';
10 +
8 class AccountPage extends StatefulWidget { 11 class AccountPage extends StatefulWidget {
9 const AccountPage({ 12 const AccountPage({
10 Key? key, 13 Key? key,
...@@ -83,7 +86,28 @@ class _AccountPageState extends State<AccountPage> { ...@@ -83,7 +86,28 @@ class _AccountPageState extends State<AccountPage> {
83 // 头像与关注 86 // 头像与关注
84 Stack( 87 Stack(
85 alignment: Alignment.bottomLeft, 88 alignment: Alignment.bottomLeft,
86 - children: <Widget>[likeButton, avatar], 89 + children: <Widget>[
90 + likeButton,
91 + avatar,
92 + Positioned(
93 + child: GestureDetector(
94 + child: CircleAvatar(
95 + backgroundColor: Colors.red.withOpacity(0.4),
96 + radius: 14.0,
97 + child: const Icon(
98 + Icons.edit,
99 + color: Colors.white,
100 + size: 16.0,
101 + ),
102 + ),
103 + onTap: () {
104 + NavigatorUtils.push(context, AccountRouter.accountEditPage);
105 + },
106 + ),
107 + left: 64.px,
108 + bottom: 10.px,
109 + ),
110 + ],
87 ), 111 ),
88 Container( 112 Container(
89 color: ColorPlate.white, 113 color: ColorPlate.white,
...@@ -167,12 +191,17 @@ class _AccountPageState extends State<AccountPage> { ...@@ -167,12 +191,17 @@ class _AccountPageState extends State<AccountPage> {
167 alignment: Alignment.centerRight, 191 alignment: Alignment.centerRight,
168 height: 64.px, 192 height: 64.px,
169 width: double.infinity, 193 width: double.infinity,
170 - child: IconButton( 194 + child: Row(
171 - icon: const Icon( 195 + mainAxisAlignment: MainAxisAlignment.end,
172 - Icons.settings_outlined, 196 + children: [
173 - color: Colors.black54, 197 + IconButton(
174 - ), 198 + icon: const Icon(
175 - onPressed: () {}, 199 + Icons.settings_outlined,
200 + color: Colors.black54,
201 + ),
202 + onPressed: () {},
203 + ),
204 + ],
176 ), 205 ),
177 ), 206 ),
178 body, 207 body,
......
...@@ -44,7 +44,10 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget { ...@@ -44,7 +44,10 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
44 }, 44 },
45 tooltip: '返回', 45 tooltip: '返回',
46 padding: const EdgeInsets.all(12.0), 46 padding: const EdgeInsets.all(12.0),
47 - icon: const Icon(Icons.arrow_back_ios_outlined, color: Colors.white,), 47 + icon: Icon(
48 + Icons.arrow_back_ios_outlined,
49 + color: isTransparent ? Colors.black54 : Colors.white,
50 + ),
48 ) 51 )
49 : Gaps.empty; 52 : Gaps.empty;
50 53
......