先看效果图：
此篇文章用来记录学习Flutter用，如果对你有帮助的话，就点个赞吧，hiahia~
界面代码如下：
import 'package:ecology/utils/toast.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'logic.dart';
class MinePage extends StatelessWidget {
MinePage({Key? key}) : super(key: key);
static String routeName = '/mine';
final logic = Get.put(MineLogic());
final state = Get.find<MineLogic>().state;
@override
Widget build(BuildContext context) {
return Material(
color: Color(0xffEEEEEE),
child: Column(
children: [
_buildTitle(context),
Expanded(
child: ListView(
padding: EdgeInsets.only(top: 0),
children: <Widget>[
_buildMoreActions(),
_buildBottom(),
],
))
],
),
);
}
//顶部标题
Widget _buildTitle(BuildContext context) {
return SizedBox(
height: 150,
child: Stack(
children: [
Container(
height: 120,
padding:
const EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
//color: Colors.white,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
color: Colors.purple,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InkWell(
child: const CircleAvatar(
radius: 30.0,
backgroundImage: AssetImage('assets/images/head.png'),
),
onTap: (){XToast.show('小可爱');},
),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'皮皮猪',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
color: Colors.white),
),
SizedBox(
height: 2,
),
Text(
'温暖小窝的主人',
style: TextStyle(
fontSize: 10.0,
color: Colors.white,
),
),
SizedBox(
height: 2,
),
Text(
'120关注 | 100粉丝',
style: TextStyle(
fontSize: 10.0,
color: Colors.white,
),
),
],
),
),
// 右上方的两个图标
const Spacer(), // 添加一个间距以将图标推到右上方
InkWell(
child: const Icon(
Icons.adf_scanner_outlined,
color: Colors.white,
),
onTap: (){XToast.show('扫描');},
),
const SizedBox(width: 10.0), // 用于创建图标之间的间距
InkWell(
child: const Icon(
Icons.settings,
color: Colors.white,
),
onTap: (){},
),
],
),
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 5),
padding: const EdgeInsets.symmetric(horizontal: 10),
height: 60,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: InkWell(
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.mode_edit_outlined),
Text(
'我的创作',
style: TextStyle(fontSize: 10),
),
],
),
onTap: (){XToast.show('我的创作');},
),
),
const VerticalDivider(
indent: 15,
endIndent: 15,
color: Color(0xFFEEEEEE),
),
Expanded(
child: InkWell(
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.notifications_none),
Text(
'我的消息',
style: TextStyle(fontSize: 10),
),
],
),
onTap: (){XToast.show('我的消息');},
),
),
const VerticalDivider(
indent: 15,
endIndent: 15,
color: Color(0xFFEEEEEE),
),
Expanded(
child: InkWell(
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.bookmark_add_outlined),
Text(
'我的收藏',
style: TextStyle(fontSize: 10),
),
],
),
onTap: (){XToast.show('我的收藏');},
),
),
const VerticalDivider(
indent: 15,
endIndent: 15,
color: Color(0xFFEEEEEE),
),
Expanded(
child: InkWell(
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.receipt),
Text(
'浏览记录',
style: TextStyle(fontSize: 10),
),
],
),
onTap: (){XToast.show('浏览记录');},
),
),
const VerticalDivider(
indent: 15,
endIndent: 15,
color: Color(0xFFEEEEEE),
),
Expanded(
child: InkWell(
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.wallet),
Text(
'我的钱包',
style: TextStyle(fontSize: 10),
),
],
),
onTap: (){XToast.show('我的钱包');},
),
),
],
),
))
],
),
);
}
Widget _buildMoreActions() {
return Container(
margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: InkWell(
child: _gradientContainer(
icon: Icons.location_city,
text1: '企业模式',
text2: '企业助力业务拓展',
),
onTap: (){XToast.show('企业模式');},
),
),
const SizedBox(
width: 5,
),
Expanded(
child: InkWell(
child: _gradientContainer(
icon: Icons.star,
text1: '积分商城',
text2: '海量商品积分兑换',
),
onTap: (){XToast.show('积分商城');},
),
),
],
),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: InkWell(
child: _gradientContainer(
icon: Icons.next_plan,
text1: '内容计划',
text2: '打造更多优质内容',
),
onTap: (){XToast.show('内容计划');},
),
),
SizedBox(
width: 5,
),
Expanded(
child: InkWell(
child: _gradientContainer(
icon: Icons.card_giftcard,
text1: '邀请有礼',
text2: '邀请好友得大礼',
),
onTap: (){XToast.show('邀请有礼');},
),
),
],
)
],
),
);
}
//渐变Container
Widget _gradientContainer(
{required IconData icon, required String text1, required String text2}) {
return Container(
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFFf9ffff),
Colors.white
], // Adjust the gradient colors as needed
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(
icon,
color: Colors.black,
size: 32.0,
),
Padding(
padding: const EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text1,
style: const TextStyle(
color: Colors.black,
fontSize: 14.0,
),
),
SizedBox(height: 4,),
Text(
text2,
style: const TextStyle(
color: Colors.grey,
fontSize: 10.0,
),
),
],
),
)
],
),
);
}
Widget _buildBottom() {
return Container(
margin: const EdgeInsets.only(left: 5,right: 5),
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: Column(
children: [
Material(
color: Colors.white,
child: InkWell(
child: const Padding(
padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
child: Row(
children: [
Expanded(
child: Text(
'安全设置',
style: TextStyle(fontSize: 13),
)),
Icon(Icons.chevron_right),
],
),
),
onTap: (){},
),
),
const Divider(height: 0.1,indent: 5,endIndent: 10,color: Color(0xFFEEEEEE),),
Material(
color: Colors.white,
child: InkWell(
child: const Padding(
padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
child: Row(
children: [
Expanded(
child: Text(
'系统设置',
style: TextStyle(fontSize: 13),
)),
Icon(Icons.chevron_right),
],
),
),
onTap: (){},
),
),
const Divider(height: 0.1,indent: 5,endIndent: 10,color: Color(0xFFEEEEEE),),
Material(
color: Colors.white,
child: InkWell(
child: const Padding(
padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
child: Row(
children: [
Expanded(
child: Text(
'联系我们',
style: TextStyle(fontSize: 13),
)),
Icon(Icons.chevron_right),
],
),
),
onTap: (){},
),
),
const Divider(height: 0.1,indent: 5,endIndent: 10,color: Color(0xFFEEEEEE),),
Material(
color: Colors.white,
child: InkWell(
child: const Padding(
padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
child: Row(
children: [
Expanded(
child: Text(
'常见问题',
style: TextStyle(fontSize: 13),
)),
Icon(Icons.chevron_right),
],
),
),
onTap: (){},
),
)
],
),
);
}
}