基本完成除了详情
This commit is contained in:
zhutao
42
lib/page/my/my_page.dart
Normal file
42
lib/page/my/my_page.dart
Normal file
@@ -0,0 +1,42 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:remixicon/remixicon.dart';
|
||||
|
||||
import 'widget/avatar_name.dart';
|
||||
import 'widget/profile_section.dart';
|
||||
|
||||
class MyPage extends StatefulWidget {
|
||||
final GlobalKey<ScaffoldState> scaffoldKey;
|
||||
|
||||
const MyPage({super.key, required this.scaffoldKey});
|
||||
|
||||
@override
|
||||
State<MyPage> createState() => _MyPageState();
|
||||
}
|
||||
|
||||
class _MyPageState extends State<MyPage> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoPageScaffold(
|
||||
backgroundColor: Colors.white,
|
||||
navigationBar: CupertinoNavigationBar(
|
||||
middle: Text("个人资料"),
|
||||
leading: IconButton(
|
||||
onPressed: () {
|
||||
widget.scaffoldKey.currentState?.closeDrawer();
|
||||
},
|
||||
icon: Icon(RemixIcons.close_circle_line, size: 25),
|
||||
),
|
||||
),
|
||||
child: SafeArea(
|
||||
child: ListView(
|
||||
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
|
||||
children: [
|
||||
AvatarName(),
|
||||
ProfileSection(),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
112
lib/page/my/widget/avatar_name.dart
Normal file
112
lib/page/my/widget/avatar_name.dart
Normal file
@@ -0,0 +1,112 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:remixicon/remixicon.dart';
|
||||
|
||||
class AvatarName extends StatefulWidget {
|
||||
const AvatarName({super.key});
|
||||
|
||||
@override
|
||||
State<AvatarName> createState() => _AvatarNameState();
|
||||
}
|
||||
|
||||
class _AvatarNameState extends State<AvatarName> {
|
||||
//输入口
|
||||
final TextEditingController _inputController = TextEditingController();
|
||||
final FocusNode _focusNode = FocusNode();
|
||||
bool _isEdit = false;
|
||||
|
||||
///开始编辑
|
||||
void _handleEdit() {
|
||||
setState(() {
|
||||
_isEdit = true;
|
||||
});
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_focusNode.requestFocus();
|
||||
});
|
||||
}
|
||||
|
||||
///确定编辑内容
|
||||
void _confirmEdit(String value) {
|
||||
setState(() {
|
||||
_isEdit = false;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
spacing: 15,
|
||||
children: [
|
||||
Container(
|
||||
width: 80,
|
||||
height: 80,
|
||||
decoration: BoxDecoration(
|
||||
color: Color(0xffcae2fd),
|
||||
border: Border.all(
|
||||
color: Color(0xff797e80),
|
||||
width: 2,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: Container(
|
||||
width: 50,
|
||||
padding: EdgeInsets.all(5),
|
||||
decoration: BoxDecoration(
|
||||
color: Color(0xff8e8d93),
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
child: Icon(
|
||||
RemixIcons.user_fill,
|
||||
color: Color(0xffcae2fd),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Visibility(
|
||||
visible: _isEdit,
|
||||
replacement: InkWell(
|
||||
onTap: _handleEdit,
|
||||
child: Row(
|
||||
spacing: 10,
|
||||
children: [
|
||||
Text(
|
||||
"教练如何称呼你?",
|
||||
style: Theme.of(context).textTheme.labelMedium,
|
||||
),
|
||||
Icon(
|
||||
RemixIcons.pencil_fill,
|
||||
size: 18,
|
||||
color: Theme.of(context).textTheme.labelMedium?.color,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: TextField(
|
||||
focusNode: _focusNode,
|
||||
controller: _inputController,
|
||||
style: TextStyle(fontSize: 14),
|
||||
decoration: InputDecoration(
|
||||
hintText: "输入你的姓名",
|
||||
isCollapsed: true,
|
||||
contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(
|
||||
width: 1,
|
||||
color: Theme.of(context).colorScheme.surfaceContainerHigh,
|
||||
),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(
|
||||
width: 1,
|
||||
color: Theme.of(context).colorScheme.surfaceContainerHigh,
|
||||
),
|
||||
),
|
||||
),
|
||||
onSubmitted: _confirmEdit,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
87
lib/page/my/widget/profile_section.dart
Normal file
87
lib/page/my/widget/profile_section.dart
Normal file
@@ -0,0 +1,87 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:remixicon/remixicon.dart';
|
||||
|
||||
class ProfileSection extends StatefulWidget {
|
||||
const ProfileSection({super.key});
|
||||
|
||||
@override
|
||||
State<ProfileSection> createState() => _ProfileSectionState();
|
||||
}
|
||||
|
||||
class _ProfileSectionState extends State<ProfileSection> {
|
||||
//输入框
|
||||
final TextEditingController _inputController = TextEditingController();
|
||||
|
||||
final List<String> _tips = ["教练每次为你制定计划时，都会首先参考这里的信息", "你分享的背景信息越详细，教练就越能为你量身定制，符合你独特情况的行动步骤", "你可以在这里为教练提需求，比如“我不吃香菜”"];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
margin: EdgeInsets.only(top: 30),
|
||||
padding: EdgeInsets.only(top: 30),
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
top: BorderSide(
|
||||
width: 1,
|
||||
color: Theme.of(context).colorScheme.surfaceContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
margin: EdgeInsets.only(bottom: 20),
|
||||
child: Text("你的画像"),
|
||||
),
|
||||
Container(
|
||||
margin: EdgeInsets.only(bottom: 20),
|
||||
child: TextField(
|
||||
maxLines: 5,
|
||||
maxLength: 200,
|
||||
controller: _inputController,
|
||||
style: TextStyle(fontSize: 14, letterSpacing: 1),
|
||||
decoration: InputDecoration(
|
||||
hintText: "我是19岁女生,刷碗时用洗碗机,请不要按手洗拆解步骤..",
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(color: Colors.grey), // 普通状态
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(color: Colors.grey), // 获取焦点状态
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
ListView.separated(
|
||||
shrinkWrap: true,
|
||||
physics: NeverScrollableScrollPhysics(),
|
||||
itemBuilder: (_, index) {
|
||||
return Row(
|
||||
spacing: 10,
|
||||
children: [
|
||||
Icon(
|
||||
RemixIcons.lightbulb_flash_fill,
|
||||
color: Color(0xfff2a529),
|
||||
size: 18,
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
_tips[index],
|
||||
style: Theme.of(context).textTheme.labelMedium,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
separatorBuilder: (_, __) {
|
||||
return SizedBox(height: 10);
|
||||
},
|
||||
itemCount: _tips.length,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user