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
import 'package:fluro/fluro.dart';
import 'package:one_poem/routers/i_router.dart';
import 'page/account_edit_page.dart';
import 'page/account_page.dart';
class AccountRouter implements IRouterProvider{
static String accountPage = '/account';
static String accountEditPage = '/account/edit';
@override
void initRouter(FluroRouter router) {
router.define(accountPage, handler: Handler(handlerFunc: (_, __) {
return const AccountPage(isSelfPage: true,);
}));
router.define(accountEditPage, handler: Handler(handlerFunc: (_, __) {
return AccountEditPage();
}));
}
}
......
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:one_poem/extension/int_extension.dart';
import 'package:one_poem/widgets/my_app_bar.dart';
class AccountEditPage extends StatefulWidget {
const AccountEditPage({Key? key}) : super(key: key);
@override
MapScreenState createState() => MapScreenState();
}
class MapScreenState extends State<AccountEditPage>
with SingleTickerProviderStateMixin {
bool _status = true;
final FocusNode myFocusNode = FocusNode();
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: const MyAppBar(
isBack: true,
isTransparent: true,
),
body: Container(
color: Colors.white,
child: ListView(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 220.px,
color: Colors.white,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Stack(fit: StackFit.loose, children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 140.px,
width: 140.px,
margin: EdgeInsets.only(bottom: 12.px),
child: ClipOval(
child: Image.network(
"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
fit: BoxFit.cover,
),
),
),
],
),
Padding(
padding: const EdgeInsets.only(
top: 90.0, right: 100.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
CircleAvatar(
backgroundColor: Colors.red,
radius: 25.0,
child: Icon(
Icons.camera_alt,
color: Colors.white,
),
)
],
)),
]),
)
],
),
),
Container(
color: const Color(0xffFFFFFF),
child: Padding(
padding: const EdgeInsets.only(bottom: 5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 25.0,
right: 25.0,
top: 5.0,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const <Widget>[
Text(
'个人信息',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
_status ? _getEditIcon() : Container(),
],
)
],
)),
Padding(
padding: const EdgeInsets.only(
left: 25.0, right: 25.0, top: 25.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const <Widget>[
Text(
'姓名',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
],
)),
Padding(
padding: const EdgeInsets.only(
left: 25.0, right: 25.0, top: 2.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
child: TextField(
decoration: const InputDecoration(
hintText: "请输入您的名称",
),
enabled: !_status,
autofocus: !_status,
),
),
],
)),
Padding(
padding: const EdgeInsets.only(
left: 25.0, right: 25.0, top: 25.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const <Widget>[
Text(
'邮箱',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
],
)),
Padding(
padding: const EdgeInsets.only(
left: 25.0, right: 25.0, top: 2.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
child: TextField(
decoration: const InputDecoration(
hintText: "请输入您的邮箱",
),
enabled: !_status,
),
),
],
)),
Padding(
padding: const EdgeInsets.only(
left: 25.0, right: 25.0, top: 25.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const <Widget>[
Text(
'手机号',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
],
)),
Padding(
padding: const EdgeInsets.only(
left: 25.0, right: 25.0, top: 2.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
child: TextField(
decoration: const InputDecoration(
hintText: "请输入您的手机号",
),
enabled: !_status,
),
),
],
)),
Padding(
padding: const EdgeInsets.only(
left: 25.0, right: 25.0, top: 25.0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: const <Widget>[
Expanded(
child: Text(
'性别',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
flex: 2,
),
Expanded(
child: Text(
'出生日期',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
flex: 2,
),
],
)),
Padding(
padding: const EdgeInsets.only(
left: 25.0, right: 25.0, top: 2.0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Flexible(
child: Padding(
padding:
const EdgeInsets.only(right: 10.0),
child: TextField(
decoration: const InputDecoration(
hintText: "请选择性别"),
enabled: !_status,
),
),
flex: 2,
),
Flexible(
child: TextField(
decoration: const InputDecoration(
hintText: "请输入出生日期"),
enabled: !_status,
),
flex: 2,
),
],
)),
!_status ? _getActionButtons() : Container(),
],
),
),
)
],
),
],
),
));
}
@override
void dispose() {
// Clean up the controller when the Widget is disposed
myFocusNode.dispose();
super.dispose();
}
Widget _getActionButtons() {
return Padding(
padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 45.0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: ElevatedButton(
child: const Text("保存"),
onPressed: () {
setState(() {
_status = true;
FocusScope.of(context).requestFocus(FocusNode());
});
},
),
),
flex: 2,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red)),
child: const Text("取消"),
onPressed: () {
setState(() {
_status = true;
FocusScope.of(context).requestFocus(FocusNode());
});
},
),
),
flex: 2,
),
],
),
);
}
Widget _getEditIcon() {
return GestureDetector(
child: const CircleAvatar(
backgroundColor: Colors.red,
radius: 14.0,
child: Icon(
Icons.edit,
color: Colors.white,
size: 16.0,
),
),
onTap: () {
setState(() {
_status = false;
});
},
);
}
}
import 'package:flutter/material.dart';
import 'package:one_poem/routers/fluro_navigator.dart';
import 'package:one_poem/tiktok/style/style.dart';
import 'package:tapped/tapped.dart';
import 'package:flutter_gen/gen_l10n/one_poem_localizations.dart';
import 'package:one_poem/extension/int_extension.dart';
import '../account_router.dart';
class AccountPage extends StatefulWidget {
const AccountPage({
Key? key,
......@@ -83,7 +86,28 @@ class _AccountPageState extends State<AccountPage> {
// 头像与关注
Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[likeButton, avatar],
children: <Widget>[
likeButton,
avatar,
Positioned(
child: GestureDetector(
child: CircleAvatar(
backgroundColor: Colors.red.withOpacity(0.4),
radius: 14.0,
child: const Icon(
Icons.edit,
color: Colors.white,
size: 16.0,
),
),
onTap: () {
NavigatorUtils.push(context, AccountRouter.accountEditPage);
},
),
left: 64.px,
bottom: 10.px,
),
],
),
Container(
color: ColorPlate.white,
......@@ -167,12 +191,17 @@ class _AccountPageState extends State<AccountPage> {
alignment: Alignment.centerRight,
height: 64.px,
width: double.infinity,
child: IconButton(
icon: const Icon(
Icons.settings_outlined,
color: Colors.black54,
),
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
icon: const Icon(
Icons.settings_outlined,
color: Colors.black54,
),
onPressed: () {},
),
],
),
),
body,
......
......@@ -44,7 +44,10 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
},
tooltip: '返回',
padding: const EdgeInsets.all(12.0),
icon: const Icon(Icons.arrow_back_ios_outlined, color: Colors.white,),
icon: Icon(
Icons.arrow_back_ios_outlined,
color: isTransparent ? Colors.black54 : Colors.white,
),
)
: Gaps.empty;
......